Skip to content

Instantly share code, notes, and snippets.

@alacritythief

alacritythief/comment.html

Created August 18, 2014 20:08
Show Gist options
  • Save alacritythief/f8a29637ac8f22ea30bb to your computer and use it in GitHub Desktop.
Save alacritythief/f8a29637ac8f22ea30bb to your computer and use it in GitHub Desktop.
Download ZIP
Slacker News Challenge
Raw
comment.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slacker News</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div class="nav">
<ul>
<li id="fcombo">
<a href="#">F</a>
</li>
<li id="title">
<a href="/index.html">Slacker News</a>
</li>
<li>
<a href="#">new</a>
</li>
<li> | </li>
<li>
<a href="#">comments</a>
</li>
<li> | </li>
<li>
<a href="#">show</a>
</li>
<li> | </li>
<li>
<a href="#">ask</a>
</li>
<li> | </li>
<li>
<a href="#">jobs</a>
</li>
<li> | </li>
<li>
<a href="#">submit</a>
</li>
<li id="login">
login
</li>
</ul>
</div>
<div class="articles">
<ol>
<li>
<p><a href="#">Firebase Leaves Beta Today</a> (firebase.com)</p>
<p class="comment">63 points by <a href="#">lyime 56</a> minutes ago | <a href="#">17 comments</a></p>
<p><textarea cols="70" rows="8"></textarea></p>
<p><input type="submit" value="add comment"></p>
</li>
</ol>
</div>
<div class="comments">
<p class="comment">sanicthehedgehog 1 hour ago | link</p>
<p>Gotta go fast</p>
</div>
<div class="footer">
<a href="#">Guidelines</a> | <a href="#">FAQ</a> | <a href="#">Lists</a> | <a href="#">Bookmarklet</a> | <a href="#">DMCA</a> | <a href="#">News News</a> | <a href="#">Bugs and Feature Requests</a> | <a href="#">Y Combinator</a> | <a href="#">Apply</a> | <a href="#">Library</a> | <a href="#">Contact</a>
<br>
</div>
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slacker News</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div class="nav">
<ul>
<li id="fcombo">
<a href="#">F</a>
</li>
<li id="title">
<a href="/index.html">Slacker News</a>
</li>
<li>
<a href="#">new</a>
</li>
<li> | </li>
<li>
<a href="#">comments</a>
</li>
<li> | </li>
<li>
<a href="#">show</a>
</li>
<li> | </li>
<li>
<a href="#">ask</a>
</li>
<li> | </li>
<li>
<a href="#">jobs</a>
</li>
<li> | </li>
<li>
<a href="#">submit</a>
</li>
<li id="login">
login
</li>
</ul>
</div>
<div class="articles">
<ol>
<li>
<p><a href="https://www.firebase.com/blog/2013-08-15-firebase-leaves-beta-today.html">Firebase Leaves Beta Today</a> (firebase.com)</p>
<p class="comment">63 points by <a href="#">lyime 56</a> minutes ago | <a href="/comment.html">17 comments</a></p>
</li>
<li>
<p><a href="http://fitzgeraldnick.com/weblog/50/">Destructuring Assignment in ECMAScript 6</a> (fitzgeraldnick.com)</p>
<p class="comment">40 points by <a href="#">mnemonik</a> 49 minutes ago | <a href="/comment.html">5 comments</a></p>
</li>
<li>
<p><a href="https://stripe.com/blog/introducing-stripe-uk">Introducing Stripe UK</a> (stripe.com)</p>
<p class="comment">230 points by <a href="#">woodrow</a> 4 hours ago | <a href="/comment.html">118 comments</a></p>
</li>
<li>
<p><a href="http://ragnard.github.io/2013/08/12/datomic-in-the-browser.html">Datomic in the browser</a> (ragnard.github.io)</p>
<p class="comment">47 points by <a href="#">brucehauman</a> 2 hours ago | <a href="/comment.html">1 comment</a></p>
</li>
<li>
<p><a href="https://developers.facebook.com/blog/post/2013/08/15/summary-of-the-august-13th-app-outage/">Facebook App Outage Postmortem</a> (facebook.com)</p>
<p class="comment">15 points by <a href="#">lacker</a> 32 minutes ago | <a href="/comment.html">2 comments</a></p>
</li>
<li>
<p><a href="http://techcrunch.com/2013/08/15/inks-new-mobile-framework-lets-ios-apps-talk-to-each-other-share-data-you-know-like-on-android/">Ink (YC S12) Releases New iOS Layer That Allows Apps to Interact, Share Data</a> (techcrunch.com)</p>
<p class="comment">19 points by <a href="#">betojuareziii</a> 1 hour ago | <a href="/comment.html">13 comments</a></p>
</li>
<li>
<p><a href="http://www.lettersofnote.com/2013/07/its-real-thing.html?m=1">It's the real thing</a> (lettersofnote.com)</p>
<p class="comment">75 points by <a href="#">ezl</a> 3 hours ago | <a href="/comment.html">44 comments</a></p>
</li>
<li>
<p><a href="http://firstround.com/article/The-anatomy-of-the-perfect-technical-interview-from-a-former-Amazon-VP">The anatomy of the perfect technical interview from a former Amazon VP </a> (firstround.com)</p>
<p class="comment">55 points by <a href="#">jnazario</a> 3 hours ago | <a href="/comment.html">26 comments</a></p>
</li>
<li>
<p><a href="http://www.washingtonpost.com/blogs/ask-the-post/wp/2013/08/15/editors-note/">The Washington Post Web site was hacked today</a> (washingtonpost.com)</p>
<p class="comment">34 points by <a href="#">selamattidur</a> 2 hours ago | <a href="/comment.html">26 comments</a></p>
</li>
<li>
<p><a href="http://stackoverflow.com/questions/16159203/why-does-this-java-program-terminate-despite-that-appears-that-it-shouldt-and">Why does this Java program terminate despite appearing that it shouldn't?</a> (stackoverflow.com)</p>
<p class="comment">88 points by <a href="#">patmcguire</a> 3 hours ago | <a href="/comment.html">83 comments</a></p>
</li>
</ol>
<p id="more"><a href="#">More</a></p>
</div>
<div class="footer">
<a href="#">Guidelines</a> | <a href="#">FAQ</a> | <a href="#">Lists</a> | <a href="#">Bookmarklet</a> | <a href="#">DMCA</a> | <a href="#">News News</a> | <a href="#">Bugs and Feature Requests</a> | <a href="#">Y Combinator</a> | <a href="#">Apply</a> | <a href="#">Library</a> | <a href="#">Contact</a>
<br>
<p>Search: <input type="textarea" name="search"></p>
</div>
</div>
</body>
</html>
Raw
styles.css
body {
margin: 0;
padding: 0;
font-family: 'verdana';
font-size: 13px;
}
#container {
width: 85%;
background: #f0f0f0;
margin: 10px auto;
height: auto;
}
ol,li {
margin: 0;
padding: 0;
}
ol {
counter-reset: foo;
display: table;
}
li {
list-style: none;
counter-increment: foo;
display: table-row;
}
ol li::before {
content: counter(foo) ".";
display: table-cell;
text-align: right;
padding-right: .3em;
}
#login {
float: right;
padding-right: 2px;
}
.nav {
background: #ff55cc;
height: 23px;
line-height: 23px;
padding: 0 2px;
}
.nav #title {
font-weight: bold;
font-size: 14px;
margin-left: -1px;
}
.nav #fcombo a {
color: #fff;
font-size: 14px;
border-style: solid;
border-width: 1px;
padding: 0 5px 0 5px;
}
.nav ul {
margin: 0; padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
margin: 0; padding: 0;
}
.articles {
padding-top: 5px;
padding-left: 3px;
line-height: 10%;
}
.articles ol {
}
.articles li {
color: #666;
}
.articles #more {
margin-left: 25px;
}
.comment {
font-size: 10px;
}
.comment a {
color: #666;
}
.comment a:hover {
text-decoration: underline;
}
a {
text-decoration: none;
color: #000;
}
.footer {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff55cc;
text-align: center;
padding: 5px 0;
font-size: 12px;
color: #666;
}
.footer p {
font-size: 14px;
}
.comments {
padding-left: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment