Skip to content

Instantly share code, notes, and snippets.

@adaam2

adaam2/jsbin.sifofale.css

Created July 15, 2014 18:57
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/beb793c0e423a6bcb24c to your computer and use it in GitHub Desktop.
Save adaam2/beb793c0e423a6bcb24c 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;
}
.arrowRight {
color:#6094C9;
position:absolute;
top: 0px;
right: 15px;
font-size:2em;
}
.slider {
width:100%;
margin-top:15px;
height:300px;
background:#E8E8E8;
background-image:url('http://placehold.it/960x300');
}
.bottomWrapper {
width:100%;
margin-left: 30px;
margin-right: 30px;
}
.individualPanel {
display:inline-block;
width:30%;
margin:0.5%;
}
.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;
position:relative;
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>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
</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>
<span class="arrowRight">
<i class="fa fa-angle-right"></i>
</span>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="individualPanel">
<div class="title">
<h2>New Images</h2>
<span class="arrowRight">
<i class="fa fa-angle-right"></i>
</span>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="individualPanel">
<div class="title">
<h2>Latest Promotions</h2>
<span class="arrowRight">
<i class="fa fa-angle-right"></i>
</span>
</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