Skip to content

Instantly share code, notes, and snippets.

@wgminer

wgminer/index.html

Created July 11, 2014 14:27
Show Gist options
  • Save wgminer/e9cfc5b4d730cc81c5f0 to your computer and use it in GitHub Desktop.
Save wgminer/e9cfc5b4d730cc81c5f0 to your computer and use it in GitHub Desktop.
Download ZIP
UXI-435 Code
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrap">
<div class="halves">
<h3>Option A</h3>
<div class="nav">
<div class="toggle-button">
<button><i class="fa fa-phone"></i></button>
<button><i class="fa fa-edit"></i></button>
</div>
<ul>
<li class="title">Portal</li>
<li><a href=""><i class="fa fa-home"></i> Feed</a></li>
<li class="title spacer">Information</li>
<li><a href=""><i class="fa fa-check-square-o"></i> Admissions</a></li>
<li><a href=""><i class="fa fa-university"></i> Academics</a></li>
<li><a href=""><i class="fa fa-rss"></i> Blog</a></li>
<li><a href=""><i class="fa fa-clock-o"></i> Upcoming Events</a></li>
<li><a href=""><i class="fa fa-users"></i> Students & Alumni</a></li>
<li class="title spacer">Data Science @ Berkeley</li>
<li><a href=""><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href=""><i class="fa fa-youtube-play"></i> YouTube</a></li>
<li><a href=""><i class="fa fa-google-plus"></i> Google+</a></li>
<li><a href=""><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li class="title spacer">UC Berkeley</li>
<li><a href=""><i class="fa fa-university"></i> University Home</a></li>
<li><a href=""><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href=""><i class="fa fa-youtube-play"></i> YouTube</a></li>
<li><a href=""><i class="fa fa-google-plus"></i> Google+</a></li>
<li><a href=""><i class="fa fa-linkedin"></i> LinkedIn</a></li>
</ul>
</div>
</div>
<div class="halves">
<h3>Option B</h3>
<div class="nav no-padding">
<div class="toggle-button">
<button><i class="fa fa-phone"></i></button>
<button><i class="fa fa-edit"></i></button>
</div>
<ul>
<li class="title spacer">Data Science @ Berkeley</li>
<li><a href=""><i class="fa fa-home"></i> Feed</a></li>
<li><a href=""><i class="fa fa-university"></i> Academics</a></li>
<li><a href=""><i class="fa fa-check-square-o"></i> Admissions</a></li>
<li><a href=""><i class="fa fa-rss"></i> Blog</a></li>
<li><a href=""><i class="fa fa-clock-o"></i> Upcoming Events</a></li>
<li><a href=""><i class="fa fa-users"></i> Students & Alumni</a></li>
<li class="line"></li>
<li class="grid">
<a href=""><i class="fa fa-facebook"></i> <span class="sr-only">Facebook</span></a>
<a href=""><i class="fa fa-twitter"></i> <span class="sr-only">Twitter</span></a>
<a href=""><i class="fa fa-youtube-play"></i> <span class="sr-only">YouTube</span></a>
<a href=""><i class="fa fa-google-plus"></i> <span class="sr-only">Google+</span></a>
<a href=""><i class="fa fa-linkedin"></i> <span class="sr-only">LinkedIn</span></a>
</li>
<li class="title spacer">UC Berkeley</li>
<li><a href=""><i class="fa fa-university"></i> Academics</a></li>
<li><a href=""><i class="fa fa-rss"></i> Blog</a></li>
<li class="line"></li>
<li class="grid">
<a href=""><i class="fa fa-facebook"></i> <span class="sr-only">Facebook</span></a>
<a href=""><i class="fa fa-twitter"></i> <span class="sr-only">Twitter</span></a>
<a href=""><i class="fa fa-youtube-play"></i> <span class="sr-only">YouTube</span></a>
<a href=""><i class="fa fa-google-plus"></i> <span class="sr-only">Google+</span></a>
<a href=""><i class="fa fa-linkedin"></i> <span class="sr-only">LinkedIn</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="sprites">
<img src="images/sprites.png" alt="">
</div>
<div class="font-awesome">
<div class="box">
<i class="fa fa-home"></i>
<span>.fa-home</span>
</div>
<div class="box">
<i class="fa fa-list"></i>
<span>.fa-list</span>
</div>
<div class="box">
<i class="fa fa-calendar"></i>
<span>.fa-calendar</span>
</div>
<div class="box">
<i class="fa fa-check-square-o"></i>
<span>.fa-check-square-o</span>
</div>
<div class="box">
<i class="fa fa-university"></i>
<span>.fa-university</span>
</div>
<div class="box">
<i class="fa fa-rss"></i>
<span>.fa-rss</span>
</div>
<div class="box">
<i class="fa fa-users"></i>
<span>.fa-users</span>
</div>
<div class="box">
<i class="fa fa-facebook"></i>
<span>.fa-facebook</span>
</div>
<div class="box">
<i class="fa fa-twitter"></i>
<span>.fa-twitter</span>
</div>
<div class="box">
<i class="fa fa-youtube-play"></i>
<span>.fa-youtube-play</span>
</div>
<div class="box">
<i class="fa fa-question"></i>
<span>.fa-question</span>
</div>
<div class="box">
<i class="fa fa-gear"></i>
<span>.fa-gear</span>
</div>
<div class="box">
<i class="fa fa-circle"></i>
<span>.fa-circle</span>
</div>
<div class="box">
<i class="fa fa-caret-up"></i>
<span>.fa-caret-up</span>
</div>
<div class="box">
<i class="fa fa-reply"></i>
<span>.fa-reply</span>
</div>
<div class="box">
<i class="fa fa-check"></i>
<span>.fa-check</span>
</div>
<div class="box">
<i class="fa fa-power-off"></i>
<span>.fa-power-off</span>
</div>
<div class="box">
<i class="fa fa-clock-o"></i>
<span>.fa-clock-o</span>
</div>
<div class="box">
<i class="fa fa-list-ul"></i>
<span>.fa-list-ul</span>
</div>
<div class="box">
<i class="fa fa-phone"></i>
<span>.fa-phone</span>
</div>
<div class="box">
<i class="fa fa-comments"></i>
<span>.fa-comments</span>
</div>
<div class="box">
<i class="fa fa-edit"></i>
<span>.fa-edit</span>
</div>
<div class="box">
<i class="fa fa-bars"></i>
<span>.fa-bars</span>
</div>
</div>
</div>
</body>
</html>
Raw
main.less
@import "../../bower_components/font-awesome/less/font-awesome.less";
@fa-font-path: "../fonts";
body {
background-color: #fff;
font-family: "Helvetica Neue", arial, sans-serif;
font-weight: 400;
font-size: 14px;
color: #444;
padding: 20px 0 40px;
}
* {
box-sizing: border-box;
}
h3 {
text-align: center;
}
.wrap {
width: 1200px;
margin: 0 auto 60px;
overflow: hidden;
}
.halves {
padding: 0 15px;
width: 100% / 2;
float: left;
&.wide {
width: 600px;
}
}
.nav {
background-color: #F0F0F0;
padding: 15px;
border: 1px solid #ccc;
margin: 0 auto;
width: 240px;
&.no-padding {
padding: 0;
.toggle-button {
padding: 15px 15px 0;
}
li {
padding: 0 15px;
}
.grid {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0;
a {
border-radius: 0;
}
}
ul {
margin-bottom: -31px;
}
}
}
.toggle-button {
overflow: hidden;
margin-bottom: 10px;
button {
cursor: pointer;
border: 1px solid #ccc;
background-color: #d9d9d9;
border-radius: 0 4px 4px 0;
float: left;
padding: 4px 0;
width: 50%;
font-size: 24px;
&:first-child {
border-radius: 4px 0 0 4px;
background-color: #003a70;
border-color: #002d57;
color: #fff;
}
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
li {
font-weight: 700;
&.title {
color: #666;
font-size: 11px;
padding: 7px 0;
text-transform: uppercase;
margin-bottom: 5px;
&:hover {
background-color: transparent;
cursor: default;
}
}
&.spacer {
margin-top: 10px;
}
&.line {
margin: 10px 0;
}
&.grid {
overflow: hidden;
margin-bottom: 30px;
a {
width: (100%)/5;
height: 40px;
text-align: center;
line-height: 40px;
float: left;
padding: 0;
i {
display: block;
line-height: 40px;
text-align: center;
position: static;
}
}
}
}
a {
padding: 7px 10px 7px 30px;
position: relative;
border-radius: 3px;
cursor: pointer;
display: block;
text-decoration: none;
color: #444;
&:hover {
background-color: #e4e4e4;
i {
color: #444;
}
}
i {
color: #999;
position: absolute;
font-size: 16px;
left: 5px;
}
}
.sr-only {
display: none;
}
.sprites {
float: left;
width: 450px;
text-align: center;
padding-top: 40px;
}
.font-awesome {
float: left;
width: 750px;
.box {
float: left;
text-align: center;
width: 125px;
padding: 15px 0;
i {
display: block;
font-size: 24px;
margin-bottom: 10px;
}
p {
font-family: monospace;
margin: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment