Skip to content

Instantly share code, notes, and snippets.

@adaam2

adaam2/jsbin.sifofale.css

Created July 15, 2014 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adaam2/519665cb83b3d0a1faf2 to your computer and use it in GitHub Desktop.
Save adaam2/519665cb83b3d0a1faf2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.sifofale.css
* {
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.wholePageWrapper {
width:960px;
}
.notificationBanner {
background:#FDF7BD;
width:100%;
padding:25px;
text-align:center;
font-weight:bold;
font-family:Arial,sans-serif;
color:#7EADDE;
}
.slider {
width:100%;
margin-top:15px;
height:300px;
background:#E8E8E8;
background-image:url('http://placehold.it/960x300');
}
.bottomWrapper {
width:100%;
margin-left: 5%;
margin-right: 5%;
}
.individualPanel {
display:inline-block;
width:30%;
}
.individualPanel .content {
border:1px solid #e2e2e2;
}
.individualPanel .content ul {
list-style:none;
margin:0;
padding:0;
}
.individualPanel .content ul li {
display:block;
padding:10px;
}
.individualPanel .content ul li a {
color:#8DBEEC;
}
.individualPanel .content ul li:nth-child(odd) {
background:#F8F8F8;
}
.individualPanel .content ul li:nth-child(even) {
background:#F2F2F2;
}
.title {
background:#333333;
text-align:center;
height:50px;
line-height:50px;
}
.title h2 {
font-weight:bold;
color:#fff;
font-size:1.1em;
font-weight:200;
text-transform:uppercase;
font-family:Arial,sans-serif;
white-space:nowrap;
}
Raw
jsbin.sifofale.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wholePageWrapper">
<div class="notificationBanner">
NOTIFICATION TITLE GOES HERE
</div>
<div class="slider">
</div>
<div class="bottomWrapper">
<div class="individualPanel">
<div class="title">
<h2>New Products</h2>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="individualPanel">
<div class="title">
<h2>New Images</h2>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="individualPanel">
<div class="title">
<h2>Latest Promotions</h2>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment