bh photo code example
Example: 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>