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.html and style.css.

2. HTML Structure

* Open index.html and add the basic HTML structure.

* Add a navbar, hero section, projects section, and contact section.

* Include a button for toggling dark mode.

Portfolio

Hello, I'm Norbert

A Passionate Web Developer

View Projects

My Projects

Project 1

Description of project 1.

Project 2

Description of project 2.

Project 3

Description of project 3.

Project 4

Description of project 4.

Project 5

Description of project 5.

Project 6

Description of project 6.

Contact Me

Email: yourname@example.com

3. Styling with CSS

* Open style.css and 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.

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.

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe