Elementor #8631 - Info Fusion Hub

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Premium Store</title>

body{
background: linear-gradient(to bottom, #ffffff, #f3f6fb);
}

/* NAV */
.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.logo{
font-weight:700;
font-size:22px;
color:#222;
}

.nav-links{
display:flex;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:#444;
font-weight:500;
}

/* BUTTON (RED instead of orange) */
.btn{
background: linear-gradient(135deg, #ff4d4d, #e60000);
color:#fff;
padding:10px 20px;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.btn:hover{
background: linear-gradient(135deg, #e60000, #ff4d4d);
}

/* HERO */
.hero{
display:flex;
align-items:center;
padding:60px;
gap:60px;
}

.left{
width:50%;
}

.left h1{
font-size:50px;
color:#222;
}

.left p{
margin-top:20px;
color:#555;
}

.hero-btn{
margin-top:25px;
}

/* IMAGE */
.right{
width:50%;
}

.right img{
width:100%;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* PRODUCTS */
.products{
padding:60px;
}

.products h2{
text-align:center;
margin-bottom:40px;
color:#222;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
gap:25px;
}

/* CARD */
.card{
background:#ffffff;
border-radius:15px;
padding:15px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.06);
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
}

.card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
}

.card h3{
margin:10px 0;
color:#333;
}

/* PRICE (RED) */
.price{
color:#e60000;
font-weight:bold;
font-size:18px;
}

/* FOOTER */
.footer{
background:#fff;
color:#555;
text-align:center;
padding:20px;
margin-top:50px;
border-top:1px solid #eee;
}

/* MOBILE */
@media(max-width:900px){
.hero{
flex-direction:column;
}

.left,.right{
width:100%;
}

.nav{
flex-direction:column;
gap:15px;
}
}
</style>

</head>
<body>

<!– NAV –>
<div class=”nav”>
<div class=”logo”>MyStore</div>

<div class=”nav-links”>
<a href=”#”>Home</a>
<a href=”#”>Shop</a>
<a href=”#”>About</a>
<a href=”#”>Contact</a>
</div>

<!– HERO –>
<div class=”hero”>

<div class=”left”>
<h1>Upgrade Your Lifestyle with Premium Products</h1>
<p>Discover high-quality beauty & skincare products for your daily routine.</p>

</div>

<!– PRODUCTS –>
<div class=”products”>
<h2>Our Products</h2>

<div class=”card”>
<img src=”https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?auto=format&fit=crop&w=400&q=80″>
<h3>Face Cream</h3>
<div class=”price”>$18</div>
</div>

<div class=”card”>
<img src=”https://images.unsplash.com/photo-1612817288484-6f916006741a?auto=format&fit=crop&w=400&q=80″>
<h3>Beauty Oil</h3>
<div class=”price”>$30</div>
</div>

<div class=”card”>
<img src=”https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&w=400&q=80″>
<h3>Organic Serum</h3>
<div class=”price”>$22</div>
</div>

</div>
</div>

</body>
</html>