In this project, we’ll create a responsive website that utilizes Flexbox for layout management and demonstrates the use of absolute and relative positioning for specific elements. This project will help you understand how these CSS properties work together to create a flexible and adaptable design.
Project Overview
We’ll build a multi-section website with the following components:
- Header: Contains the site’s logo and navigation.
- Hero Section: A large banner with a background image and text, with elements positioned using relative and absolute positioning.
- Features Section: A section showcasing different features in a flexbox layout.
- Testimonials Section: A section with testimonials, also using a flexbox layout.
- Footer: A footer with links and social media icons.
Step 1: Setting Up the Project Structure
First, create a folder for your project and inside it, create the following files:
index.html: The main HTML file.styles.css: The CSS file for styling the website.images/: A folder to store images (if needed).
Your project structure should look like this:
/project-folder
/images
index.html
styles.css
Step 2: Writing the HTML
Start by writing the basic HTML structure in index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Brief introduction about yourself.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="project-container">
<div class="project-card">
<h3>Project 1</h3>
<p>Description of project 1.</p>
</div>
<div class="project-card">
<h3>Project 2</h3>
<p>Description of project 2.</p>
</div>
<!-- Add more projects as needed -->
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>© 2023 My Portfolio</p>
</footer>
</body>
</html>Step 3: Styling with CSS
Now, let’s add the CSS in styles.css to style the website, including the use of Flexbox, absolute, and relative positioning.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
position: relative;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px;
}
#about {
background: #f4f4f4;
text-align: center;
}
#projects {
background: #e2e2e2;
}
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.project-card {
background: #fff;
border: 1px solid #ccc;
margin: 10px;
padding: 15px;
width: 30%;
position: relative; /* For positioning */
}
#contact {
background: #f9f9f9;
}
form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: auto;
}
form input, form textarea {
margin: 10px 0;
padding: 10px;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
/* Responsive Styles */
@media (max-width: 768px) {
.project-card {
width: 100%;
}
}
@media (max-width: 480px) {
nav ul {
flex-direction: column;
}
}HTML Structure
Header:
- The header includes a logo and a navigation menu. The navigation links are placed inside an unordered list for easy styling.
- The header is styled with
floatto position the logo on the left and the navigation on the right.
Hero Section:
- This section spans the full width of the screen and has a background image.
- The text is centered using Flexbox with
justify-contentandalign-items. - A semi-transparent background is applied to the text for better readability.
Main Content Area:
- The main content area is divided into a multi-column layout using Flexbox.
- The sidebar is positioned absolutely within the relative container, allowing it to stay fixed on the side of the main content.
Footer:
- The footer includes a copyright notice and social media links, which are centered.
CSS Styling
Basic Reset and Font Settings:
- The default margins and paddings are reset for consistency.
- The default font is set to a clean, sans-serif font.
Container Class:
- This class is used to center content and set a maximum width, ensuring the content doesn’t stretch too wide.
Header Styling:
- The header has a dark background with white text. The logo is floated to the left, and the navigation menu is floated to the right.
- A clearfix (
::afterwithcontent: "") is used to clear the floats.
Hero Section:
- The hero section is styled with a background image that covers the entire section. Flexbox is used to center the text both vertically and horizontally.
- A semi-transparent overlay is applied to the text background for better contrast.
Main Content and Sidebar:
- The main content area is a flex container, with the main content taking up more space than the sidebar.
- The sidebar is positioned absolutely, but it stays within the bounds of the relative container.
Footer Styling:
- The footer has a dark background and centered content. Social media links are spaced evenly.
Responsive Design:
- Media queries are used to adjust the layout for smaller screens. The header becomes stacked vertically, and the sidebar becomes relative and spans the full width.
This project demonstrates how to use Flexbox for creating flexible layouts and how to apply absolute and relative positioning for precise placement of elements. The responsive design adjustments ensure that the site looks good on both large and small screens.
By practicing with these techniques, you’ll gain a better understanding of how to structure and style websites to be both visually appealing and functional across a range of devices.
