Description
Learn how to create a beautiful and responsive portfolio landing page with a dark mode toggle feature. Follow this step-by-step guide to enhance your web development skills and showcase your projects in style.
Step-by-Step Guide
1. Setup Your Project
Create a new folder for your project.
Inside the folder, create two files:
index.htmlandstyle.css.
2. HTML Structure
Open
index.htmland add the basic HTML structure.Add a navbar, hero section, projects section, and contact section.
Include a button for toggling dark mode.
<!-- filepath: c:\Users\Norbert\Desktop\Web Dev\youtube-web-dev-2025-repo\ideas\03\16-03-landingpage\regular\index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<h1>My Portfolio</h1>
<button id="theme-toggle" class="theme-toggle">🌙</button>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h2>Hello, I'm <span class="highlight">Norbert</span></h2>
<p>A Passionate Web Developer</p>
<a href="#projects" class="btn">View Projects</a>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<div class="container">
<h3>My Projects</h3>
<div class="projects-grid">
<div class="project-card">
<h4>Project 1</h4>
<p>Description of project 1.</p>
</div>
<div class="project-card">
<h4>Project 2</h4>
<p>Description of project 2.</p>
</div>
<div class="project-card">
<h4>Project 3</h4>
<p>Description of project 3.</p>
</div>
<div class="project-card">
<h4>Project 4</h4>
<p>Description of project 4.</p>
</div>
<div class="project-card">
<h4>Project 5</h4>
<p>Description of project 5.</p>
</div>
<div class="project-card">
<h4>Project 6</h4>
<p>Description of project 6.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact">
<h3>Contact Me</h3>
<p>Email: yourname@example.com</p>
</section>
<script>
// Dark Mode Toggle
const toggle = document.getElementById("theme-toggle");
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html>
3. Styling with CSS
Open
style.cssand add general styles for the body and container.Style the navbar, hero section, projects section, and contact section.
Add styles for dark mode.
/* filepath: c:\Users\Norbert\Desktop\Web Dev\youtube-web-dev-2025-repo\ideas\03\16-03-landingpage\regular\style.css */
/* General Styles */
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
background-color: #f8fafc;
color: #1e293b;
transition: background-color 0.3s, color 0.3s;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
}
/* Navbar */
.navbar {
background: #ffffff;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 8px;
position: sticky;
top: 0;
/* z-index: 1000; */
}
.theme-toggle {
background: #e2e8f0;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #cbd5e1;
}
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
background: #1e3a8a;
color: white;
border-radius: 12px;
height: 200px;
}
.highlight {
color: #facc15;
font-weight: bold;
}
.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
background: #facc15;
color: #1e3a8a;
font-weight: bold;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #eab308;
}
}
}
/* Projects Section */
.projects {
padding: 60px 20px;
background: #f1f5f9;
text-align: center;
border-radius: 12px;
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
}
.project-card {
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
&:hover {
transform: translateY(-5px);
}
}
}
/* Contact Section */
.contact {
text-align: center;
padding: 50px 20px;
}
/* Dark Mode */
.dark-mode {
background-color: #1e293b;
color: #f8fafc;
.navbar {
background: #334155;
}
.theme-toggle {
background: #475569;
color: white;
&:hover {
background: #64748b;
}
}
.projects {
background: #475569;
}
.project-card {
background: #334155;
color: white;
}
}
4. Dark Mode Toggle
In
index.html, add a script to toggle dark mode when the button is clicked.
<script>
// Dark Mode Toggle
const toggle = document.getElementById("theme-toggle");
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
</script>
5. Enhancements
Add transitions for smooth color changes.
Use CSS Grid for a responsive projects section.
Add hover effects for buttons and project cards.
By following these steps, you'll create a visually appealing portfolio landing page with a modern dark mode feature. This project will not only enhance your web development skills but also provide a professional platform to showcase your work.
Share this post