Code Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Editor Portfolio</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #f9f9f9; color: #333; }
header {
background: #111;
color: #fff;
padding: 15px 20px;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 { font-size: 22px; }
nav { display: none; flex-direction: column; background: #111; position: absolute; top: 60px; right: 20px; }
nav a {
padding: 10px 20px;
color: #fff;
text-decoration: none;
border-top: 1px solid #333;
}
nav a:hover { background: #333; }
.menu-btn {
background: #444;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
}
main section {
padding: 60px 20px;
max-width: 1000px;
margin: auto;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
visibility: hidden;
}
section.visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
section h2 {
font-size: 32px;
margin-bottom: 20px;
color: #222;
}
section p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
section img {
max-width: 100%;
border-radius: 8px;
margin-top: 20px;
}
footer {
background:#222;
color:#fff;
padding:40px 20px;
}
footer h3 {
margin-bottom: 15px;
}
footer ul {
list-style:none;
padding:0;
}
footer ul li {
margin: 6px 0;
}
footer a {
color:#fff;
text-decoration:none;
}
footer a:hover {
text-decoration: underline;
}
.footer-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap:20px;
max-width:1000px;
margin:auto;
}
.footer-bottom {
text-align:center;
margin-top:30px;
font-size:14px;
}
@media (min-width: 768px) {
nav {
display: flex !important;
flex-direction: row;
position: static;
background: none;
}
nav a {
border: none;
padding: 10px 15px;
}
.menu-btn { display: none; }
}
</style>
</head>
<body>
<header>
<h1>My Portfolio</h1>
<button class="menu-btn">☰</button>
<nav id="navMenu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>I’m a passionate video editor turning ideas into stunning visuals. Let’s create something amazing together!</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEMP41sCCuj_eiSQTcWPbQ2GopNIiLdWqzTvcMauSWHd88X-9x4Pq8Srgt&s=10" alt="Video Editing" />
</section>
<section id="about">
<h2>About Me</h2>
<p>I specialize in cinematic cuts, color grading, motion graphics, and story-driven edits. With over 5 years of experience, I’ve worked with clients across the globe.</p>
<img src="https://images.unsplash.com/photo-1559526324-593bc073d938" alt="About Me" />
</section>
<section id="projects">
<h2>Projects</h2>
<p>From YouTube content to branded ads, I’ve edited 200+ videos with millions of views. Here are some of my best projects.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTemdtIh7K8wHU-Ak-GlGc44etqJTvkAmEE3AuTYeTKfPIIdSHiPrU6VbY&s=10" alt="Projects" />
</section>
<section id="services">
<h2>Services</h2>
<p>I offer video editing, sound design, intro/outro creation, and short-form reels. I ensure fast delivery and high-quality output.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBT2DHz6VMAeMrxW0HgXtaYM9voSTOt49Hq2jPGWzCFlH8I9eZ33uo2tA&s=10" alt="Services" />
</section>
<section id="contact">
<h2>Contact</h2>
<p>Let’s connect! I’m open for freelance projects, collaborations, or full-time opportunities. Message me anytime!</p>
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61" alt="Contact" />
</section>
</main>
<footer>
<div class="footer-grid">
<div>
<h3>About Me</h3>
<p>I’m a creative video editor helping creators and brands bring stories to life. Let’s collaborate!</p>
</div>
<div>
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div>
<h3>Contact</h3>
<p>Email: your@email.com</p>
<p>Phone: +92 300 0000000</p>
<p><a href="https://wa.me/923000000000">WhatsApp Me</a></p>
</div>
</div>
<div class="footer-bottom">
© 2025 Your Name. All rights reserved.
</div>
</footer>
<script>
const menuBtn = document.querySelector(".menu-btn");
const navMenu = document.getElementById("navMenu");
menuBtn.onclick = () => {
navMenu.style.display = navMenu.style.display === "flex" ? "none" : "flex";
};
document.addEventListener("click", function (e) {
if (!navMenu.contains(e.target) && !menuBtn.contains(e.target)) {
navMenu.style.display = "none";
}
});
const sections = document.querySelectorAll("main section");
function showSectionsOnScroll() {
const trigger = window.innerHeight / 1.3;
sections.forEach(section => {
const top = section.getBoundingClientRect().top;
if (top < trigger) section.classList.add("visible");
});
}
window.addEventListener("scroll", showSectionsOnScroll);
window.addEventListener("load", showSectionsOnScroll);
</script>
</body>
</html>