Untitled

avatar
unknown
plain_text
9 months ago
5.1 kB
7
Indexable
* {
    margin: 0px;
    padding: 0px;
    
}

.dark-01 {
    color: #131313;
}

.dark-02 {
    color: #424242;
}

.dark-03 {
    color: #424242;
}

header {
    background: rgba(255, 144, 14, 0.10);
}

/*Navbar started here*/

.title {
    color: var(--Dark-01, #131313);
    text-align: center;
    font-family: "Work Sans";
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    margin: 0px 80px;
    padding-top: 43px;
    padding-bottom: 63px;
}

.nav-items {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 50px;

    text-align: center;
    font-family: "Work Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

/* banner section started here */

.banner-section{
    margin: 0px 300px;
}

.para {
    color: var(--Dark-03, #727272);
    text-align: center;
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.banner-section h1{
    margin-bottom:  10px;
}

.banner-section p{
    margin-bottom: 23px;
}

.banner-section button{
    margin-bottom: 50px;
}

.btn-primary {
    color: #FFF;

    text-align: center;
    font-family: "Work Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 8px;
    background: #FF900E;

    border: none;
    padding: 20px 24px;
}

.banner-button{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.banner-section img {
    margin: 0 auto;
    width: 100%;
}



@media screen and (max-width:576px) {

    .title {
        color: var(--Dark-01, #131313);
        text-align: center;
        font-family: "Work Sans";
        font-size: 45px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        margin: 0px 240px;
        margin-top: 63px;

        margin: 0px;
        flex-direction: column;
        overflow: hidden;
        padding: 25px;
    }

    /* .navbar h1{
        margin: 25px auto;
    } */

    .nav-items {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 50px;
        text-align: center;
        font-family: "Work Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;

    }


    /* banner section started here */

.banner-section{
    margin: 0px 300px;
    margin: 0px;
    padding: 0px 20px;
    overflow: hidden;
}

.para {
    color: var(--Dark-03, #727272);
    text-align: center;
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.banner-section h1{
    margin-bottom:  10px;
}

.banner-section p{
    margin-bottom: 23px;
}

.banner-section button{
    margin-bottom: 50px;
}

.btn-primary {
    color: #FFF;

    text-align: center;
    font-family: "Work Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 8px;
    background: #FF900E;

    border: none;
    padding: 20px 24px;
}

.banner-button{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}


}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>

        <div class="navbar">

            <div>
                <h1 class="title dark-01">G3 Architects</h1>
            </div>

            <div class="nav-items dark-02">
                <ul>Home</ul>
                <ul>About</ul>
                <ul>Contact Us</ul>
                <ul>Login</ul>
            </div>

        </div>


        <div class="banner-section">
            <h1 class="title dark-01">Brand New <br>
                Group of Architects
            </h1>
            <p class="para">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
                in <br> some form, by injected humour, or randomised words which don't look even</p>
            <div class="banner-button">
                <button class="btn-primary">Explore More</button>
            </div>

            <div class="banner-img">
                <img src="images/banner.png" alt="">
            </div>
        </div>

    </header>
    <main></main>
    <footer></footer>
</body>

</html>
Editor is loading...
Leave a Comment