Photo Album

Photo Album

Using Html and Css

In the course of Fullstack Web Development,pw skills mentors taught us about grid and give homework to research about grid-template-areas and make a mini project using grids with images.I am glad to share that I completed this project successfully.And I want to share mini project with the community.

So ,here is the code of html part :-

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>Photo Album</title>

  7. <link rel="stylesheet" href="./style.css">

  8. </head>

  9. <body>

  10. <h1><em>My photos</em></h1>

  11. <div class="container">

  12. <div class="box box1"><img src="pexels-photo-13461077.jpeg" alt="">

  13. <p>life</p></div>

  14. <div class="box box2"><img src="pexels-photo-14726376.jpeg" alt="">

  15. <p>quote</p></div>

  16. <div class="box box3"><img src="pexels-photo-14851012.jpeg" alt="">

  17. <p>

  18. light

  19. </p></div>

  20. <div class="box box4"><img src="pexels-photo-15072642.jpeg" alt="">

  21. <p>ola</p></div>

  22. <div class="box box5"><img src="pexels-photo-5461549.jpeg" alt="">

  23. <p>divine</p></div>

  24. <div class="box box6"><img src="pexels-photo-6510411.jpeg" alt="">

  25. <p>

  26. snow

  27. </p></div>

  28. <div class="box box7"><img src="pexels-photo-7500307.jpeg" alt="">

  29. <p>rain</p></div>

  30. <div class="box box8"><img src="pexels-photo-9074921.jpeg" alt=""><p>kniw</p></div>

  31. </div>

  32. </body>

  33. </html>

    Here is code for the CSS part :-

  34. body{

  35. background-color: aquamarine;

  36. }

  37. .container{

  38. display:grid;

  39. grid-template-rows: repeat(3,1fr);

  40. grid-template-columns: repeat(3,1fr);

  41. gap: 20px 30px;

  42. justify-items: center;

  43. border-top: 2px solid maroon;

  44. }

  45. h1>em{ background-color: hotpink;

  46. color:black;

  47. border:2px solid blue;

  48. }

  49. .box{

  50. height: 200px;

  51. width: 200px;

  52. margin: 80px;

  53. padding: 50px;

  54. }

  55. img{

  56. width:200px;

  57. height: auto;

  58. }