Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>It's Shakhawat</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#f7f8fc;
color:#1d1d1d;
}
a{
text-decoration:none;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
/* NAVBAR */
nav{
width:100%;
background:#fff;
padding:18px 0;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 15px rgba(0,0,0,0.05);
}
.nav-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:30px;
font-weight:700;
color:#0a2b8f;
}
.nav-links{
display:flex;
gap:35px;
align-items:center;
}
.nav-links a{
color:#222;
font-weight:500;
transition:0.3s;
}
.nav-links a:hover{
color:#2356ff;
}
.btn{
background:#0d47d9;
color:#fff;
padding:12px 25px;
border-radius:10px;
display:inline-block;
font-weight:600;
transition:0.3s;
}
.btn:hover{
background:#002f9e;
transform:translateY(-2px);
}
/* HERO */
.hero{
padding:70px 0;
background:linear-gradient(to right,#fdf7ef,#dff1ff);
}
.hero-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}
.hero-text{
flex:1;
}
.tag{
display:inline-block;
background:#fff3c8;
color:#0a2b8f;
padding:8px 16px;
border-radius:12px;
margin-bottom:20px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.hero-text h1{
font-size:75px;
line-height:1.1;
color:#091d5a;
margin-bottom:20px;
}
.hero-text h1 span{
color:#2152ff;
}
.hero-text p{
font-size:18px;
color:#555;
margin-bottom:35px;
line-height:1.8;
}
.hero-buttons{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.play-btn{
width:60px;
height:60px;
border-radius:50%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
color:#0d47d9;
font-size:20px;
}
.hero-image{
flex:1;
display:flex;
justify-content:center;
}
.hero-image img{
width:430px;
height:430px;
object-fit:cover;
border-radius:50%;
border:12px solid #4169ff;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
/* SECTION TITLE */
.section-title{
text-align:center;
margin-bottom:50px;
}
.section-title h2{
font-size:45px;
color:#091d5a;
margin-bottom:10px;
}
.section-title p{
color:#666;
max-width:700px;
margin:auto;
line-height:1.8;
}
/* ABOUT */
.about{
padding:90px 0;
background:#fff;
}
.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:50px;
}
.card{
background:#fff;
border-radius:20px;
padding:40px 20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:0.3s;
}
.card:hover{
transform:translateY(-8px);
}
.card i{
font-size:32px;
margin-bottom:18px;
color:#2152ff;
}
.card h3{
font-size:35px;
color:#091d5a;
}
.card p{
color:#666;
margin-top:8px;
}
/* SOCIAL */
.social{
padding-bottom:80px;
background:#fff;
}
.social-box{
background:#f4f6ff;
padding:45px 30px;
border-radius:25px;
text-align:center;
}
.social-box h3{
font-size:35px;
margin-bottom:10px;
color:#091d5a;
}
.social-box p{
color:#666;
margin-bottom:30px;
}
.social-icons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:25px;
}
.social-icons a{
width:70px;
height:70px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#fff;
transition:0.3s;
}
.social-icons a:hover{
transform:translateY(-8px);
}
.google{background:#ff3d00;}
.facebook{background:#1877f2;}
.instagram{background:#ff00a6;}
.youtube{background:red;}
.tiktok{background:#000;}
.snapchat{background:#ffd600;color:#000 !important;}
.pinterest{background:#d50000;}
/* GALLERY */
.gallery{
padding:90px 0;
background:#fff;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.gallery-card{
background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
transition:0.3s;
}
.gallery-card:hover{
transform:translateY(-8px);
}
.gallery-card img{
width:100%;
height:420px;
object-fit:cover;
}
.center-btn{
text-align:center;
margin-top:45px;
}
/* FOOTER */
footer{
background:#06237d;
color:#fff;
padding:70px 0 25px;
}
.footer-wrapper{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
margin-bottom:40px;
}
footer h3{
margin-bottom:20px;
font-size:28px;
}
footer p,
footer li,
footer a{
color:#d7defc;
line-height:2;
list-style:none;
}
footer ul{
padding:0;
}
.footer-social{
display:flex;
gap:15px;
margin-top:20px;
}
.footer-social a{
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,0.15);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
}
.copyright{
border-top:1px solid rgba(255,255,255,0.15);
padding-top:20px;
text-align:center;
color:#cfd8ff;
}
/* MOBILE */
@media(max-width:900px){
.hero-text h1{
font-size:55px;
}
.hero-wrapper{
flex-direction:column-reverse;
text-align:center;
}
.hero-buttons{
justify-content:center;
}
.nav-links{
display:none;
}
.hero-image img{
width:320px;
height:320px;
}
}
@media(max-width:500px){
.hero-text h1{
font-size:42px;
}
.section-title h2{
font-size:32px;
}
.logo{
font-size:24px;
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class="container nav-wrapper">
<div class="logo">It's Shakhawat</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#gallery">Gallery</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
<a href="#" class="btn">Let's Connect</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="container hero-wrapper">
<div class="hero-text">
<div class="tag">👋 Hello, I'm</div>
<h1>
Shakhawat <br>
<span>Murad</span>
</h1>
<p>
🌿 Feel free to contact me if you have any questions.
I'm happy to share more about my life journey. 🌿
</p>
<div class="hero-buttons">
<a href="#" class="btn">Let's Connect</a>
<a href="#" class="play-btn">
<i class="fa-solid fa-play"></i>
</a>
<span>Watch Intro</span>
</div>
</div>
<div class="hero-image">
<img src="your-photo.jpg" alt="Shakhawat">
</div>
</div>
</section>
<!-- ABOUT -->
<section class="about" id="about">
<div class="container">
<div class="section-title">
<h2>A little bit about me</h2>
<p>
I'm someone who loves to explore new places, meet new people and capture memories.
I believe in growth, gratitude and making every moment count.
</p>
</div>
<div class="stats">
<div class="card">
<i class="fa-regular fa-face-smile"></i>
<h3>50+</h3>
<p>Happy Clients</p>
</div>
<div class="card">
<i class="fa-solid fa-briefcase"></i>
<h3>5+</h3>
<p>Years Experience</p>
</div>
<div class="card">
<i class="fa-solid fa-earth-asia"></i>
<h3>10+</h3>
<p>Countries Visited</p>
</div>
<div class="card">
<i class="fa-solid fa-camera"></i>
<h3>1000+</h3>
<p>Memories Captured</p>
</div>
</div>
</div>
</section>
<!-- SOCIAL -->
<section class="social">
<div class="container">
<div class="social-box">
<h3>🤝 Let's Connect</h3>
<p>Find me on social platforms</p>
<div class="social-icons">
<a href="#" class="google">
<i class="fa-brands fa-google"></i>
</a>
<a href="#" class="pinterest">
<i class="fa-brands fa-pinterest-p"></i>
</a>
<a href="#" class="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="youtube">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#" class="tiktok">
<i class="fa-brands fa-tiktok"></i>
</a>
<a href="#" class="snapchat">
<i class="fa-brands fa-snapchat"></i>
</a>
</div>
</div>
</div>
</section>
<!-- GALLERY -->
<section class="gallery" id="gallery">
<div class="container">
<div class="section-title">
<h2>Some Highlights</h2>
<p>A glimpse of my journey</p>
</div>
<div class="gallery-grid">
<div class="gallery-card">
<img src="photo1.jpg" alt="Photo">
</div>
<div class="gallery-card">
<img src="photo2.jpg" alt="Photo">
</div>
<div class="gallery-card">
<img src="photo3.jpg" alt="Photo">
</div>
</div>
<div class="center-btn">
<a href="#" class="btn">📷 View More Photos</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-wrapper">
<div>
<h3>It's Shakhawat</h3>
<p>
Thanks for visiting my little corner of the internet.
Let's keep in touch and create something amazing together. 🌟
</p>
</div>
<div>
<h3>Quick Links</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div>
<h3>Get In Touch</h3>
<p><i class="fa-solid fa-envelope"></i> shakhawat@example.com</p>
<p><i class="fa-solid fa-phone"></i> +880 1234-567890</p>
<p><i class="fa-solid fa-location-dot"></i> Bangladesh</p>
<div class="footer-social">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-tiktok"></i></a>
</div>
</div>
</div>
<div class="copyright">
© 2024 Shakhawat Murad. All rights reserved.
</div>
</div>
</footer>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
14
Requests
4
Domains
359KB
Transfer Size
445KB
Content Size
191.0ms
Dom Content Loaded
396.0ms
First Paint
388.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...