Responsive design is a simple implementation in CSS which is very effective when you don't want to compromise with your GUI of web page whether it is surfed from large or small footprint devices. Just add:
/* For laptop or computer */
@media only screen and (max-width:1366px)
{
}
/* For smartphone */
@media only screen and (max-width:320px)
{
}
/* For laptop or computer */
@media only screen and (max-width:1366px)
{
}
/* For smartphone */
@media only screen and (max-width:320px)
{
}
HTML Code:
<!-------------------------
Author: Qaidjohar
Start Date: 16/08/2016
End Date:
Logical Comment: Responsive Demo
-------------------------->
<html>
<head>
<title>Responsive Demo</title>
<link rel="stylesheet" type="text/css" href="../css/project_review_responsive_demo.css">
</head>
<body>
<!-----------------------------Main-------------------------->
<div class="main">
<!-----------------------------Header------------------------>
<div class="header">
<div class="logo">
<img id="aits" src="../images/atmiya-night-vision.jpg"/>
</div>
<div class="menu">
<ul>
<li class="menu_li"><a class="menu_a">Home</a></li>
<li class="menu_li"><a class="menu_a">Portfolio</a></li>
<li class="menu_li"><a class="menu_a">About Us</a></li>
<li class="menu_li"><a class="menu_a">Contact Us</a></li>
</ul>
</div>
</div>
<!----------------------------Container---------------------->
<div class="container">
<div class="left_c">
<p id="quote"><i>"A place to learn, a chance to grow with divinity."</i></p>
</div>
<div class="center_c">
<p id="intro">To be an academic institution with dynamic equilibrium with its environment striving continuously for excellence in education, research and forming of an idyllic human resource development center to serve the society that lead to academic enrichment and perennial advancement.</p>
</div>
<div class="right_c">
<img id="light" src="../images/etcee2.jpg"/>
</div>
</div>
<!---------------------------Footer-------------------------->
<div class="footer">
<p id="p_footer">© Atmiya Institute of Technology and Science</p>
</div>
</div>
</body>
</html>
CSS Code:
/*
Author: Qaidjohar
Start Date: 16/08/2016
End Date:
Logical Comment: Responsive Demo
*/
*
{
margin:0px;
padding:0px;
}
@media only screen and (max-width:1366px)
{
.main
{
height:auto;
width:100%;
}
.header
{
height:220px;
width:100%;
background-color:grey;
}
.logo
{
height:150px;
width:100%;
}
#aits
{
height:100%;
width:100%;
}
.menu
{
height:70px;
width:100%;
}
.menu_li
{
list-style-type:none;
float:left;
height:100%;
width:25%;
text-align:center;
font-size:40px;
line-height:70px;
background-color:orange;
box-shadow:0px 0px 20px 5px black inset;
border-radius:10px;
}
.menu_li:hover
{
background-color:green;
color:orange;
}
.menu_a
{
text-decoration:none;
}
.container
{
height:400px;
width:100%;
}
.left_c
{
height:400px;
width:20%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
#quote
{
margin:40px 0px 0px 20px;
font-size:50px;
}
#intro
{
font-size:20px;
margin:20px 20px 0px 20px;
}
.center_c
{
height:400px;
width:50%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
.right_c
{
height:400px;
width:30%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
#light
{
margin:50px 0px 0px 45px;
height:75%;
width:75%;
}
.footer
{
height:50px;
width:100%;
box-shadow:0px 0px 20px 5px black inset;
background-color:grey;
}
#p_footer
{
text-align:center;
font-size:20px;
line-height:45px;
}
}
@media only screen and (max-width:320px)
{
.main
{
height:auto;
width:100%;
}
.header
{
height:350px;
width:100%;
background-color:grey;
}
.logo
{
height:150px;
width:100%;
}
#aits
{
height:100%;
width:100%;
}
.menu
{
height:200px;
width:100%;
}
.menu_li
{
list-style-type:none;
float:left;
height:25%;
width:100%;
text-align:center;
font-size:40px;
line-height:50px;
background-color:orange;
box-shadow:0px 0px 20px 5px black inset;
border-radius:10px;
}
.menu_li:hover
{
background-color:green;
color:orange;
}
.menu_a
{
text-decoration:none;
}
.container
{
height:1050px;
width:100%;
}
.left_c
{
height:400px;
width:100%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
#quote
{
margin:40px 0px 0px 45px;
font-size:50px;
}
#intro
{
font-size:20px;
margin:20px 20px 0px 20px;
}
.center_c
{
height:250px;
width:100%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
.right_c
{
height:400px;
width:100%;
box-shadow:0px 0px 20px 5px black inset;
float:left;
}
#light
{
margin:50px 0px 0px 35px;
height:75%;
width:75%;
}
.footer
{
height:50px;
width:100%;
box-shadow:0px 0px 20px 5px black inset;
background-color:grey;
}
#p_footer
{
text-align:center;
font-size:15px;
line-height:45px;
}
}
Laptop/Computer (width: 1366px) Output:
Smartphone (width: 320px) Output:
No comments:
Post a Comment