A single-page CV is developed for the legendary tech entrepreneur Elon Musk.
A brief note on CSS (Cascading Style Sheets) Units
Two types in general;
Relative: EM, REM, VH, VW, % and more
Absolute: PX, PT, CM, IN, MM
Pixels: CSS Pixels are not the same as physical pixels on the screen. In General, avoid for font sizes, and use px for small details like borders and shadows.
Percentage unit: Is relative to its parent. Useful for defining layouts and widths.
REM – Root EMS relative to the root HTML element's font size (i.e. browser's default settings).
Eg. If the root font size is 20px, 1rem = 20px, 2rem = 40px, etc.
EM – EMs are relative to parent size.
For eg. With font size, 1 em = font size of the parent, 2 em = twice, etc, while with other properties, 1 em equals the computed font size of the element itself.
REM/Em are good choice for font sizes and padding or margin.
Vh & Vw – Take about viewport height and width. Generally used for larger layouts and concerns.
Float is used for getting text around an image.
The WebPage Snapshot
The Code
/* Below is the 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>Elon Musk | CV</title>
</head>
<body>
<section class="hero">
<header class="navbar">
<nav class="links">
<a href="#">Blog</a>
<a href="#">Tech Events</a>
</nav>
<p>Elon Musk</p>
<a class="contact" href="#contact">Contact Me</a>
</header>
<div class="hero-content">
<h1 class="tagline">
I’m a <em>Engineer</em> and <em>Technologist</em> who is interested in the science of spacecraft and car.
</h1>
<div class="two-column-section">
<p class="section-heading">My Mission</p>
<p>Aiming to reduce global warming through sustainable energy production and consumption, and reducing
the "risk of human extinction" by "making life multiplanetary" and setting up a human colony on Mars </p>
</div>
<div class="two-column-section">
<p class="section-heading">Specialties</p>
<ul class="skills">
<li>Micromanaging</li>
<li>Goal Oriented</li>
<li>Future Focused</li>
<li>Resiliency</li>
<li>Leadership</li>
<li>Creativity</li>
<li>Time Management</li>
<li>Great Communicator</li>
</ul>
</div>
</div>
</section>
<section class="blog-section">
<div class="blog-content">
<div class="two-column-section">
<p class="section-heading">Tech Blog</p>
<div class="blog-posts">
<p class="blog-heading">
From Student to Entrepreneur
</p>
<p class="blog-text">
After Pennsylvania, Musk began his Ph.D. in applied physics and material sciences at Stanford.
But the experience didn’t last long, because he dropped out two days after to launch his entrepreneurial career.
</p>
<p class="blog-date">May 19, 2025</p>
<p class="blog-heading">
Musk: The CEO of Paypal
</p>
<p class="blog-text">
In 1999, Elon Musk used the 22 million from Zip2 to co-found an online banking company, X.com. A year later, X.com merged with Confinity, the company behind PayPal.
Elon became CEO of Paypal as well as the largest single shareholder of the organization with 11.5% of all shares.
</p>
<p class="blog-date">June 12, 2025</p>
<p class="blog-heading">
Internet Genius Turned Rocketman
</p>
<p class="blog-text">
How he was treated at Paypal set Musk on a different path. His motivation for success changed. What
would inspire him from now on was doing purposeful work that had a positive change in the world. He wanted to wake up in the morning and be glad to be a part of humanity.
</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 class="section-heading">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 src="images/instagram.png" alt="">
<img src="images/twitter.png" alt="">
<p>Made With ❤️</p>
</div>
</footer>
</body>
</html>
/* Below is the 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;
}
@media only screen and (max-width: 1000px) {
.hero-content,
.blog-content,
.events-content {
padding: 0 5%;
}
}
@media only screen and (max-width: 750px) {
.tagline {
font-size: 3.5rem;
}
.two-column-section > p {
width: 100%;
}
.two-column-section .skills {
width: 100%;
}
.two-column-section .blog-posts {
width: 100%;
}
.section-heading {
font-weight: bold;
font-size: 2.5rem;
margin-bottom: 0;
}
}
@media only screen and (max-width: 500px) {
.tagline {
font-size: 3rem;
margin: 0;
}
.links {
display: none;
}
}
*Don't forget to add an image file in "img src" in the footer content.
The End.
Similar Projects: