Answer to Question #311963 in HTML/JavaScript Web Application for Urooj

Question #311963

In a new index.html file display three images (that you would be legally allowed to use for a commercial project) and do the following:

Select a theme that ties all three images together (for example nature, city life, gaming, etc.).
Give each image an appropriate alt attribute.
Give each image appropriate width and height attributes (retaining its original aspect ratio).
Give each image an appropriate title attribute.
Use CSS filters to change the appearance of all three of your images.
Underneath each image, provide information on its copyright license.

Expert's answer

<!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>City life</title>
</head>
<body>
   <style>
      .wrapper {
         display: flex;
         justify-content: center;
         gap: 40px;
         margin-top: 40px;
      }
      .block {
         display: flex;
         gap: 10px;
         flex-direction: column;
      }
      img {
         filter: grayscale(60%);
      }
      a{
         text-decoration: none;
         font-size: 18px;
         color: #17202A;
         transition: all 0.3s ease;
      }
      a:hover {
         color: #566573;
      }
   </style>
   <div class="wrapper">
      <div class="block">
         <img src="./street-new-york.jpg" alt="New York Street" width="340px" height="500px" title="New York Street">
         <a href="https://unsplash.com/@arty_nyc" rel="license">&copy;Copyright Arthur Osipyan</a>
      </div>
      <div class="block">
         <img src="./clay-banks.jpg" alt="New York Street" width="340px" height="500px" title="New York Street">
         <a href="https://unsplash.com/@claybanks" rel="license">&copy;Copyright Clay Banks</a>
      </div>
      <div class="block">
         <img src="./derek-liang.jpg" alt="New York Street" width="340px" height="500px" title="New York Street">
         <a href="https://unsplash.com/@derekrliang" rel="license">&copy;Copyright Derek Liang</a>
      </div>
   </div>
</body>
</html>