Created
July 11, 2014 14:27
-
-
Save wgminer/e9cfc5b4d730cc81c5f0 to your computer and use it in GitHub Desktop.
UXI-435 Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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