Home
CSS
HTML

How to make responsive website section using html & css | hero section | 1


    
        Hello guys. Welcome to my notes. If you want to see the steps making this tutorial, you can directly watch the video below.  and If you want the code from the tutorial, just scroll down.


HTML

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Hero section</title>
    </head>
    <body>
        <section class="hero">
            <div class="container">
                <h1 class="hero_head">
                    Empowering Your Journey Leading the Digital Revolution
                </h1>
                <p class="hero_text">
                    We're at the forefront of the digital revolution, connecting
                    businesses, empowering growth, and leading the way in an
                    ever-changing world. With our solutions, your journey to
                    success begins here.
                </p>
                <div class="button_container">
                    <button class="btn btn_primary">Get Started</button>
                    <button class="btn btn_secondary">Start a demo</button>
                </div>
            </div>
        </section>
    </body>
</html>
>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Michroma&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.hero{
    background-image: url(src/wave.svg);
    background-position: center;
    background-size: cover;
}

.container{
    max-width: 1280px;
    width: 100%;
    min-height: 100vh;
    padding: 0 48px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero_head{
    color: #14192b;
    font-size: 68px;
    font-weight: 600;
}

.hero_text{
    color: #888b94;
    font-size: 24px;
    line-height: 36px;
    margin: 24px 0 36px;
    max-width: 760px;
}

.button_container{
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.btn {
    padding: 22px 44px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    color: white;
}

.btn_primary{
    background: #0144e4;
    transform: translateY(0);
    transition: transform 0.2s ease-in;

}

.btn_secondary{
    border: 1px solid #888b94;
    transform: translateY(0);
    transition: transform 0.2s ease-in;
    color: #14192b;
}

.btn_primary:hover{
    transform: translateY(-5px);
}

.btn_secondary:hover{
    color: #0144e4;
    transform: translateY(-5px);
    border: 1px solid #0144e4;
}

@media screen and (max-width:760px){
    .container{
        padding: 0 20px;
    }
    .hero_head{
        font-size: 42px;
    }

    .hero-text{
        font-size: 18px;
    }
}

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

    .btn{
        padding: 18px 36px;
    }
}
or you can get full code in by clicking button bellow :

Download Code

Buy Me A Coffee

Thank You for coming to my notes, if you wanna see another tutorial , you can check to my notes or you can subscribe to my Youtube channel , where I post new tips&tricks and tutorials about HTML, CSS and Javascript. See You !!!

Post a Comment