Question
In: Computer Science
I need pure html and css code for a demo website that sells stuff online (example...
I need pure html and css code for a demo website that sells stuff online (example amazon). I need a webpage that is about a specific product (shows price, image, description and etc etc.) Use of CSS is must. Use of Javascript would be an asset. Urgently needed.
Solutions
Expert Solution
That's the home page of one template which I created.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap E-commerce Templates</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="themes/css/bootstrappage.css" rel="stylesheet"/>
<!-- global styles -->
<link href="themes/css/flexslider.css" rel="stylesheet"/>
<link href="themes/css/main.css" rel="stylesheet"/>
<!-- scripts -->
<script src="themes/js/jquery-1.7.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="themes/js/superfish.js"></script>
<script src="themes/js/jquery.scrolltotop.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="top-bar" class="container">
<div class="row">
<div class="span4">
<form method="POST" class="search_form">
<input type="text" class="input-block-level search-query" Placeholder="eg. T-sirt">
</form>
</div>
<div class="span8">
<div class="account pull-right">
<ul class="user-menu">
<li><a href="#">My Account</a></li>
<li><a href="cart.html">Your Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="register.html">Login</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="wrapper" class="container">
<section class="navbar main-menu">
<div class="navbar-inner main-menu">
<a href="index.html" class="logo pull-left"><img src="themes/images/logo.png" class="site_logo" ></a>
<nav id="menu" class="pull-right">
<ul>
<li><a href="./products.html">Woman</a>
<ul>
<li><a href="./products.html">Lacinia nibh</a></li>
<li><a href="./products.html">Eget molestie</a></li>
<li><a href="./products.html">Varius purus</a></li>
</ul>
</li>
<li><a href="./products.html">Man</a></li>
<li><a href="./products.html">Sport</a>
<ul>
<li><a href="./products.html">Gifts and Tech</a></li>
<li><a href="./products.html">Ties and Hats</a></li>
<li><a href="./products.html">Cold Weather</a></li>
</ul>
</li>
<li><a href="./products.html">Hangbag</a></li>
<li><a href="./products.html">Best Seller</a></li>
<li><a href="./products.html">Top Seller</a></li>
</ul>
</nav>
</div>
</section>
<section class="homepage-slider" id="home-slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="themes/images/carousel/banner-1.jpg" />
</li>
<li>
<img src="themes/images/carousel/banner-2.jpg" />
<div class="intro">
<h1>Mid season sale</h1>
<p><span>Up to 50% Off</span></p>
<p><span>On selected items online and in stores</span></p>
</div>
</li>
</ul>
</div>
</section>
<section class="header_text">
We stand for top quality templates. Our genuine developers always optimized bootstrap commercial templates.
<br/>Don't miss to use our cheap abd best bootstrap templates.
</section>
<section class="main-content">
<div class="row">
<div class="span12">
<div class="row">
<div class="span12">
<h4 class="title">
<span class="pull-left"><span class="text"><span class="line">Feature <strong>Products</strong></span></span></span>
<span class="pull-right">
<a class="left button" href="#myCarousel" data-slide="prev"></a><a class="right button" href="#myCarousel" data-slide="next"></a>
</span>
</h4>
<div id="myCarousel" class="myCarousel carousel slide">
<div class="carousel-inner">
<div class="active item">
<ul class="thumbnails">
<li class="span3">
<div class="product-box">
<span class="sale_tag"></span>
<p><a href="product_detail.html"><img src="themes/images/ladies/1.jpg" /></a></p>
<a href="product_detail.html" class="title">Ut wisi enim ad</a><br/>
<a href="products.html" class="category">Commodo consequat</a>
<p class="price">$17.25</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<span class="sale_tag"></span>
<p><a href="product_detail.html"><img src="themes/images/ladies/2.jpg" /></a></p>
<a href="product_detail.html" class="title">Quis nostrud exerci tation</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$32.50</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/3.jpg" /></a></p>
<a href="product_detail.html" class="title">Know exactly turned</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$14.20</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/4.jpg" /></a></p>
<a href="product_detail.html" class="title">You think fast</a><br/>
<a href="products.html" class="category">World once</a>
<p class="price">$31.45</p>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/5.jpg" /></a></p>
<a href="product_detail.html" class="title">Know exactly</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$22.30</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/6.jpg" /></a></p>
<a href="product_detail.html" class="title">Ut wisi enim ad</a><br/>
<a href="products.html" class="category">Commodo consequat</a>
<p class="price">$40.25</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/7.jpg" /></a></p>
<a href="product_detail.html" class="title">You think water</a><br/>
<a href="products.html" class="category">World once</a>
<p class="price">$10.45</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/ladies/8.jpg" /></a></p>
<a href="product_detail.html" class="title">Quis nostrud exerci</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$35.50</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="span12">
<h4 class="title">
<span class="pull-left"><span class="text"><span class="line">Latest <strong>Products</strong></span></span></span>
<span class="pull-right">
<a class="left button" href="#myCarousel-2" data-slide="prev"></a><a class="right button" href="#myCarousel-2" data-slide="next"></a>
</span>
</h4>
<div id="myCarousel-2" class="myCarousel carousel slide">
<div class="carousel-inner">
<div class="active item">
<ul class="thumbnails">
<li class="span3">
<div class="product-box">
<span class="sale_tag"></span>
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware2.jpg" /></a></p>
<a href="product_detail.html" class="title">Ut wisi enim ad</a><br/>
<a href="products.html" class="category">Commodo consequat</a>
<p class="price">$25.50</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware1.jpg" /></a></p>
<a href="product_detail.html" class="title">Quis nostrud exerci tation</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$17.55</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware6.jpg" /></a></p>
<a href="product_detail.html" class="title">Know exactly turned</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$25.30</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware5.jpg" /></a></p>
<a href="product_detail.html" class="title">You think fast</a><br/>
<a href="products.html" class="category">World once</a>
<p class="price">$25.60</p>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware4.jpg" /></a></p>
<a href="product_detail.html" class="title">Know exactly</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$45.50</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware3.jpg" /></a></p>
<a href="product_detail.html" class="title">Ut wisi enim ad</a><br/>
<a href="products.html" class="category">Commodo consequat</a>
<p class="price">$33.50</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware2.jpg" /></a></p>
<a href="product_detail.html" class="title">You think water</a><br/>
<a href="products.html" class="category">World once</a>
<p class="price">$45.30</p>
</div>
</li>
<li class="span3">
<div class="product-box">
<p><a href="product_detail.html"><img src="themes/images/cloth/bootstrap-women-ware1.jpg" /></a></p>
<a href="product_detail.html" class="title">Quis nostrud exerci</a><br/>
<a href="products.html" class="category">Quis nostrud</a>
<p class="price">$25.20</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row feature_box">
<div class="span4">
<div class="service">
<div class="responsive">
<img src="themes/images/feature_img_2.png" />
<h4>MODERN <strong>DESIGN</strong></h4>
<p>Lorem Ipsum is simply dummy text of the printing and printing industry unknown printer.</p>
</div>
</div>
</div>
<div class="span4">
<div class="service">
<div class="customize">
<img src="themes/images/feature_img_1.png" />
<h4>FREE <strong>SHIPPING</strong></h4>
<p>Lorem Ipsum is simply dummy text of the printing and printing industry unknown printer.</p>
</div>
</div>
</div>
<div class="span4">
<div class="service">
<div class="support">
<img src="themes/images/feature_img_3.png" />
<h4>24/7 LIVE <strong>SUPPORT</strong></h4>
<p>Lorem Ipsum is simply dummy text of the printing and printing industry unknown printer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="our_client">
<h4 class="title"><span class="text">Manufactures</span></h4>
<div class="row">
<div class="span2">
<a href="#"><img src="themes/images/clients/14.png"></a>
</div>
<div class="span2">
<a href="#"><img src="themes/images/clients/35.png"></a>
</div>
<div class="span2">
<a href="#"><img src="themes/images/clients/1.png"></a>
</div>
<div class="span2">
<a href="#"><img src="themes/images/clients/2.png"></a>
</div>
<div class="span2">
<a href="#"><img src="themes/images/clients/3.png"></a>
</div>
<div class="span2">
<a href="#"><img src="themes/images/clients/4.png"></a>
</div>
</div>
</section>
<section id="footer-bar">
<div class="row">
<div class="span3">
<h4>Navigation</h4>
<ul class="nav">
<li><a href="./index.html">Homepage</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./contact.html">Contac Us</a></li>
<li><a href="./cart.html">Your Cart</a></li>
<li><a href="./register.html">Login</a></li>
</ul>
</div>
<div class="span4">
<h4>My Account</h4>
<ul class="nav">
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</div>
<div class="span5">
<p class="logo"><img src="themes/images/logo.png" class="site_logo" ></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. the Lorem Ipsum has been the industry's standard dummy text ever since the you.</p>
<br/>
<span class="social_icons">
<a class="facebook" href="#">Facebook</a>
<a class="twitter" href="#">Twitter</a>
<a class="skype" href="#">Skype</a>
<a class="vimeo" href="#">Vimeo</a>
</span>
</div>
</div>
</section>
<section id="copyright">
<span>Copyright 2013 bootstrappage template All right reserved.</span>
</section>
</div>
<script src="themes/js/common.js"></script>
<script src="themes/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "fade",
slideshowSpeed: 4000,
animationSpeed: 600,
controlNav: false,
directionNav: true,
controlsContainer: ".flex-container" // the container that holds the flexslider
});
});
});
</script>
</body>
</html>It is main.css file for home page
@charset "utf-8";
@import url("http://fonts.googleapis.com/css?family=Open+Sans:regular,italic,bold");
/* common
----------------------------------------------------------------------------- */
body{
font-size: 12px;
font-family: 'Open Sans', arial, tahoma, sans-serif;
background:url(../images/bg.png) repeat 0 0 fixed;
}
label, input, button, select, textarea{
font-size: 12px;
}
ul li a,a{
color:#333;
outline:0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a{
color:#eb4800;
}
a:hover{
color:#fd4004;
text-decoration:none;
}
.img-al{
margin: 0 10px 10px 0;
float:left;
}
.img-ar{
margin: 0 0 10px 10px;
float:right;
}
.left{
text-align:left !important;
}
.center{
text-align:center !important;
}
.right{
text-align:right !important;
}
.myCarousel.carousel{
margin-bottom:0;
}
.breadcrumb{
margin:10px -10px 20px -10px;
background-color:#ddd;
}
.breadcrumb{
background:none;
}
.breadcrumb li{
border:0px solid #ddd;
border-radius:30px;
padding:2px 15px 2px 10px;
background-color:#ddd;
margin-right:-23px;
}
.accordion .accordion-heading {
background-color: #eee;
}
.nav-tabs li.active, .accordion .accordion-heading {
font-weight: bold;
font-size: 12px;
}
#wrapper,#top-bar{
background: #fff;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
padding:0px 10px;
}
section.homepage-slider,
section.navbar,
section.google_map,
section#footer-bar,
section#copyright{
margin-left: -10px;
margin-right: -10px;
}
section.header_text{
background:url(../images/bg_h.png) no-repeat bottom;
text-align:center;
padding:15px 0 20px 0;
font-size:16px;
line-height:30px;
border-bottom:1px solid #fff;
}
section.homepage-slider{
border-bottom:1px dotted #eb4800;
padding-bottom:1px;
position: relative;
top:0;
z-index:99;
border-bottom:2px solid #ddd;
background-color:#efeeed;
min-height:100px;
}
section.homepage-slider div.intro{
position:absolute;
top:20%;
left:7%;
opacity:.7;
}
section.homepage-slider h1{
background-color:#eb4800;
color:#fff;
padding:2px 7px;
font-size:30px;
text-transform:uppercase;
float:left;
width:auto;
}
section.homepage-slider p{
overflow:hidden;
width:100%;
margin-bottom:2px;
}
section.homepage-slider span{
background-color:#fff;
color:#000;
padding:2px 10px;
line-height:30px;
font-size:28px;
float:left;
width:auto;
}
section.header_text.sub{
font-size:14px;
margin-bottom:40px;
}
section.header_text.sub h4{
text-transform:uppercase;
margin:0;
}
iframe{
border-bottom:2px solid #eee;
}
/* end common */
/* top bar
----------------------------------------------------------------------------- */
#top-bar{
background-color:#fff;
padding:10px;
margin: 20px auto -22px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#top-bar .user-menu {
margin: 0;
padding: 0;
list-style: none;
}
#top-bar .user-menu li {
display: inline-block;
*display: inline;
zoom: 1;
border-right: 1px solid #eee;
padding: 5px 12px;
}
#top-bar .user-menu li:last-child{
border-right:0;
}
/* footer
----------------------------------------------------------------------------- */
section#footer-bar,
section#copyright{
padding:10px 10px;
}
section#footer-bar{
margin-top:20px;
padding-top:10px;
background-color:#242424;
border-top:1px solid #ddd;
color:#777;
}
section#footer-bar .post {
overflow:hidden;
margin: 0 0 0px 0;
border-bottom:1px dotted #333;
border-top:1px dotted #000;
padding:5px 0;
}
section#footer-bar .post span{
font-size:10px;
}
section#footer-bar .posts .post:first-child{
border-top:0;
}
section#footer-bar .posts .post:last-child{
border-bottom:0;
}
section#footer-bar p.logo{
margin-top:10px;
width:120px;
}
section#footer-bar a{
text-indent:15px;
color:#fff;
}
section#footer-bar a:hover{
color:#999;
text-decoration:underline;
}
section#footer-bar .nav a{
background: url(../images/trigger_right.png) no-repeat 5px 7px;
}
section#footer-bar h4 {
padding: 0;
font-size: 16px;
color: #fff;
font-weight:normal;
margin: 10px 0 18px;
}
section#footer-bar .social_icons a {
display: block;
float: left;
width: 29px;
height: 28px;
text-indent: -9999px;
background-image: url(../images/social-icons.png);
background-repeat: no-repeat;
margin-right: 10px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
section#footer-bar .social_icons a.facebook:hover {
background-position: 0 -29px;
}
section#footer-bar .social_icons a.twitter {
background-position: -38px 0;
}
section#footer-bar .social_icons a.twitter:hover {
background-position: -38px -29px;
}
section#footer-bar .social_icons a.skype {
background-position: -76px 0;
}
section#footer-bar .social_icons a.skype:hover {
background-position: -76px -29px;
}
section#footer-bar .social_icons a.vimeo {
background-position: -115px 0;
}
section#footer-bar .social_icons a.vimeo:hover {
background-position: -115px -29px;
}
section#copyright{
background-color:#111111;
color:#fff;
font-size:10px;
text-transform:uppercase;
}
/* end footer */
/* top navigation
----------------------------------------------------------------------------- */
section.navbar{
margin-bottom:0;
}
.navbar-inner.main-menu {
height: 40px;
padding-left:10px;
padding-right:0;
border-right: 0;
border-left: 0;
border-top: 0;
border-bottom:5px solid #eb4800;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
filter: none;
}
.navbar-inner.main-menu a.logo{
position:absolute;
}
.navbar-inner.main-menu ul ul a{
font-size:13px;
font-weight:normal;
line-height:17px;
text-transform: none;
}
#menu > ul{
display: block;
margin-left:0;
}
#menu > ul > li{
list-style: none;
float: left;
position: relative;
margin-right: 0px;
}
#menu > ul > li > a {
font-size: 11px;
color: #111;
display: block;
text-transform: uppercase;
font-weight: bold;
text-align: center;
padding: 10px 14px;
}
#menu > ul > li.active{
background-color:#eb4800;
}
#menu > ul > li.active > a{
color:#fff;
}
#menu > ul a:hover{
color: #eb4800;
text-decoration:none;
}
#menu .current{color: #eb4800 !important;}
#menu ul ul {
background: none repeat scroll 0 0 #eee;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
padding: 0px;
position: absolute;
min-width:170px;
display:none;
}
#menu > ul > li > ul{
margin-left:10px;
margin-top:-12px;
border:1px solid #ddd;
border-top:0;
}
#menu ul ul li {
list-style: none outside none;
position: relative;
border-top:1px solid #fff;
border-bottom:1px solid #ddd;
}
#menu ul ul li:last-child{
border-bottom: none !important
}
#menu ul ul li.menu-last{border-bottom: none;}
#menu ul ul a{
display: block;
padding:7px 10px;
color: #333;
font-size: 12px;
}
#menu ul ul a:hover,#menu > ul > li:hover > a{color: #fff;background-color:#eb4800}
#menu ul ul a:hover{background-color:#eb4800;}
#menu > ul > li:hover {visibility: inherit;}
#menu li:hover {visibility: inherit;}
#menu li:hover ul,
#menu li.sfHover ul {
left: -10px;
top: 52px;
z-index: 2299;
}
#menu li li:hover ul,
#menu li li.sfHover ul {
left: 130px;
top: 0px;
}
#menu li.sfHover > a{
color:#eb4800;
}
#menu .sf-sub-indicator{
display:none;
}
/* feature box
----------------------------------------------------------------------------- */
.feature_box{
margin-bottom:20px;
}
.feature_box h4{
margin:0 0 10px 0;
font-weight:normal;
}
.feature_box img{
margin-bottom:10px;
background-color:#eb4800;
padding:25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.feature_box .service{
margin-top:3px;
padding:3px;
text-align:center;
}
.feature_box .service:hover{
background-color:#f4f4f4;
}
.feature_box .service:hover img{
-webkit-transition: all 0.7s linear;
-webkit-transform: rotate(6.28rad);
transition: all 0.7s;
transform: rorate(6.28rad);
}
.feature_box .service div{
padding:5px 5px 0 5px;
}
/* end feature box */
/* product box
----------------------------------------------------------------------------- */
.product-box{
text-align:center;
padding-bottom:15px;
position: relative;
background-color:#f8f8f8;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-bottom:1px solid #eee;
}
.product-box span.sale_tag {
background: url(../images/sprites.png) no-repeat scroll 0 0 transparent;
height: 54px;
position: absolute;
width: 55px;
z-index: 100;
top:0;
left:0;
}
.product-box:hover{
background-color:#eb4800;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
box-shadow: 0px 0px 5px #ccc;
}
.product-box:hover a{
color:#fff !important;
}
.product-box img{
overflow:hidden;
}
.product-box a.title{
text-transform:uppercase;
color:#111111;
display:inline-block;
font-weight:bold;
font-size:11px;
margin:15px 0 0px 0;
}
.product-box a.category{
color:#eb4800;
}
.product-box p.price{
font-size:20px;
font-weight:300;
padding:10px 0;
}
/* end product box */
/* title style for h4 tag
----------------------------------------------------------------------------- */
h4.title{
background: url(../images/line_bar.png) 0 8px repeat-x;
padding-bottom:5px;
margin-bottom:15px;
overflow:hidden;
text-transform:uppercase;
font-size:15px;
min-height:27px;
width:100%;
}
h4.title.m{
margin-top:15px;
overflow:hidden;
width:100%;
}
h4.title strong{
color:#eb4800;
}
h4.title span.text{
background-color:#fff;
padding-right:10px;
}
h4.title .left{
background: url(../images/arrow-pleft.png) #eee no-repeat center center;
margin-right:2px;
}
h4.title .right{
background: url(../images/arrow-p.png) #eee no-repeat center center;
}
h4.title .pull-right{
background-color:#fff;
padding-left:10px;
}
h4.title .left,h4.title .right{
display: inline-block;
width: 22px;
height: 22px;
cursor: pointer;
}
h4.title .left:hover,h4.title .right:hover{
background-color:#eb4800;
}
h4.title .button:hover{
text-decoration: none;
}
/* end h4 title style */
/* our clients
----------------------------------------------------------------------------- */
section.our_client{
margin-top:20px;
}
section.our_client .row{
text-align:center;
}
/* end our clients */
.search_form {
margin-bottom:0;
}
.search_form input{
background: url(../images/search.png) #fff no-repeat 97% 6px;
color:#fff;
text-shadow:none;
padding-right:25px;
border:1px solid #eee;
}
#homeTab{
min-height:210px;
}
#homeTab li{
font-size:11px;
}
#homeTab li.active{
font-weight:bold;
}
#homeTab li.active a{
border-top:3px solid #ddd;
}
/* Pricing
----------------------------------------------------------------------------- */
.pricing .plan {
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.2);
box-shadow: 0 0 1px rgba(0,0,0,0.2);
color: #666;
margin-bottom:40px;
overflow: hidden;
-webkit-transition: box-shadow .2s ease-in-out;
-moz-transition: box-shadow .2s ease-in-out;
-ms-transition: box-shadow .2s ease-in-out;
-o-transition: box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
}
.pricing .plan:hover {
box-shadow: 0 0 6px rgba(0,0,0,0.45);
-moz-box-shadow: 0 0 6px rgba(0,0,0,0.45);
-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.45);
}
.pricing .title {
text-align: center;
text-shadow: none;
font-size: 22px;
line-height: 1.5em;
margin: 0;
padding:7px;
background: #111111;
font-weight: 100;
color: #fff;
text-transform:uppercase;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
background-image: -webkit-gradient(linear,0 45%,0 55%,from(rgba(255,255,255,.1)),to(rgba(255,255,255,0)));
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,.1) 45%,rgba(255,255,255,.0) 55%);
}
.pricing p {
margin: 0;
text-align: center;
}
.pricing ul {
list-style-type: none;
margin: 0 0 20px 0;
}
.pricing ul li {
border-bottom: 1px solid #eee;
padding: 6px 0;
font-size: 1.2em;
color: #222;
}
.pricing .price {
border: 1px solid #ccc;
border-bottom: 0;
margin: 0;
text-align: center;
padding: 20px 0;
text-shadow: none;
font-size: 20px;
font-weight:80px;
}
.pricing .well {
border: 1px solid #ccc;
margin-top: 0;
margin-bottom: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
/* Product Detail
----------------------------------------------------------------------------- */
.thumbnails.small {
margin-top: 10px;
}
/* end Product Detail */
/* Block
----------------------------------------------------------------------------- */
.block {
text-align: center;
padding: 7px;
border: 1px solid #ddd;
border-top: 3px solid #eb4800;
-moz-box-shadow: 0 0 3px 0 #ccc;
-webkit-box-shadow: 0 0 3px 0 #ccc;
box-shadow: 0 0 3px 0 #ccc;
margin-bottom: 20px;
}
.small-product {
margin: 0;
padding: 0;
list-style: none;
}
.small-product li {
text-align: left;
border-bottom: 1px dotted #eee;
padding: 5px 0;
font-size:11px;
}
.small-product li img {
width: 50px;
}
.block .carousel{
margin-bottom:-30px;
}
.block h4{
background: url(../images/bg_h.png) no-repeat bottom left;
margin: 0 0 20px 0;
border-bottom:1px solid #eee;
}
/* end Block */
/* Navigation list */
.nav-header{
color:#333;
background: url(../images/bg_h.png) no-repeat bottom left;
margin-bottom:10px;
}
.nav-list li{
text-align:left;
}
.nav-list li a{
background: url(../images/trigger_right.png) transparent no-repeat 5px 8px;
}
.nav-list > .active > a, .nav-list > .active > a:hover{
background-color: transparent;
color:#eb4800;
text-shadow: none;
font-weight: bold;
}
/* Toogle Menu
----------------------------------------------------------------------------- */
._toggleMenu{
margin:0 -10px;
display:none;
background:#eb4800;
}
._toggleMenu a{
color:#fff;
text-indent:10px;
padding:5px 0;
display:block;
width:100%;
}
._toggleMenu ul > li{
text-transform:uppercase;
}
._toggleMenu ul > li > ul > li{
text-transform:none;
}
._toggleMenu a:hover{
color:#fff;
background-color:#df403d !important;
}
._toggleMenu .nav {
margin:0;
padding:0;
}
.toggleMenu {
display:block;
width:100%;
padding:10px 0;
text-align:center;
font-weight:bold;
background:url(../images/i_submenu.png) no-repeat 98% center;
}
._toggleMenu ul > li a.parent{
background:url(../images/i_plus.png) no-repeat 98% center;
}
._toggleMenu .nav ul{
list-style: none;
display:none;
}
._toggleMenu .nav ul ul{
text-transform:none !important;
}
._toggleMenu .nav > li.hover > ul {
display:block;
}
/* Responsive
----------------------------------------------------------------------------- */
@media (max-width: 767px){
#top-bar input{
*padding-right:0 !important;
}
.navbar-inner.main-menu{
border-bottom:0 !important;
}
section.homepage-slider{
display:none;
}
.account.pull-right{
width:100%;
text-align:center;
}
.myCarousel .thumbnails li{
border-bottom:1px solid #eee;
margin-bottom:0;
}
.product-box{
padding-top:10px;
padding-bottom:10px;
}
.product-box:hover{
background-color:#f8f8f8;
}
.product-box:hover a{
color:#333 !important;
}
#menu ul{display: none;}
.navbar-inner.main-menu a.logo{
left:50%;
margin-left:-99px;
}
#copyright,#footer-bar{
padding:0 10px;
}
#footer-bar .nav{overflow:hidden}
#footer-bar .nav li{float:left;}
#footer-bar .nav a:hover{
background-color:transparent;
color:#eb4800;
}
.feature_box .service{
border-bottom:1px solid #eee;
}
}There are more pages like register and products page + i had also used bootstrap to enhance the performance and js .
venereology answered 1 year agoRelated Solutions
Assignment - Store Design and code a HTML/CSS/JS based web application for your online store. Assignment...
Assignment - Store
Design and code a HTML/CSS/JS based web application for your
online store.
Assignment Specification
· Minimum of SIX web pages are required for
this assignment:
§ One Landing/Container Page ( a page with logo)
§ One Home Page
§ Three or more Product Line Pages (pages with product and it
information )
§ One Order Page (for customer to order a product after view the
profuct on the product page)
· Build internal CSS style sheets in...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for
this web page, but there are several errors in the CSS stylesheet.
Use your knowledge of CSS to locate and fix the errors. The body
element should have a width that is 90% of the width of the browser
window ranging from a minimum of 600 pixels up to a maximum of 1024
pixels. Fix the syntax errors in the body style rule that defines
the width of the...
JAVA CODE BEGINNERS, I already have the DEMO CLASS(NEED YOU TO USE), I need you to...
JAVA CODE BEGINNERS, I already have the DEMO CLASS(NEED
YOU TO USE), I need you to use all methods, also switch
statements.
Write a Temperature class. The class will have three conversion
methods: toCelsius(), toKelvin() and toFahrenheit(). These methods
will return a Temperature in those three scales equal to the
this temperature. Note that the value of
this is not changed in these conversions. In
addition to these three conversion methods the class will have
methods add(Temperature), subtract(Temperature),
multiply(Temperature), and...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS
Game Review Website
1. You will write a website for the fictitious company Game
Gurus.
The website will have a home page that you will design, as well as
pages created by each "guru."
(At least 2 gurus are required).
The home page will include:
o A description of the site
o A quote from each guru
o Links to manufacturers websites
o Links to the TopTen.html and GameOfTheWeek.html pages for...
Make sure it works on jsfiddle and keep the code seperate html: css: javascript: -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Make sure it works on jsfiddle
and keep the code seperate
html:
css:
javascript:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Assignment
You should already have some experience with jQuery and some
simple experience with JSON (from charting). In this assignment we
will be creating some JSON data, parsing it, and displaying it.
Step 1 – If you are not familiar with JSON you should complete
the JSON tutorial at w3schools
Step 2- You will now create a JSON file to represent some data
of your...
pls, I need Matlab code for, OFDM modulation (Matlab demo by at least 4 carriers)
pls, I need Matlab code for, OFDM modulation (Matlab demo by at
least 4 carriers)
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...
Make a working good looking webpage (Home page) of a PAYROLL
website using CSS, HTML, and JavaScript
# Sign in/SignUp page should work
# CSS HTML and javaScript should be in separate files
# Add images
# post a picture of your output and code as well
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college
elliott university, this website will consist of at least 4
in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
write php code for buying and selling web using sql, javascript ,html ,css style
write php code for buying and selling web using sql, javascript
,html ,css style
JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I...
JS Bin / Tax Calculator / using HTML | CSS | JavaScript
-------------------------------------------------------------------------------------------
How can I edit the JavaScript below so that when the calculate
button is clicked the total price only shows two decimal places by
using the toFixed() method?
-----------------------------------------------------------------------------------------------------------
JavaScript:
// Variables
var tax = "tax"; // Tax percentage
var taxRate = document.getElementById('tax'); // Selecting tax
element
// On the time of loading the DOM we are setting the tax
rate
window.addEventListener('DOMContentLoaded', (event) => {
taxRate.value =...
ADVERTISEMENT
ADVERTISEMENT
Latest Questions
- The table lists the monthly total returns on Adobe Systems Inc. common stock and the market...
- Describe the characteristics of an effective management accounting report
- For the most recent fiscal year, book value of long-term debt at Schlumberger was $11962 million....
- Consider the contribution of the Romans to modern day water and wastewater engineering practice. Provide a...
- Find numerical examples of energy usage and thermodynamic computations of efficiency. Use the web to compare...
- The difference between a Roth IRA and a traditional IRA is that in a Roth IRA...
- Identify the three major stages of data analysis and indicate what specific things a researcher typically...
ADVERTISEMENT