<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="only screen and (max-width: 1922px)" type="text/css" href="responsiver.css"> </head> <body> <div class="header"> <h1>Phenomenal</h1> </div> <div style="overflow:auto"> <div class="menu"> <a href="home.html"><div class="menuitem">Home</div></a> <a href="Profile.html"><div class="menuitem">Profile</div></a> <a href="About.html"><div class="menuitem">About</div></a> <a href="Contact.html"><div class="menuitem">Contact</div></a> </div> <div class="main"> <h1 align="center">Welcome to Mumbai</h1> </div> <div class="right"> <h2>Watch More</h2> <p>Visit here</p> <a href="https://www.youtube.com" target="blank"><span>Hit Me Up</span></a> </div> </div> <div class="footer">© Copyright Phenomenal</div> </body> </html>
* { box-sizing: border-box; } body { background-color: red; font-family: Arial; color:orange; } .header { background-color:black; text-align: center; color: orange; -webkit-text-stroke: 1px black; box-shadow: 2px 2px 4px black; border-style: solid; border-width: 2px; border-color: black; } .menu { float: left; width: 20%; text-align: center; } .menu a { text-decoration: none; } .header img { float: left; } .menuitem { background-color: #d5ffa5; margin-top:7px; padding: 8px; border-style: solid; border-width: 2px; border-color: black; box-shadow: 2px 2px 4px black; text-decoration: none; color: black; } .menuitem:hover { background-color: lightgreen; font-weight: bold; }
 .main {  
      float: left;  
      width: 60%;  
      padding:0 20px;  
       margin-top: 7px;  
      margin-left: 5%;  
 }  
 .right {  
      background-color: #d5ffa5;  
      float: left;  
      width: 15%;  
      padding: 15px;  
      margin-top: 7px;  
      text-align: center;  
      border-style: solid;  
      border-width: 2px;  
      border-color: black;  
      box-shadow: 2px 2px 4px black;  
 }  
 .footer {  
      background-color: #d5ffa5;  
      text-align:center;  
  padding: 1px;  
      border-style: solid;  
      border-width: 2px;  
      border-color: black;  
      box-shadow: 2px 2px 4px black;  
      position:fixed;  
      bottom:0;  
      left:0;  
 }  
 .main img {  
      display: block;  
      box-shadow: 2px 2px 4px black;  
      border-style: solid;  
      border-width: 2px;  
      border-color: black;  
  }  
 @media only screen and (max-width:620px) {  
  /* For mobile phones: */  
  .menu, .main, .right {  
   width:100%;  
  }  
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.