Horje
How to create Responsive Web Page - Full Example | HTML Responsive Code
How to create Responsive Web Page - Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.


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:

Responsive Web Page - Full Example



Read Full::
HTML Responsive Code
Category:
HTML Code
Sub Category:
HTML Responsive Code
Uploaded:
9 months ago
Uploaded by:
Admin
Views:
1

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

Single Articles
Responsive Web Page - Full Example

Share on: