<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Tech UI</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#f4f6fb;
}
/* TOP BAR */
.top-bar{
background:#1f4fa3;
color:#fff;
padding:8px 50px;
display:flex;
justify-content:space-between;
font-size:14px;
}
/* HEADER */
.header{
background:#111;
padding:15px 50px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
color:#ff7a00;
font-size:26px;
font-weight:700;
}
.nav a{
color:#ccc;
margin-left:20px;
text-decoration:none;
}
.nav a:hover{color:#fff;}
/* HERO */
.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 50px;
gap:40px;
}
.hero-text{
flex:1;
}
.hero-text h1{
font-size:58px;
line-height:1.1;
font-weight:700;
}
.hero-text p{
margin:20px 0;
color:#555;
}
/* BUTTON */
.btn{
padding:12px 26px;
border:none;
border-radius:8px;
font-weight:600;
cursor:pointer;
}
.btn-primary{
background:#1f4fa3;
color:#fff;
}
.btn-secondary{
background:#ff7a00;
color:#fff;
margin-left:10px;
}
/* HERO IMAGE CIRCLE */
.hero-img{
width:360px;
height:360px;
border-radius:50%;
overflow:hidden;
box-shadow:0 30px 70px rgba(0,0,0,0.3);
position:relative;
}
.hero-img img{
width:100%;
height:100%;
object-fit:cover;
}
/* glow effect */
.hero-img::after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle, transparent 60%, rgba(0,0,0,0.2));
}
/* CARDS */
.cards{
display:flex;
gap:20px;
padding:40px 50px;
}
.card{
flex:1;
height:240px;
border-radius:16px;
overflow:hidden;
position:relative;
transition:.4s;
}
.card img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}
.card:hover img{
transform:scale(1.1);
}
.card::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.card-content{
position:absolute;
bottom:20px;
left:20px;
color:#fff;
z-index:2;
}
/* SECTION */
.section-title{
text-align:center;
padding:40px;
}
.section-title h2{
font-size:32px;
}
/* FEATURES */
.features{
display:flex;
gap:20px;
padding:20px 50px 60px;
}
.feature{
flex:1;
padding:30px;
border-radius:12px;
background:#fff;
}
.feature.dark{
background:#111;
color:#fff;
}
.feature.dark h3,
.feature.dark p{
color:#fff;
}
.price{
color:#4fa3ff;
font-weight:700;
}
.old{
text-decoration:line-through;
color:#aaa;
}
/* RESPONSIVE */
@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
}
.cards,
.features{
flex-direction:column;
}
}
</style>
</head>
<body>
Returns & Refunds | Shipping | Track Order
Follow Us
N
<a href="#">Categories</a>
<a href="#">Deals</a>
<a href="#">Sale</a>
<a href="#">Contact</a>
<!-- HERO -->
<h1>TAKE YOUR GADGETS TO THE NEXT LEVEL!</h1>
<p>Discover the latest tech innovation with exclusive discounts up to 50% off.</p>
<button>Shop Now</button>
<button>Watch Video</button>
<!-- FIXED HERO IMAGE -->
<img decoding="async" src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8" alt="">
<!-- CARDS -->
<img decoding="async" src="https://images.unsplash.com/photo-1587202372775-e229f172b9d7">
<small>BESTSELLER</small>
<h3>Quantum X1</h3>
<p>Gaming keyboard</p>
<img decoding="async" src="https://images.unsplash.com/photo-1615663245857-ac93bb7c39e7">
<small>BESTSELLER</small>
<h3>AeroTrack 300</h3>
<p>Ultimate mouse</p>
<!-- TITLE -->
<h2>POWER UP WITH THE BEST IN TECH</h2>
<p>Discover best-selling items customers love</p>
<!-- FEATURES -->
<h3>Free shipping on orders $100+</h3>
<p>Fast delivery to your door</p>
<h3>AirPulse R255 X Wireless</h3>
<p>$240 $185</p>
<button>Learn More</button>
</body>
</html>]]>
