Skip to main content
⏱ 0:00est. 7 min

Index

<html>
    <style>
        body {
                display:flex;
                flex-flow:row wrap;
                margin:0;
                height:100vh;
            }
            /* body:after 
            actually your code gives a container for this */
            .clearfix {
                /*content:'';
                display:block;*/
                width:100%;
                order:1;
            }
            .responsive {
                border:solid;
                margin:0;
                height: 200px;
                width: 200px;
            }
            .responsive:nth-child(1) {
                margin-bottom:auto;
                margin-right:auto;
                order:0;
            }
            .responsive:nth-child(2) {
                margin-bottom:auto;
                margin-left:auto;
                order:1;
            }

            .responsive:nth-child(3) {
                margin-top:auto;
                margin-right:auto;
                order:2;
            }
            .responsive:nth-child(4) {
                margin-top:auto;
                margin-left:auto;
                order:3;
            }
    </style>
    <body>
        <div class="responsive">
            <div class="img">
              <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400">
              <div class="desc">Add a description of the image here</div>
            </div>
        </div>
        <div class="responsive">
            <div class="img">
              <a target="_blank" href="animals/dog.jpg">
                <img src="animals/dog.jpg" alt="Forest" width="600" height="400">
              </a>
              <div class="desc">Add a description of the image here</div>
            </div>
        </div>
        <div class="responsive">
            <div class="img">
              <a target="_blank" href="animals/monkey.jpg">
                <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400">
              </a>
              <div class="desc">Add a description of the image here</div>
            </div>
        </div>
        <div class="responsive">
            <div class="img">
              <a target="_blank" href="animals/fox.jpg">
                <img src="animals/fox.jpg" alt="Mountains" width="600" height="400">
              </a>
              <div class="desc">Add a description of the image here</div>
            </div>
        </div>
        <div class="clearfix"></div>
    </body>
</html>