AIT Experiment no 3

AIM- Create a responsive form using CSS media query

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {  box-sizing: border-box;  }
.row::after {
   content: "";
   clear: both;
   display: table;  }
[class*="col-"] {
   float: left;
   padding: 25px;   }
html {
   font-family: "Lucida Sans", sans-serif;  }
.header {
   background-color: ORANGE;
   color: WHITE;
   padding: 07px;  }
.menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;  }
.menu li {
   padding: 8px;
   margin-bottom: 7px;
   background-color: #33b5e5;
   color: PURPLE;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);    }
.menu li:hover {
   background-color: #0099cc;  }
.aside {
   background-color: BLUE;
   padding: 20px;
   color: WHITE;
   text-align: center;
   font-size: 14px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  }
.footer {   background-color: GREEN;
   color: PINK;
   text-align: center;
   font-size: 20px;
   padding: 15px; }
</style>
</head>
<body>
<div class="header">
 <h1>INDIA</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
 <ul>
   <li>The Flight</li>
   <li>The City</li>
   <li>The population</li>
   <li>The Food</li>
 </ul>
</div>
<div class="col-6 col-m-9">
 <h1>The COUNTRY</h1>
 <p>HAPPY REPUBLIC DAY...</P>
<P> India is a vast South Asian country with diverse terrain – from Himalayan peaks to Indian Ocean coastline – and history reaching back 5 millennia. In the north, Mughal Empire landmarks include Delhi’s Red Fort complex and massive Jama Masjid mosque, plus Agra’s iconic Taj Mahal mausoleum. </p>
</div>
<div class="col-3 col-m-12">
 <div class="aside">
   <h2>What?</h2>
   <p>It is the 7th-largest country by area,the 2nd-most populous country in the world.</p>
   <h2>Where?</h2>
   <p>INDIA is a country on asia Continent.</p>
   <h2>When?</h2>
   <p>The Indian independence movement was a movement from 1857 until 15 August 1949</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>

OUTPUT :




Click here to download
AIT Experiment no 3 AIT Experiment no 3 Reviewed by akshay salve on 9:22 PM Rating: 5

No comments:

Powered by Blogger.