Browse Source

Store page

master
sipp11 10 years ago
parent
commit
1dfe320a99
  1. 105
      css/dashboard.css
  2. 138
      css/store.css
  3. 18
      html/product.html
  4. 195
      html/store.html

105
css/dashboard.css

@ -0,0 +1,105 @@
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}

138
css/store.css

@ -0,0 +1,138 @@
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}

18
html/product.html

@ -69,9 +69,9 @@
<div class="page-header" id="banner"> <div class="page-header" id="banner">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h1><i class="fa fa-shopping-cart"></i> Lego</h1> <h1><i class="fa fa-shield fa-rotate-270"></i> Lego</h1>
<ul class="list-inline text-right"> <ul class="list-inline text-right">
<li><a href="#"><i class="fa fa-heart"></i> add to wish list</a></li> <li><a href="wishlist.html"><i class="fa fa-heart"></i> add to wish list</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> mail</a></li> <li><a href="#"><i class="fa fa-envelope"></i> mail</a></li>
<li><a href="#"><i class="fa fa-print"></i> print</a></li> <li><a href="#"><i class="fa fa-print"></i> print</a></li>
</ul> </ul>
@ -92,7 +92,7 @@
<h2>Lego minifigures</h2> <h2>Lego minifigures</h2>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-7">
<h1>$12</h1> <h1>$12</h1>
<label>Qty: <input class="form-control" type="text" value="1"></label> <label>Qty: <input class="form-control" type="text" value="1"></label>
<br/> <br/>
@ -104,6 +104,16 @@
<li>Buy with another Lego: 5% off</li> <li>Buy with another Lego: 5% off</li>
</ul> </ul>
</div> </div>
<div class="col-lg-5">
<div class="panel panel-info">
<div class="panel-heading"><h3 class="panel-title">Seller</h3></div>
<div class="panel-body">
<a href="#">Minion Corp. <i class="fa fa-check-circle text-info"></i></a>
<p><span class="label label-success">99.99%</i></span> Positive Feedback</p>
<a href="store.html"><i class="fa fa-building-o"></i> Store</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -178,7 +188,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4 well">
<h4>Related Products:</h4> <h4>Related Products:</h4>
<div class="media"> <div class="media">

195
html/store.html

@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home | Seeker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/lumen.min.css" media="screen">
<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css" media="screen">
<link rel="stylesheet" href="../css/dashboard.css" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
<script src="../bower_components/respond/dest/respond.min.js"></script>
<![endif]-->
<style>
.placeholder img {
display: inline-block;
border-radius: 5%;
}
.navbar-default {
background-color: rgba(248, 248, 248, 0.9);
border-color: rgba(231, 231, 231, 0.9);
}
body {
color: #4FB0AE;
}
.container a:hover { text-decoration: none; }
.image-wrapper {
display: block;
margin-bottom: 8px;
}
.image-wrapper {
position: relative;
overflow: hidden;
float: left;
display: inline;
}
.kink .headline-wrapper {
float: left;
position: relative;
display: block;
width: 180px;
min-height: 40px;
margin: -55px 144px 0px 0px;
padding: 5px;
background-color: rgba(255, 255, 255, 0.8);
font-size:2em;
color: black;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Seeker</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="wishlist.html"><i class="fa fa-heart-o"></i> Wish List</a></li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><i class="fa fa-shopping-cart"></i> Cart</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">You <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Account</a></li>
<li><a href="#"><i class="fa fa-inbox"></i> Inbox</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="kink" href="#">
<span class="image-wrapper">
<img src="../vendor/holderjs/holder.js/200x200/#c9ede2:#a0bdb4"
class="img-responsive" alt="">
</span>
<span class="headline-wrapper">Minion Corp.</span>
</div>
<div class="clearfix"></div>
<ul class="nav nav-sidebar">
<li class="active"><a href="#">เสอผ</a></li>
<li><a href="#">ของเล</a></li>
<li><a href="#">เฟอรเจอร</a></li>
<li><a href="#">คอมพวเตอร</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header"><i class="fa fa-building"></i>านของ Minion Corp.</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/sky" class="img-responsive" alt="200x200">
<h4>LEGO® minifigures</h4>
<span class="text-muted">Who doesn't love LEGO®</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/vine" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/sky" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/vine" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
</div>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/sky" class="img-responsive" alt="200x200">
<h4>LEGO® minifigures</h4>
<span class="text-muted">Who doesn't love LEGO®</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/vine" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/sky" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<a href="product.html">
<img src="../vendor/holderjs/holder.js/200x200/auto/vine" class="img-responsive" alt="200x200">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</a>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-12 text-center">
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="fa fa-2x fa-long-arrow-left"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-2x fa-long-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../vendor/holderjs/holder.js"></script>
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Loading…
Cancel
Save