Responsive Web Design - Awesome Gallery Website with only html and css Posted by Yahya Benlachheb on September 30, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Responsive Gallery WebSite</title> <meta name="viewport" content="width=device-width , initial-scale=1.0"> </head> <body> <header> <h1> Gallery Website</h1> </header> <div class="gallerys"> <div class="img"> <img src="images/1.jpg" alt=""> </div> <div class="img"> <img src="images/2.jpg" alt=""> </div> <div class="img"> <img src="images/3.jpg" alt=""> </div> <div class="img"> <img src="images/4.jpg" alt=""> </div> <div class="img"> <img src="images/5.jpg" alt=""> </div> <div class="img"> <img src="images/6.jpg" alt=""> </div> <div class="img"> <img src="images/7.jpg" alt=""> </div> <div class="img"> <img src="images/8.jpg" alt=""> </div> <div class="img"> <img src="images/9.jpg" alt=""> </div> <div class="img"> <img src="images/10.jpg" alt=""> </div> <div class="img"> <img src="images/11.jpg" alt=""> </div> <div class="img"> <img src="images/12.jpg" alt=""> </div> </div> <footer> <span>All Gallery Copyright By ...</span> </footer> </body> </html> CSS CODE body{ margin: 0; padding: 0; font-family: sans-serif; } header{ overflow: hidden; background: #e74c3c; padding: 60px 0; text-align: center; color: white; text-transform: uppercase; } footer{ overflow: hidden; background: #e74c3c; padding: 20px 0; text-align: center; color: white; text-transform: uppercase; } .gallerys{ padding: 10px; overflow: hidden; text-align: center; } .img{ display: inline-block; width: 100%; max-width: 340px; height: 220px; overflow: hidden; margin: 10px; cursor: pointer; } .img img{ width: 100%; height: 220px; transition: 0.4s; } .img img:hover{ transform: scale(1.2); } @media (max-width:400px){ .img{ margin: 10px 0; } } Comments
Comments
Post a Comment