Hazel CV HTML CSS Project
Introducing The Project
Starting this project by using Images
Click Here.
Setting Up the Navbar
<!--HTML Code-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Hazel | CV</title>
</head>
<body>
<section class="hero">
<header class="navbar">
<nav class="links">
<a href="#">Blog</a>
<a href="#">Speaking Events</a>
</nav>
<p>Hazel</p>
<button>Contact Me</button>
</header>
</section>
</body>
</html>
/* CSS Code*/
body {
padding: 0;
margin: 0;
}
.hero {
height: 90vh;
background-color: #f08e80;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
padding: 24px 32px;
}
.navbar .links a {
color: white;
text-decoration: none;
margin-right: 16px;
font-size: 1.2rem;
}
.navbar p {
font-size: 2rem;
font-weight: bold;
}
Finishing the Navbar
<!-- HTML Code -->
<body>
<section class="hero">
<header class="navbar">
<nav class="links">
<a href="#">Blog</a>
<a href="#">Speaking Events</a>
</nav>
<p>Hazel</p>
<a class="contact" href="#contact">Contact Me</a>
</header>
</section>
</body>
/* CSS Code*/
.navbar .contact {
background-color: white;
color: #f08e80;
padding: 16px 24px;
text-decoration: none;
}
.navbar .contact:hover {
opacity: 0.8;
}ont-weight: bold;
}
Starting the Hero Content
<! HTML Code -->
<body>
<section class="hero">
<header class="navbar">
<nav class="links">
<a href="#">Blog</a>
<a href="#">Speaking Events</a>
</nav>
<p>Hazel</p>
<a class="contact" href="#contact">Contact Me</a>
</header>
<div class="hero-content">
<h1 class="tagline">
I’m a <em>Scientist</em> and <em>Speaker</em> who is interested in the psychology of greed.
</h1>
</div>
</section>
</body>
/* CSS CODE*/
.hero-content {
padding: 0 15%;
}
.tagline {
font-size: 4.5rem;
color: white;
letter-spacing: 2px;
padding: 32px 0;
}
Making the Skills Section
<!-- HTML Code -->
<div class="two-column-section">
<p>Specialties</p>
<ul class="skills">
<li>Public Speaking</li>
<li>Data Analysis</li>
<li>Strategic Planning</li>
<li>User Interviews</li>
<li>Writing & Editing</li>
<li>Analytics & Data</li>
<li>Front-End Dev</li>
<li>Programming</li>
</ul>
</div>
/* CSS Code */
.two-column-section {
font-size: 2rem;
}
.two-column-section p {
width: 50%;
box-sizing: border-box;
float: left;
}
.two-column-section .skills {
width: 50%;
float: left;
box-sizing: border-box;
padding: 0;
list-style: none;
}
.two-column-section .skills li {
width: 50%;
float: left;
font-size: 1.25rem;
margin: 8px 0;
}
Creating the Blog Section
<!-- HTML COde -->
<section class="blog-section">
<div class="blog-content">
<div class="two-column-section">
<p>Tech Blog</p>
<div class="blog-posts">
<p class="blog-heading">
This Is Your Brain On Helium
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">May 19, 2025</p>
<p class="blog-heading">
In Search Of Intelligence
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">June 12, 2025</p>
<p class="blog-heading">
Should Public Transit Be Free?
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">March 17, 2025</p>
</div>
</div>
</div>
</section>
/* CSS Code */
.blog-section {
background-color: white;
padding: 64px 0;
}
.blog-content {
padding: 0 15%;
}
.two-column-section .blog-posts {
width: 50%;
float: left;
}
.blog-title {
font-size: 1.5rem;
}
.blog-text {
font-size: 1rem;
}
.blog-posts {
margin-top: 24px;
}
.blog-posts .blog-date {
font-size: 0.9rem;
color: grey;
margin-bottom: 32px;
}
.blog-posts p {
margin: 8px 0;
}
Adding the Events Section
<!-- HTML COde -->
<section class="events-section">
<div class="events-content">
<div class="two-column-section">
<p>Speaking Events</p>
<div class="events-card">
<p class="event-title">NY Economics Forum</p>
<p class="event-location">New York, NY</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
<p class="event-title">Emerging Tech Meet-Up</p>
<p class="event-location">San Francisco, CA</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
<p class="event-title">Creative Code Meetup</p>
<p class="event-location">Denver, CO</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
</div>
</div>
</div>
</section>
/* CSS Code */
.events-section {
background-color: #fdf0e6;
padding: 64px 0;
display: inline-block;
width: 100%;
}
.events-content {
padding: 0 15%;
}
.events-card {
width: 50%;
float: left;
margin-top: 24px;
}
.events-card p {
margin: 8px 0;
}
.event-title {
font-size: 1.5rem;
}
.event-location {
font-size: 1rem;
}
.events-card .event-date {
font-size: 0.9rem;
color: grey;
margin-bottom: 32px;
}
Making A Simple Footer
<!-- HTML COde -->
<footer>
<div class="footer-content">
<img class="lazy lazy-hidden" decoding="async" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="images/instagram.png" alt=""><noscript><img decoding="async" src="images/instagram.png" alt=""></noscript>
<img class="lazy lazy-hidden" decoding="async" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="images/twitter.png" alt=""><noscript><img decoding="async" src="images/twitter.png" alt=""></noscript>
<p>Made With ❤️</p>
</div>
</footer>
/* CSS Code */
footer {
background-color: black;
color: white;
padding: 64px;
}
.footer-content {
text-align: center;
}
footer img {
width: 2rem;
height: 2rem;
margin: 0 8px;
}
Full Project
<!-- HTML COde -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Forum&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title>Hazel | CV</title>
</head>
<body>
<section class="hero">
<header class="navbar">
<nav class="links">
<a href="#">Blog</a>
<a href="#">Speaking Events</a>
</nav>
<p>Hazel</p>
<a class="contact" href="#contact">Contact Me</a>
</header>
<div class="hero-content">
<h1 class="tagline">
I’m a <em>Scientist</em> and <em>Speaker</em> who is interested in the psychology of greed.
</h1>
<div class="two-column-section">
<p>My Mission</p>
<p>This is my mission. Maecenas a varius odio egestas auctor. Praesent facilisis, ex a gravida
ultricies,
quam sed magna placerat eros, et vehicula lectus ligula id dui. Aliquam uto cursus velit ut eros
lorem
ipsum ullamcorper iaculis.</p>
</div>
<div class="two-column-section">
<p>Specialties</p>
<ul class="skills">
<li>Public Speaking</li>
<li>Data Analysis</li>
<li>Strategic Planning</li>
<li>User Interviews</li>
<li>Writing & Editing</li>
<li>Analytics & Data</li>
<li>Front-End Dev</li>
<li>Programming</li>
</ul>
</div>
</div>
</section>
<section class="blog-section">
<div class="blog-content">
<div class="two-column-section">
<p>Tech Blog</p>
<div class="blog-posts">
<p class="blog-heading">
This Is Your Brain On Helium
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">May 19, 2025</p>
<p class="blog-heading">
In Search Of Intelligence
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">June 12, 2025</p>
<p class="blog-heading">
Should Public Transit Be Free?
</p>
<p class="blog-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, voluptate mollitia voluptates
iure harum autem facere aut cum. Dolorem, molestias animi nisi esse quam quo optio! Quidem nobis
inventore voluptatum.
</p>
<p class="blog-date">March 17, 2025</p>
</div>
</div>
</div>
</section>
<section class="events-section">
<div class="events-content">
<div class="two-column-section">
<p>Speaking Events</p>
<div class="events-card">
<p class="event-title">NY Economics Forum</p>
<p class="event-location">New York, NY</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
<p class="event-title">Emerging Tech Meet-Up</p>
<p class="event-location">San Francisco, CA</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
<p class="event-title">Creative Code Meetup</p>
<p class="event-location">Denver, CO</p>
<p class="event-date">August 25th 2025, 7:00pm</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<img class="lazy lazy-hidden" decoding="async" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="images/instagram.png" alt=""><noscript><img decoding="async" src="images/instagram.png" alt=""></noscript>
<img class="lazy lazy-hidden" decoding="async" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="images/twitter.png" alt=""><noscript><img decoding="async" src="images/twitter.png" alt=""></noscript>
<p>Made With ❤️</p>
</div>
</footer>
</body>
</html>
/* CSS Code */
body {
padding: 0;
margin: 0;
font-family: "Forum", serif;
}
.hero {
min-height: 90vh;
background-color: #f08e80;
color: white;
display: inline-block;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
padding: 24px 32px;
box-sizing: border-box;
}
.navbar .links a {
color: white;
text-decoration: none;
margin-right: 16px;
font-size: 1.2rem;
}
.navbar p {
font-size: 2rem;
font-weight: bold;
margin: 0;
}
.navbar .contact {
background-color: white;
color: #f08e80;
padding: 16px 24px;
text-decoration: none;
}
.navbar .contact:hover {
opacity: 0.8;
}
.hero-content {
padding: 0 15%;
}
.tagline {
font-size: 4.5rem;
color: white;
letter-spacing: 2px;
padding: 32px 0;
}
.two-column-section {
font-size: 2rem;
}
.two-column-section > p {
width: 50%;
box-sizing: border-box;
float: left;
}
.two-column-section .skills {
width: 50%;
float: left;
box-sizing: border-box;
padding: 0;
list-style: none;
}
.two-column-section .skills li {
width: 50%;
float: left;
font-size: 1.25rem;
margin: 8px 0;
}
.blog-section {
background-color: white;
padding: 64px 0;
}
.blog-content {
padding: 0 15%;
}
.two-column-section .blog-posts {
width: 50%;
float: left;
}
.blog-heading {
font-size: 1.5rem;
}
.blog-text {
font-size: 1rem;
}
.blog-posts {
margin-top: 24px;
}
.blog-posts .blog-date {
font-size: 0.9rem;
color: grey;
margin-bottom: 32px;
}
.blog-posts p {
margin: 8px 0;
}
.events-section {
background-color: #fdf0e6;
padding: 64px 0;
display: inline-block;
width: 100%;
}
.events-content {
padding: 0 15%;
}
.events-card {
width: 50%;
float: left;
margin-top: 24px;
}
.events-card p {
margin: 8px 0;
}
.event-title {
font-size: 1.5rem;
}
.event-location {
font-size: 1rem;
}
.events-card .event-date {
font-size: 0.9rem;
color: grey;
margin-bottom: 32px;
}
footer {
background-color: black;
color: white;
padding: 64px;
}
.footer-content {
text-align: center;
}
footer img {
width: 2rem;
height: 2rem;
margin: 0 8px;
}
Final Look
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
BSCS 1st Semester Notes
15/07/2024
CSS Grid vs. Flexbox: When to Use Each
04/07/2025
How Web3 is Transforming Web Development
02/04/2025
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
More Posts
- 12th AKUEB Handwritten Notes
- 40+ Agency WordPress Template Kits FREE
- 50+ WordPress Template kits Free
- AI is Taking Over Web Design: Will Coders Lose Their Jobs?
- AKUEB 12th Notes
- All BS Department 1st Semester Past-papers
- Artificial Intelligence
- Artist Portfolio HTML CSS Project
- Assembly language Handwritten Notes
- BSCS 1st Semester Notes
- BSCS 2nd Semester Notes
- BSCS 3rd Semester Notes
- BSCS 4th Semester Notes
- BSCS 5th Semester Notes
- BSCS 6th Semester Notes
- BSCS 7th Semester Notes
- BSCS 8th Semester Notes
- Build a Full-Stack App with MERN Stack Pt 1
- Build a Full-Stack App with MERN Stack Pt 2
- Class 10th AKUEB Notes Biology, Physics & Chemistry
- CSS Basics
- CSS Grid vs. Flexbox: When to Use Each
- CSS Selectors
- Dark Mode in Web Development: Best Practices & Implementation
- Data Mining
- Data Structure & Algorithms Notes
- Database Management System Handwritten Notes
- Design and Analysis of Algorithms
- Distributed Database System
- DSA Handwritten Notes
- Hazel CV HTML CSS Project
- How to Build Your First Website from Scratch
- How to Deploy a Website Using GitHub Pages
- How to Use Tailwind CSS for Faster and Cleaner UI Development
- How Web3 is Transforming Web Development
- HTML CSS Landing Page
- HTML Forms
- HTML, CSS, and JS: A Beginner’s Guide to Web Development
- Introduction to HTML
- JavaScript ES6: Features Every Developer Should Know
- More HTML
- No-Code Vs. Traditional Coding: Which is the Future?
- Numerical Computing Handwritten Notes
- Random Color Generator Project
- Specificity and The Cascade
- Styling Text in CSS
- The Box Model
- The Evolution of JavaScript Frameworks: From jQuery to Next.js
- The World of CSS Colors
- Theory of Automata
- Top 10 JavaScript Libraries to Speed Up Development
- Understanding HTTP Status Codes and What They Mean
- Web Design Services Pakistan – Building Digital Brands That Inspire Confidence
- Web Design Trends for 2025: Improve User Experience
- What Is an API? A Simple Guide for Beginners
- Why Businesses Choose WordPress Website Design Pakistan for Online Success
- Wireless Communication Handwritten Notes
