Hey, developer today is Day 63 of our 90Projects in 90Days. So on Day-63, we are going to Create an Elon Musk Tribute Page using HTML CSS.
To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.
Preview
Image Resources: Download Now
HTML Code
index.html
<!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">
<title> A Tribute Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-section">
<h1 class="title"> Elon Musk </h1>
</header>
<section class="main-image">
<img src="./musk.webp" />
<caption> Failure is an option!! </caption>
</section>
<section class="bio">
<h2 class="bio-heading">Biography</h2>
<p> Elon Musk, (born June 28, 1971, Pretoria, South Africa), South African-born American entrepreneur, business magnate and investor. He is the founder, CEO and chief engineer of SpaceX; angel investor, CEO and product architect of Tesla, Inc. and CEO of Twitter, Inc.; founder of The Boring Company; co-founder of Neuralink and OpenAI; and president of the philanthropic Musk Foundation.
<br>
With an estimated net worth of around $196 billion as of February 15, 2023, primarily from his ownership stakes in Tesla and SpaceX,[4][5] Musk is the second-wealthiest person in the world, according to both the Bloomberg Billionaires Index and Forbes's real-time billionaires list.
</p>
</section>
</body>
</html>
CSS Code
style.css
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
box-sizing: border-box;
}
body {
background-color: #e65b00;
}
.header-section {
padding: 30px;
text-align: center;
}
.title {
margin-bottom: 1rem;
color: #fff;
}
.main-image {
width: 100%;
padding: 10px;
text-align: center;
background: rgb(160, 169, 169);
}
.main-image img {
width: 90%;
display: block;
margin: 10px auto;
border-radius: 10px;
box-shadow: 0px 0px 26px #e65c0073;
}
.bio {
margin: 2rem auto;
padding: 0px 0.5rem;
width: 40rem;
}
.bio-heading {
margin-bottom: 1rem;
font-size: 3rem;
color: #fff;
}
.bio p {
font-size: 16px;
color: #dbd3d3;
line-height: 1.4rem;
}
Learn HTML- Learn Now
Learn CSS- Learn Now
Visit our 90Days, 90Projects Page- Visit Now
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
