Skip to content

Instantly share code, notes, and snippets.

@marsp0

marsp0/dabblet.css

Created August 22, 2014 11:12
Show Gist options
  • Save marsp0/2236c794a6142bd63a9c to your computer and use it in GitHub Desktop.
Save marsp0/2236c794a6142bd63a9c to your computer and use it in GitHub Desktop.
Download ZIP
BODY
Raw
dabblet.css
body {
color: black;
font-family: Futura;
width: 80%;
margin: 0 auto;
}
a {
color: white;
text-decoration: none;
}
ul {
list-style: none;
}
.navigation {
height: 64px;
margin-top: 1%;
background-color: #454545;
}
.navigation ul {
display: inline;
}
.navigation ul li {
float: left;
padding:20px 12px 15px 18px;
}
.navigation ul li span {
padding: 7px;
}
.navigation ul li:hover span {
border-bottom: 1px solid #7fe82e;
}
/* BODY */
.container {
border: 1px solid #5e5e5e;
min-height: 600px;
margin-top: 1%;
display: block;
}
/* CART */
.cart {
border: 1px solid #5e5e5e;
height: 70px;
width: 25%;
margin-top: 2%;
border-left: none;
box-shadow: 5px 5px 10px #888;
}
.cart-header {
border-bottom: 1px solid #fff;
min-height: 25px;
background-color: #525252
}
.cart-body {
height: 45px;
}
.cart-body ul {
display: inline-block;
background-color: green;
}
.cart-body ul li {
padding: 5px;
float: left
}
.sidebar {
box-shadow: 5px 5px 10px #888;
float: left;
border: 1px solid #5e5e5e;
min-height: 300px;
width: 23%;
margin-left: 2%;
margin-top: 2%;
}
.featured {
box-shadow: 5px 5px 10px #888;
border: 1px solid #5e5e5e;
min-height: 200px;
width: 71%;
float: right;
margin-right: 2%;
margin-top: -7.5%;
}
.new-arrivals {
box-shadow: 5px 5px 10px #888;
border: 1px solid #5e5e5e;
min-height: 200px;
width: 71%;
float: right;
margin-right: 2%;
margin-top: 2%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…<body>-->
<div class='navigation'>
<ul id='navbar'>
<li ><a href="/"><span>Home</span></a></li>
<li ><a href="#"><span><span>Browse Store</span></span></a></li>
<li ><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy</span></a></li>
<li><a href="#"><span>Account</span></a>
<!--<ul id='dropdown'>
{%if user.is_authenticated%}
<li><a href="#"><span>Profile</span></a><li>
<li><a href="#"><span>Wishlist</span></a><li>
<li><a href="#"><span>Log Out</span></a><li>
{%else%}
<li><a href="#"><span>Sign In</span></a><li>
<li><a href="#"><span>Sign Up</span></a><li>
{%endif%}
</ul>-->
</li>
</ul>
</div>
<div class='container'>
<div class='cart'>
<div class='cart-header'>
</div>
<div class='cart-body'>
<ul>
<li>Cost: 1200.00 </li>
<li>Products: 3 </li>
</ul>
</div>
</div>
<div class='sidebar'>
<div class='sidebar-header'>
</div>
<div class='sidebar-body'>
</div>
</div>
<div class='featured'>
<div class='featured-header'>
</div>
<div class='featured-body'>
</div>
</div>
<div class='new-arrivals'>
<div class='new-header'>
</div>
<div class='new-body'>
</div>
</div>
</div>
</body></body> -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment