Elon Musk Tribute Page using HTML CSS

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

Elon Musk Tribute Page using HTML CSS, elon musk tribute page, tribute page using html css, tribute page project, tribute page template html, tribute page website, build a tribute page


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

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad