Responsive Website Design: Responsive Shopping-cart layout Using Html and CSS only

First create index.html

<!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" />
<title>Ecommerace-Layout</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<div class="logo">
<img src="images/logo.png" />
</div>
</header>
<div class="mainwrapper">
<div class="menu">
<nav>
 <ul>
   <li><a href="http://curdweb.com/">Home</a></li>
   <li><a href="http://curdweb.com/">Offers</a></li>
   <li><a href="http://curdweb.com/">Sales</a></li>
   <li><a href="http://curdweb.com/">Products</a></li>
      <li><a href="http://curdweb.com/">Contact Us</a></li>
  </ul>
</nav>

</div>
<div class="banner">
<img src="images/banner.png" />
</div>
<div class="left-side-menu">
<ul>
<li><a href="#">Mobile</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Watches</a></li>
<li><a href="#">Bags</a></li>
</ul>

</div>
<div class="main_container">
<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>
<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>
<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>

<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>
<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>
<div class="box_block">
<img src="images/mobile.gif" />
<div class="box_block_readmore">
<a class="button" href="#">Read More</a>
<a class="button" href="#">Purchase</a>
</div>
</div>

</div> 
<footer>© Right All Reserved by Shopping Center</footer>
</div>

</body>
</html>

Finally create style.css

@charset "utf-8";
body{
background:#333;
height:100%;
width:100%;
margin:auto;
}
a{
color: #fff;
text-decoration: none;
text-shadow: 2px 1px 2px #333;
}
a:hover{
color:#FF0000;
}
ul{
}
ul li{
}
ul li a{
color:#333333;
list-style-type:square;
text-decoration:none;
line-height:32px;
text-shadow:none;
}
.mainwrapper{
width:75%;
padding:10px;
margin:auto;
height:auto;
overflow:auto;
background:#ffffff;
 border-top-left-radius: 58px;
border-top-right-radius: 58px;
}
header{
width:65%;
padding:20px;
/*background:#000033;*/
margin:auto;
}
.logo{
float:left;
height:100px;
width:200px;
/*background:#999999;*/
}
.menu{

height: 87px;
    margin: auto;
    width: 100%;
background:#ffcd07;
}
.banner{
/*height:200px;*/
width:100%;
margin:auto;
background:#00427d;
}
.banner img{
width:100%;
height:auto;
margin:auto;
}
.left-side-menu{
float:left;
/*height:200px;*/
width:24%;
box-shadow: 3px 4px 2px #fec;
margin-top: 10px;
}
.main_container{
height:500px;
overflow:auto;
width:76%;
background:#fff;
}
.box_block{
float:left;
margin:10px;
padding:5px;
box-shadow: 2px 3px 2px 2px #ccc;
width:200px;

}
.box_block_readmore{
background:#006666;
}
.button{
background:#FFD429;
border-radius: 5px;
padding: 7px;
float:left;
margin:5px;
}
footer{
height:20%;
/*width:100%;*/
padding:10px;
background:#333333;
margin:auto;
}
.footer p{
text-align:center;
color:#CCCCCC;
}

/*menu-starts here*/
/*------------menu */
nav {width:100%;height:79px;margin: 0 auto 15px auto;
     
     
background:#ffcc00;
border-radius: 5px;

border: 1px solid #ffcc00; 
          
          
        -moz-box-shadow:inset 0px 1px 0px 0px #ffcc00;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffcc00;
        box-shadow:inset 0px 1px 0px 0px #ffcc00;        
        -moz-box-shadow:inset 0px 1px 0px 0px #ffcc00;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffcc00
        box-shadow:inset 0px 1px 0px 0px #ffcc00;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffcc00), color-stop(1, #FFFFFF));
        background:-moz-linear-gradient(top, #ffcc00 5%, #FFFFFF 100%);
        background:-webkit-linear-gradient(top, #ffcc00 5%, #FFFFFF 100%);
        background:-o-linear-gradient(top, #ffcc00 5%, #FFFFFF 100%);
        background:-ms-linear-gradient(top, #ffcc00 5%, #FFFFFF 100%);
        background:linear-gradient(to bottom, #ffcc00 5%, #FFFFFF 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcc00', endColorstr='#FFFFFF',GradientType=0);
     
     
     
     
     
     }
nav ul {list-style: none;margin: 0;padding: 0;}
nav ul li 
{
    border-radius:6px;
    
    position: relative;
float: left;

background: #333333;
margin-left: 4px;
margin-right:4px;
padding: 15px;
margin-top: 10px;
    }
nav ul li:hover {background:#ffcc00;}
nav ul li a {font-size: 13px; line-height:14px;color: #ffffff;display: block;padding: 6px 10px 6px 10px;margin-bottom: 5px;z-index: 6;position: relative;font-weight:bold;}
nav ul li:hover a{}

html {
   -webkit-text-size-adjust: none;
}
.video embed,
.video object,
.video iframe {
   width: 100%;
   height: auto;
}
img{
 max-width:100%;
 height: auto;
    width: auto\9; /* ie8 */
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
 nav{width:100%;}
}

@media only screen and (max-width: 767px) {
 header #logo, header #search-box{margin:0 auto; text-align:center;}
 nav {width:100%;background:#fff;height:auto;}
 nav ul li {float: none;background:#ffcc00;text-align:center;padding: 0px; }
 #content{background-color:#ffffff;}
 .menu{

height: auto;
    margin: auto;
    width: 100%;
background:#ffcd07;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
 
}

Friday 20 February 2015

Responsive Shopping-cart layout Using Html and CSS only

First create index.html

Finally create style.css

No comments:

Post a Comment