Problem- college task HTML &CSS

Hi, I don’t know how to complete this task. I will be thankful to all of you if you can help me :slight_smile:

The spelling you are looking for is “collage”. Unless this is a college assignment.

So start at the beginning: how in HTML would you display a 4x2 set of images?

1 Like

This was a college assignment. Thx for your answer, but i already did it by trial-and-error method.

<!DOCTYPE html>
<html>
    <head>
        <title>ET-712 P2</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        body {
        margin: 0;
                }

            img {
            float: left;

            border: 2px solid black;
            box-sizing: border-box;

            margin-right: 10px;
            margin-top: 10px;

            width: calc((100% - 50px)/4);

            height: 200px;
            }

            img:nth-child(4n+1) {
            margin-left: 10px;
            }

            img:nth-child(4n) {
            margin-right: 0px;
            }
</style>
    </head>
    <body>
        <img src="images/italy1.jpg"/>
        <img src="images/italy2.jpg"/>
        <img src="images/achieve.jpg"/>
        <img src="images/alberta.jpg"/>
        <img src="images/forestroad.jpg"/>
        <img src="images/sea.jpg"/>
        <img src="images/pier.jpg"/>
        <img src="images/plouzane.jpg"/>
    </body>
</html>
1 Like

In html to try about this : 

<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <img src="images/italy1.jpg"/>
        <img src="images/italy2.jpg"/>
        <img src="images/achieve.jpg"/>
        <img src="images/alberta.jpg"/>
        <img src="images/forestroad.jpg"/>
        <img src="images/sea.jpg"/>
        <img src="images/pier.jpg"/>
        <img src="images/plouzane.jpg"/>
    </body>
</html>