Responsive Web Page - Full Example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

.main {
  float: left;
  width: 60%;
  padding: 0 20px;
}

.right {
  background-color: #e5e5e5;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>

Output should be:

Single Articles

Responsive Web Page - Full Example

HTML Responsive

What is HTML Responsive	HTML Responsive
How to Setting The Viewport	HTML Responsive
How to create HTML Responsive Images	HTML Responsive
How to create HTML Responsive Images Using the max-width Property	HTML Responsive
How to show Different Images Depending on Browser Width	HTML Responsive
How to create HTML Responsive Text Size	HTML Responsive
How to create Media Queries	HTML Responsive
How to create Responsive Web Page - Full Example	HTML Responsive
How to create HTML Responsive Web Design - Frameworks	HTML Responsive

Type:	Html
Category:	Web Tutorial
Sub Category:	HTML Responsive
Uploaded by:	Admin