Prev Demo
Image In The Example Web Page In Responsive Web Design.
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Viewport Setting</title> <meta name="viewport" content="width=device-width" initial-scale="1.0"> </head> <body> <style> * { box-sizing: border-box; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } img { width:100%; height:auto; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #b6ff00; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #ff004e; color: #ffffff; box-shadow: 0 2px 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #000000; } .aside { background-color: #ff004e; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 2px 2px rgba(0,0,0,0.12), 0 2px 1px rgba(0,0,0,0.24); } .footer { background-color: #000000; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For desktop: Here we are creating for desktop first*/ .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } @media only screen and (max-width: 650px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } </style> <div class="header"> <h1>TechFunda</h1> </div> <div class="row"> <div class="col-3 menu"> <ul> <li>Technologies</li> <li>Become Author</li> <li>Refer & Earn</li> <li>Get Knowledge</li> </ul> </div> <div class="col-6"> <h1>Free Tutorials</h1> <p>TechFunda is a free e Learning tutorial website abailable in the world wide web as, www.techfunda.com</p> <img src="http://techfunda.com/HTPictures/Generics/5-635942140823078493.jpg" width="450" height="325"/> </div> <div class="col-3 right"> <div class="aside"> <h2>Benifit?</h2> <p>We can learn the Technologies and we can earn the money easily.</p> <h2>How?</h2> <p>By submitting the technologies what ever we know.</p> <h2>Contact</h2> <p>You can reach us throus mail ID webmaster@techfunda.com</p> </div> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output