fv



Завдання №2

  • index.html
    style.css


1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <title>Styling Task Demo</title>
6    <link rel="stylesheet" href="style.css" />
7  </head>
8  <body>
9    <h1>Demo</h1>
10    <div class="container">
11      <img src="img/georgia.jpg" width="200" height="300" />
12      <img src="img/puppy.jpg" width="200" height="300" />
13      <img src="img/hut.jpg" width="200" height="300" />
14    </div>
15  </body>
16</html>
17
18
1html {
2  height: 100%;
3  width: 100%;
4  font-family: Arial, Helvetica, sans-serif;
5  color: #333;    
6  background-image: repeating-linear-gradient(
7    -45deg, 
8    #efefef 0px, 
9    #efefef 2.5px, 
10    #fff 2.5px, 
11    #fff 5px
12  );  
13}
14
15img {
16  display: block;
17  border-radius: 5px;
18}
19

...


  • 1.

    Create an empty CSS rule for .container class


  • 2.

    Set container display to flex


  • 3.

    Set container gap to 10px