Welcome to CSS Project 6 - Responsive Flexbox Landing Page

This project will guide you through creating a responsive landing page using HTML and CSS Flexbox. It's designed for beginners with basic knowledge of HTML and CSS.

Hardware Setup

Ensure you have the following hardware components:

A computer with internet access.
A keyboard and mouse for typing and navigation.

Software Requirements

Here are the software tools you'll need for this project:

Any code editor (e.g., Visual Studio Code, Sublime Text).
A web browser (e.g., Chrome, Firefox).

Knowledge Prerequisites

To successfully complete this project, you should be familiar with the following concepts:

Basic understanding of HTML and CSS.

Difficulty Rating

Easy Difficulty

Project Time!!!

“The best way to predict the future is to create it.” - Peter Drucker

Project Steps:

Done

Download and install Visual Studio Code or your preferred code editor.
Open your code editor and create a new folder for your project.
Inside the folder, create a new file named index.html and another file named styles.css.

Done

Open index.html and add the following basic HTML structure:





    
    
    Responsive Landing Page
    


    
        
            MySite
            
                Home
                About
                Services
                Contact
            
            
                
                
                
            
        
        
            Welcome to MySite
            Your description goes here.
            Get Started

Done

Open styles.css and add the following CSS to style your landing page:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.header {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg') no-repeat center center/cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background: rgba(0, 0, 0, 0.7);
}

.logo {
    font-size: 1.5em;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 1em;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
}

.header-content {
    text-align: center;
    margin: auto;
}

.header-content h1 {
    font-size: 3em;
}

.header-content p {
    font-size: 1.2em;
}

.cta-button {
    background-color: #28a745;
    color: #fff;
    padding: 0.75em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1em;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #218838;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    
    .burger {
        display: block;
    }
}

Save the file and open index.html in your web browser to see your styled landing page.

Done

Create a new file named script.js and add the following JavaScript to make the navigation menu responsive:


const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');

burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
});

Add the following CSS rule to styles.css to enable the toggling effect:


.nav-active {
    display: flex;
}

Welcome to CSS Project 6 - Responsive Flexbox Landing Page

Hardware Setup

Software Requirements

Knowledge Prerequisites

Difficulty Rating

Easy Difficulty

Project Time!!!

Project Steps:

Congratulations! You've created a responsive landing page using HTML, CSS Flexbox, and JavaScript. Now you're ready to tackle more complex projects.