Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/index.html

Created August 11, 2016 12:35
Show Gist options
  • Save mattborn/90e7089c22af619083c7bd90d09fec40 to your computer and use it in GitHub Desktop.
Save mattborn/90e7089c22af619083c7bd90d09fec40 to your computer and use it in GitHub Desktop.
Download ZIP
UI Now timeboxed experiment
Raw
index.html
<!doctype html>
<html>
<head>
<title>UI Now 1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="topnav">
<div id="topnavleft">
<span class="fa fa-bars"></span>
Channels
</div>
<div id="topnavcenter">N</div>
<div id="topnavright">
<span class="fa fa-first-order"></span>
<span class="fa fa-search"></span>
<img src="http://placebear.com/40/40">
<span class="fa fa-bookmark"></span>
</div>
</div>
<div id="hero">
<h1>Science Channel</h1>
<div>Following</div>
<p>234k Following</p>
<div>
<img src="http://placebear.com/40/40">
<img src="http://placebear.com/40/40">
<img src="http://placebear.com/40/40">
<img src="http://placebear.com/40/40">
<img src="http://placebear.com/40/40">
</div>
</div>
<div id="cells">
<div>
<div class="cell">
Astronauts could…
</div>
<div class="cell">
<img src="http://placebear.com/300/225">
</div>
<div class="cell">
The ballons…
</div>
<div class="cell">
<img src="http://placebear.com/300/225">
</div>
</div>
<div>
<div class="cell">
<img src="http://placebear.com/300/225">
</div>
<div class="cell">
Achaeologists…
</div>
<div class="cell">
<img src="http://placebear.com/300/225">
</div>
<div class="cell">
Magma…
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
body {
color: #444;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif; /* smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide */
-webkit-font-smoothing: antialiased;
line-height: 1;
}
#topnav {
background: orange;
color: white;
display: flex;
flex: 0 0 70px;
justify-content: space-between;
align-items: center;
}
#topnavleft {}
#topnavcenter {}
#topnavright {
display: flex;
align-items: center;
}
#hero {
background: #234;
color: #fff;
padding: 100px 50px 20px;
text-align: center;
flex: 1;
}
#hero > div:nth-child(2) {
background: #fff;
border-radius: 20px;
color: orange;
display: inline-block;
line-height: 20px;
margin: 0 0 40px;
padding: 10px 20px;
}
#hero img {
border-radius: 50%;
margin: 5px;
}
#cells {
flex: 1;
}
#cells > div {
display: flex;
}
.cell {
align-items: center;
display: flex;
flex: 0 0 25%;
}
#cells > div:first-child > .cell:nth-child(odd),
#cells > div:last-child > .cell:nth-child(even) {
padding: 20px;
text-align: center;
}
img {
max-width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment