/Html/Bh

Bh

<html>
  <head>
     <title> PHOTO GALLERY </title>
    <style>
     *{
         box-sizing:border-box; 
     }
     body{
          margin:0;
          background:gray;
     }
     nav{
        background:#594848;
        width:100%;
        overflow:auto;
     }     
     ul{
         margin:0;
         padding:0;
         list-style:none;
     }  
     li{
         float:left;
     }      
     nav a{
         width:120px;
         display:block;
         text-decoration:none;
         text-align:center;
         background:#594848;
         font-size:17px;
         color:white;
         padding:20px 10px;
         font-family:arial;
         }
     nav a:hover{
         background:skyblue;
         color:black;
     }    
     .container{
         max-width:800px;
         margin:auto;
         background:f2f2f2;
         overflow:auto;
     }    
     .gallery{
         margin:5px;
         border:1px solid #ccc;
         float:left;
         width:390px
      } 
      .gallery img{
          width:100%;
          height:300px;
       }   
       .desc{
           padding:16px;
           text-align:center;
       }     
        </style>
  </head>

  <body bgcolor = "honeydew">
   
  <nav>
        <li><a href = "Homepage.html">Homepage</a></li>
        <li><a href = "About_us.html">About-Us</a></li>
        <li><a href = "our_work.html">Our-Work</a><li>
        <li><a href = "photo_gallery.html">Photo-Gallery</a></li>
        <li><a href = "get_involved.html">Get-Involved</a></li>
        <li><a href = "contact_us.html">Contact-Us</a></li>
   </nav>
  
     
     <div class="container">
         <div class="gallery">
            <img src="IMAGES/Nvs_03189.jpg" width="800" height="450" alt="Nvs_03189"/>
            <div class="desc"> add a decription of image</div>
         </div>
         <div class="gallery">
             <img src="IMAGES/malnutrition.jpg" width="800" height="450" alt="malnutrition"/>
            <div class="desc"> add a decription of image</div>
         </div>
         <div class="gallery">
            <img src="IMAGES/800.jpeg" width="800" height="450" alt="800"/>
            <div class="desc"> add a decription of image</div>
         </div>
         <div class="gallery">
             <img src="IMAGES/0141293_john-paul-morgan-in-the-congo-working-for-doctors-without-borders.jpeg" width="800" height="450" alt="0141293_john-paul-morgan-in-the-congo-working-for-doctors-without-borders"/>
             <div class="desc"> add a decription of image</div>
         </div>
         <div class="gallery">
             <img src="IMAGES/gettyimages-609452924-57_wide-8c953639bbcf2af197898643ac48ef6b93c2fd8a_t800.jpg" width="800" height="450" alt="gettyimages-609452924-57_wide-8c953639bbcf2af197898643ac48ef6b93c2fd8a_t800"/>
             <div class="desc"> add a decription of image</div>
         </div>
         <div class="gallery">
             <img src="IMAGES/8721493099888640360no.jpg" width="640" height="360" alt="8721493099888640360no"/>
             <div class="desc"> add a decription of image</div>
         </div>
           

            
           
   
    
   
     
    
    
     
    

  
                 


     </div>
     <footer>PANASHE FLOYD SEDEYA</footer>
     <h4>Social Media</h4>
     
     <p><a href="https://web.facebook.com/MSFsouthafrica?_rdc=1&_rdr">FACEBOOK</a></p>
     <p><a href="https://twitter.com/MSF_southafrica">TWITTER</a></p>
     <p><a href="https://www.instagram.com/msf_africa/">INSTAGRAM</a></p>
     <p><a href="https://www.youtube.com/user/MSFsouthafrica">YOUTUBE</a></p>
     

</html>

Similar codes

0 vote273 views1 answer
Insert links in ordened and unordered lists
Html
0 vote300 views1 answer
Chrome empty page editable
Html
15 votes284 views2 answers
Boootstrap
Html
1 vote291 views1 answer
Html code block
Html
18 votes277 views3 answers
Html inline css
Html
0 vote279 views4 answers
Add link to text using span html
Html
68 votes278 views5 answers
How to add a image file in html
Html
0 vote339 views6 answers
Replace all in react js
Html
0 vote290 views1 answer
Pre-fill the input with the default domain
Html
2 votes281 views2 answers
No-gutter bootstrap 4
Html