Home
CSS
HTML

How to make responsive website section using html & css | CTA 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>cta section</title>
    </head>
    <body>
        <section class="cta">
            <div class="container">
                <div class="left">
                    <img src="src/model.png" alt="" class="img" />
                </div>
                <div class="right">
                    <h5 class="label">Our Collection</h5>
                    <h2 class="head_right">Your Fashion Journey Starts Here</h2>
                    <p class="body_right">
                        Step into a world where fashion is redefined. Our
                        digital platform is your ultimate destination for style
                        inspiration, trendspotting, and exclusive shopping
                        experiences. We curate the latest in fashion, offering
                        you a seamless blend of innovation and style.
                    </p>
                    <a href="#" class="btn_right"
                        >See Others
                        <img src="src/arrow.svg" alt="" class="btn_icon"
                    /></a>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

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

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

.cta{
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 96px 48px;
}

.container{
    border-radius: 24px;
    background-color: #f3f2f6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 36px 48px 0;
}

.left{
    max-height: 458px;
    flex: 1;
    display: flex;
    justify-content: center;
}

.img{
    max-height: 458px;
}

.right{
    flex: 1;
}

.label{
    color: #888b94;
    font-size: 16px;
    font-weight: 500;
}

.head_right{
    color: #000;
    font-size: 36px;
    font-weight: 700;
    margin: 12px 0 20px;
}

.body_right{
    color: #888b94;
    font-size: 18px;
}

.btn_right{
    text-decoration: none;
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    margin-top: 20px;
    transition: all 0.5s ease-in;
}

.btn_icon{
    margin-left: 5px;
    transition: all 0.2s ease-in;
}

.btn_right:hover .btn_icon{
    margin-left: 10px;
}

@media screen and (max-width:870px){
    .container{
        flex-direction: column-reverse;
        gap: 24px;
        padding: 48px 20px 0;
    }

    .cta{
        padding: 64px 24px;
    }

    .right{
        max-width: 580px;
    }
}
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