Responsive Website Design: Responsive Website Design

Responsive Website Design

1> create style.css file

body{
background:#333333;
}
#header_main{
background-color:black;
    color:white;
    text-align:center;
    padding:5px;
	margin-bottom:10px;
}
.header_main p{
text-align:center;
color:#FFFFFF;
padding:10px;
}
.container_wrapper{
width:80%;
margin:auto;
height:auto;
overflow:auto;
background:#FFFFFF;
padding:10px;
margin-bottom:10px;
}
.container_main{
width:100%;
margin:auto;
}
.meright_side{
float:right;
background:#999999;
min-height:10%;
margin:10px;
}
.meright_side ul{
padding:0px;
}
.meright_side li{
list-style-type:square;
color:#FFFFFF;
/*background:url(img/ds.png) no-repeat;*/
padding: 0px 0px 0px 6px;
}
.meright_side li a{
text-align:left;
text-decoration:none;
color:#FFFFFF;
}
.meright_side li a:hover{
text-decoration:underline;
color:#CCCCCC;
}
.banner{
width:100%;
height:auto;
margin:auto;
}
.banner img{
width:100%;
}
.content_block{
float:left;

background:#999999;
margin:10px;
width:320px;
}
.content_block img{
width:100%;
zoom:1;

}
.content_block_text{
float:left;
box-shadow: 2px 2px 2px 3px;
padding: 10px;

margin:10px;
}
.content_block_text p{
line-height:20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
.footer_main{

height:25%;
margin:auto;
background:#999999;
overflow: auto;

border: 2px solid #e9e8b1;
width: 98%;
-moz-width:96%!important;
}
.footer_block{
float:left;
margin: 16px;
height:20%;
box-shadow: 1px 1px 1px 1px #333;
border-right:1px solid #FFFFFF;
padding: 10px;
}
.footer_list{
height:10%;
width:100%;

margin:0px;
padding: 10px;

}

.footer_list ul{
padding:0px;
}
.footer_list li{
list-style-type:square;
color:#FFFFFF;
/*background:url(img/ds.png) no-repeat;*/
padding: 0px 0px 0px 6px;
}
.footer_list li a{
text-align:left;
text-decoration:none;
color:#FFFFFF;
}
.footer_list li a:hover{
text-decoration:underline;
color:#CCCCCC;
}

.footer_block_heading{
text-align:center;
color:#CCCCCC;
height:5px;
}
.footer_last{
background-color:black;
    color:white;
    text-align:center;
    padding: 20px;
}

2>create index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css">

<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='js/jquery.equalheights.js'></script>
<title>Layout</title>
</head>

<body>
<div id="header_main"><p>Your Company Name</p></div>
<div class="container_wrapper">
<div class="banner">
<img src="img/tr.jpg" />
</div>
<div class="container_main">

<div class="content_block">
<img src="img/business-banner.jpg"/>
</div>
<div class="content_block_text">
<p>Our team works on some dedicated plan which is given by you.We are looking for new advise and thoughts</p>
<p>We are looking for new advise and thoughts</p>
<p>We appreciate new thoughts and morden working culture.</p>
</div>
</div>
<div class="container_main">
<div class="content_block">
<img src="img/business-banner.jpg"/>
</div>
<div class="content_block_text">
<p>Our team works on some dedicated plan which is given by you.We are looking for new advise and thoughts</p>
<p>We are looking for new advise and thoughts</p>
<p>We appreciate new thoughts and morden working culture.</p>
</div>
</div>

<div class="footer_main">
<div class="footer_block">
<div class="footer_block_heading">
Business</div>
<div class="footer_list">
<ul>
<li><a href="#"> Terms</a></li>
<li><a href="#"> Rules</a></li>
<li><a href="#"> Transitions</a></li>
</ul>
</div>
</div>
<div class="footer_block">
<div class="footer_block_heading">
Purchases</div>
<div class="footer_list">
<ul>
<li><a href="#"> Vendeor1</a></li>
<li><a href="#"> Vendeor2</a></li>
<li><a href="#"> Vendeor3</a></li>
</ul>
</div>

</div>
<div class="footer_block">
<div class="footer_block_heading">
Apps</div>
<div class="footer_list">
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#"> Terms</a></li>
<li><a href="#">Installation</a></li>
</ul>
</div>

</div>

<div class="footer_block">
<div class="footer_block_heading">
Contacts</div>
<div class="footer_list">
<ul>
<li><a href="#"> Office-Address1</a></li>
<li><a href="#"> Office-Address2</a></li>
<li><a href="#"> Office-Address3</a></li>
</ul>
</div>

</div>

<div class="footer_block">
<div class="footer_block_heading">
Link With Us</div>
<div class="footer_list">
<ul>
<li><a href="#"> Facebook</a></li>
<li><a href="#"> Google+</a></li>
<li><a href="#"> LinkedIn</a></li>
</ul>
</div>

</div>

<div class="footer_block">
<div class="footer_block_heading">
Business</div>
<div class="footer_list">
<ul>
<li><a href="#"> Borcher</a></li>
<li><a href="#"> Adds</a></li>
<li><a href="#"> Advertisements</a></li>
</ul>
</div>

</div>

</div>

Thursday, 12 February 2015

Responsive Website Design

Responsive Website Design

1 comment: