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
Reviewed by Akshay Salve
on
9:22 PM
Rating:
Reviewed by Akshay Salve
on
9:22 PM
Rating:
No comments: