Gallery

-


Cat Photos



 <!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>Photo Gallery</title>
    <style>
        /* To normalize the box model */
        * {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  background: #EBE7E7;
}

.header {
  text-align: center;
  padding: 32px;
  background: #E0DDDD;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  object-fit: cover;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}
@media (max-width:600px){
  #gallery img{
    width:100%;
  }
}
    </style>
</head>
<body>
    <div class="header">
        <h1>CSS FLEXBOX PHOTO GALLERY</h1>
      </div>
      <div id="gallery">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
      </div>
   
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Tables-Page2

-
                                    TABLES-Page 2 <!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> HTML Tables </title> </head> <body> TABLE # 1     <h2> BASIC TABLE STRUCTURE </h2>     <table border = "3" width= "40%" >         <tr>             <td> cell1 </td>             <td> cell2 </td>             <td> cell3 </td>         </tr>         <tr>           ...
Read more
-
Image
HTML AND A LITTLE CSS  APPLIED       <!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> Table </title>         </head> <body>     <table border = "2" width= "90%" >         <!-- 10 rows and 8 columns -->         <caption> Overall Performance of the Team </caption>         <thead class= "merge" >   <!-- 1st ROW -->       <tr bgcolor = "#A9A9A9" >                 <th rowspan= "2" > Equips </th>             <th colspan= "6" > Table of Performance </t...
Read more

Html Tables

-
Image
  <! 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 > HTML TABLES </ title > </ head > < body >     < h1 > TABLE 1 </ h1 >     < table border = "4" width = "35%" >             < thead >                 <!-- 1st Row Spanned-->               < tr >                 < th colspan = "4" > Purchased Equipment (June,2006) </ th >               </ tr >                       <!-- 2nd Row Spanned...
Read more