Flexible Responsive Photo Gallery

Responsive Image Grid

Resize the browser window to see the responsive effect.

Comments

Post a Comment

Popular posts from this blog

create 1 row 2 columns layout in HTML and CSS

Image
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {   box-sizing: border-box; } .row {   display: flex; } /* Create two equal columns that sits next to each other */ .column {   flex: 50%;   padding: 10px;   height: 300px; /* Should be removed. Only for demonstration */ } </style> </head> <body> <h2>Two Equal Columns</h2> <div class="row">   <div class="column" style="background-color:#aaa;">     <h2>Column 1</h2>     <p>Some text..</p>   </div>   <div class="column" style="background-color:#bbb;">     <h2>Column 2</h2>     <p>Some text..</p>   </div> </div> </body> </html>
Read more

Jascript COde / HTML / CSS Message Box

 <!DOCTYPE html> <html> <style> #div1 {   position:inline;   border: 2px solid #dedede;   width:200px;   background-color: #f1f1f1;   border-radius: 5px;   padding: 50px;   margin: 10px 0; } </style> <body> <p>Display the Chat Box.</p> <button onclick="myFunction()"> CHAT </button> <script> var msge , msgebox, sname,div1; function myFunction() {    div1 = document.createElement("div");    div1.id="div1";       sname = document.createElement("INPUT");    sname.setAttribute("type", "text");          msge = document.createElement("TEXTAREA");     msge.id="msge";    msgebox = document.createElement("TEXTAREA");    msgebox.rows=10;    msgebox.id="msgebox" ;         btn = document.createElement("INPUT");    btn.setAttribute("type", ...
Read more