Create a Gallery In HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
    body{
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
    }

    *{
        box-sizing: border-box;
    }

    h1{
        font-size: 50px;
        letter-spacing: 3px;
        text-align: center;
        margin: 40px;
    }

    .gallery{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 20px;
    }
    .gallery .elements{
        display: flex;
        flex-direction: column;
        width: 32.5%;
    }

    .elements img{
        width: 100%;
        padding-bottom: 20px;
    }

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

        .gallery{
            flex-direction: column;
        }

        .gallery .elements{
            width: 100%;
        }
        
    }
</style>
<body>
    <h1>Image <b>Galley</b></h1>
    <div class="gallery">
        <div class="elements">
            <img src="assets/bg-1.jpeg">
            <img src="assets/bg-2.jpeg">
            <img src="assets/bg-3.jpeg">
            <img src="assets/bg-4.jpg">
        </div>
        <div class="elements">
            <img src="assets/bg-5.jpg">
            <img src="assets/bg-6.jpeg">
            <img src="assets/bg-7.jpeg">
            <img src="assets/bg-8.jpeg">
        </div>
        <div class="elements">
            <img src="assets/bg-9.jpeg">
            <img src="assets/bg-10.webp">
            <img src="assets/bg-11.jpeg">
            <img src="assets/bg-12.jpeg">
        </div>
    </div>
</body>
</html>

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM