Responsive UI for Login & Accordian
CSS @media Demo
by nijinvinodan
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h1><big>☚</big> Adjust Screensize to see Responsiveness</h1>
<div class='pageWrap'>
<div class='leftPane temp'>
<div class='form-template'> <span class='head-level-1'>Sign In</span>
<form class='login-form' action=''>
<label>Username</label>
<input type='text' name='username' />
<label>Password</label>
<input type='password' />
<input type='submit' value='Sign In' />
</form>
</div>
</div>
<!-- End of LeftPane -->
<div class='rightPane temp'>
<div class='form-template'> <span class='head-level-1'>Know About Us</span>
<div id="accordion">
<h3>What We do</h3>
<div>The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity. Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a newly industrialised country. However, it continues to face the challenges of poverty, corruption, malnutrition, inadequate public healthcare, and terrorism. A nuclear weapons state and a regional power, it has the third-largest standing army in the world and ranks seventh in military expenditure among nations. India is a federal constitutional republic governed under a parliamentary system consisting of 28 states and 7 union territories. India is a pluralistic, multilingual, and multi-ethnic society. It is also home to a diversity of wildlife in a variety of protected habitats</div>
<h3>How We do</h3>
<div>Cotton was domesticated in India by 4000 B.C.E. Traditional Indian dress varies in colour and style across regions and...CSS
body {
font-family:'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
h1 {
background: #e5eecc;
color: #000;
padding: 10px;
margin-bottom:10px;
}
/* When Screen Size is more than 1000px */
.temp {
border: 1px solid #d4d4d4;
border-radius: 5px;
height: auto;
background-image:-webkit-linear-gradient(#ffffff, #e5eecc 100px);
background-image:-moz-linear-gradient(#ffffff, #e5eecc 100px);
}
.pageWrap {
width:80%;
margin:auto;
}
.leftPane {
width:30%;
float:left;
}
.rightPane {
width:68%;
float: right;
}
.form-template {
padding:20px 5%;
}
.head-level-1 {
font-size: 22px;
margin-bottom: 10px;
display: block;
}
input {
display: block;
width:100%;
max-width: 300px;
height: 28px;
}
label {
font-weight: bold;
margin-bottom: 0px !important;
}
input[type='submit'] {
margin-top: 10px;
width:80px;
background:#e5eebc;
font-weight: bold;
border-radius: 5px;
box-shadow: none;
border: 1px solid orange;
}
/* When Screen Size is less than 1000px */
@media screen and (max-width: 1000px) {
.pageWrap {
width:90%;
margin:auto;
}
}
/* When Screen Size is less than 700px */
@media screen and (max-width: 800px) {
.leftPane, .rightPane {
width:100%;
margin-bottom: 5px;
}
label, input {
display: inline;
width:200px;
}
}
@media screen and (max-width: 765px) {
label, input {
width:150px;
}
}
@media screen and (max-width: 650px) {
label, input {
width:200px;
display: block;
}
}
/* When Screen Size is less than 400px */
@media screen and (max-width: 400px) {
.pageWrap {
width:100%;
}
}
/* When Screen Size is less than...JavaScript
$(function () {
$("#accordion").accordion({
heightStyle: "content"
});
});