Agency Landing Page Design using HTML and CSS

Hey, developers welcome to Day 28 of our 90Days 90Projects challenge. And in Day 28 we are going to create a Responsive Agency Landing Page Design using HTML and CSS

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

Agency Landing Page Design using HTML and CSS, agency landing page design, digital agency landing page, seo agency landing page design, marketing agency landing page example


Image Resource - 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> Agency Landing Page </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <h2> Navbar Goes Here </h2>
    </nav>
    <section id="home">
        <div class="leftHome">
            <h3> Digital media agency </h3>
            <h2> We Boost Your Website Traffic </h2>
            <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quasi assumenda alias neque
                facilis. Eos voluptas perspiciatis unde repellendus, soluta cumque eveniet sunt quod voluptate eius
                debitis quae incidunt placeat dolore rem sit? Recusandae!</p>
            <button class="btn"> free quote </button>
        </div>
        <img class="rightHome" src="image.png" alt="">
    </section>
</body>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
}

.navbar {
    line-height: 5rem;
    text-align: center;
    background-color: rgb(22, 7, 36);
}

.left h1 {
    font-size: 2.5rem;
    cursor: pointer;
}

#home {
    width: 80%;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.leftHome {
    width: 500px;
}

.leftHome h3 {
    color: #de2639;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.leftHome h2 {
    color: rgb(26, 25, 25);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.desc {
    margin-bottom: 1rem;
    color: rgb(106, 102, 102);
}

.rightHome {
    width: 50%;
    margin: 1rem;
    position: relative;
}

.btn {
    cursor: pointer;
    color: #de2639;
    font-weight: bold;
    border-radius: 3rem;
    padding: .7rem 1.5rem;
    text-transform: uppercase;
    border: 1.5px solid #de2639;
    background-color: transparent;
}

@media screen and (max-width:810px) {
    #home {
        flex-direction: column-reverse;
    }

    .rightHome {
        width: 90%;
    }

    .leftHome {
        margin: 0;
        width: 100%;
    }

    .leftHome h3 {
        font-size: 1rem;
    }

    .leftHome h2 {
        font-size: 2rem;
    }

    .btn {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
}

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