Home
CSS
HTML

Responsive web design using HTML & CSS - service section - modern 2



        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>Service section</title>
    </head>
    <body>
        <section class="service">
            <h2 class="header_service">
                Aspernatur minus provident perspiciatis.
            </h2>
            <p class="header_body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Aspernatur minus provident perspiciatis
            </p>

            <div class="content_service">
                <div class="left">
                    <div class="img_container">
                        <img src="img/card.png" alt="" class="left_img" />
                    </div>
                </div>
                <div class="right">
                    <div class="right_item">
                        <div class="item_number">01</div>
                        <div class="item_body">
                            <h3 class="item_header">
                                Lorem ipsum dolor sit amet
                            </h3>
                            <p class="item_text">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna
                            </p>
                        </div>
                    </div>
                    <div class="right_item">
                        <div class="item_number">02</div>
                        <div class="item_body">
                            <h3 class="item_header">
                                Lorem ipsum dolor sit amet
                            </h3>
                            <p class="item_text">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna
                            </p>
                        </div>
                    </div>
                    <div class="right_item">
                        <div class="item_number">03</div>
                        <div class="item_body">
                            <h3 class="item_header">
                                Lorem ipsum dolor sit amet
                            </h3>
                            <p class="item_text">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna
                            </p>
                        </div>
                    </div>
                    <div class="right_item">
                        <div class="item_number">04</div>
                        <div class="item_body">
                            <h3 class="item_header">
                                Lorem ipsum dolor sit amet
                            </h3>
                            <p class="item_text">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

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

:root{
    --primary-color: #333;
    --secondary-color:#3b82f6;
}

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

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

.header_service{
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: var(--secondary-color);
    max-width: 960px;
    margin: 0 auto;
}

.header_body{
    text-align: center;
    color: var(--primary-color);
    max-width: 960px;
    font-weight: 500;
    margin: 8px auto 42px;
}

.content_service{
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: center;
}


.left{
    flex: 1;
}

.img_container{
    width: 100%;
}

.left_img{
    width: 100%;
    height: auto;
}

.right{
    flex: 1;
    display: grid;
    gap: 12px;
}

.right_item{
    padding: 18px 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}

.item_number{
    min-width: 36px;
    height: 36px;
    border-radius: 36px;
    line-height: 36px;
    text-align: center;
    background-color: var(--secondary-color);
    color: white;
    font-weight: 600;
}

.item_header{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.item_text{
    color: #666;
    font-size: 18px;
}

@media screen and (max-width:960px){
    .header_service{
        font-size: 28px;
    }

    .service{
        max-width: 1280px;
        padding: 64px 24px;
    }

    .content_service{
        flex-direction: column;
        gap: 18px;
    }

    .right{
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2,1fr);
    }

    .right_item{
        flex-direction: column;
    }
}

@media screen and (max-width:680px){
    .right{
        grid-template-columns: repeat(1,1fr);
    }

    .right_item{
        flex-direction: row;
    }
}

@media screen and (max-width:460px){
    .right_item{
        flex-direction: column;
    }
}
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