Home
CSS
HTML

How to make responsive website section using html & css | gallery 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>Gallery section</title>
    </head>
    <body>
        <section class="gallery">
            <div class="head_container">
                <div class="left">
                    <h3 class="head_text">
                        Let’s checkout your <span>image</span> journey
                    </h3>
                    <p class="body_text">
                        Lorem ipsum dolor sit amet. Sed perspiciatis architecto
                        et voluptatibus itaque est earum nisi aut galisum quam.
                    </p>
                </div>
                <button class="btn btn_top">See Other Image</button>
            </div>
            <div class="photo_container">
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
                <div class="photo_box">
                    <img src="src/beach.jpg" alt="" class="img">
                </div>
            </div>
            <button class="btn btn_bottom">See Other Image</button>
        </section>
    </body>
</html>

CSS

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

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

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

.head_container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 48px;
}

.head_text{
    color: #1a1919;
    font-size: 36px;
    font-weight: 700px;
    margin-bottom: 18px;
    max-width: 370px;
}

.head_text span{
    color: #00d1ff;
}

.body_text{
    color: #333;
    font-size: 18px;
    font-weight: 500;
    max-width: 580px;
}

.btn{
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    background: #00d1ff;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s ease;
}

.btn:hover{
    background: #00728c;
}

.photo_container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
}

.photo_box{
    aspect-ratio: 3/4;
}

.img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease-in;
}

.img:hover{
    transform: scale(1.05);
}

.btn_bottom{
    display: none;
    justify-content: center;
    margin: 48px auto 0;
}

@media screen and (max-width:840px){
    .gallery{
        padding: 64px 24px;
    }

    .photo_container{
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }

    .btn_top{
        display: none;
    }

    .btn_bottom{
        display: flex;
    }
}

@media screen and (max-width:480px){
    .gallery{
        padding: 48px 20px;
    }

    .photo_container{
        grid-template-columns: repeat(1,1fr);
    }
    .left{
        text-align: center;
    }

    .head_text{
        margin: 0 auto;
    }

    .body_text{
        margin: 18px auto 0;
    }
}
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