Edit Content
Icon Ahmadwebx

Linktree

info@ahmadwebx.com
Facebook Twitter Youtube Linkedin
© Ahmadwebx . 2025.

Hazel CV HTML CSS Project

Hazel CV 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

CV image 4
CV image 3
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Interesting Posts

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

- Fazal Rehman Tweet
Read more about poetries

Ahmad Shafi Poetry

Read More

More Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Ahmadwebx Logo Green
Facebook Twitter Instagram Linkedin Pinterest Behance