Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 3

Problem- college task HTML &CSS

Solved! Go to Solution.

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

 

image.png

 

2 Replies
Commander Lvl 2
Message 2 of 3

Re: Problem- college task HTML &CSS

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?

Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!

Solution
Copilot Lvl 2
Message 3 of 3

Re: Problem- college task HTML &CSS

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>