Skip to content

BCN will-thorp #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

BCN will-thorp #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
320f85a
Update index.html
willjthorp Aug 20, 2017
c709aaf
Update styles.scss
willjthorp Aug 20, 2017
4f8c76c
Update index.html
willjthorp Aug 20, 2017
6accb7d
Update and rename styles.scss to styles.css
willjthorp Aug 21, 2017
45df1e4
Update index.html
willjthorp Aug 21, 2017
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 238 additions & 1 deletion starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,246 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Lab | Responsive Cloning | Product Hunt</title>
<link rel="stylesheet" href="styles.min.css">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
</head>
<body>

<header>
<div class="header-wrapper">
<div class="header-top">
<div class="logo-container">
<a href="#"><img class="logo" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/logo.png?raw=true" alt="logo.png" /></a>
</div>
<form>
<input class="search-bar" type="text" placeholder="Discover your next favourite thing...">
</form>
<h3><a href="#">Login</a></h3>
</div>
<div class="header-bottom">
<ul class="list">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Tech</li>
</a>
<a href="#">
<li>Games</li>
</a>
<a href="#">
<li>Podcasts</li>
</a>
<a href="#">
<li>Books</li>
</a>
<a href="#">
<li>Bots</li>
</a>
<a href="#">
<li>Developer Tools</li>
</a>
<a href="#">
<li>iMessage Apps</li>
</a>
<a href="#">
<li>iPhone</li>
</a>
<a href="#">
<li>Photography tools</li>
</a>
</ul>
<div class="arrows">
<a href="#"><img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/arrow-prev.png?raw=true" alt="arrow-prev.png" /></a>
<a href="#"><img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/arrow-next.png?raw=true" alt="arrow-next.png" /></a>
</div>
</div>
</div>
</header>

<div class="main-site-wrapper">
<div class="welcome-box" id="welcome">
<h2>Welcome to Product Hunt</h2>
<h3>Get the best new products in your inbox, daily</h3>
<form id="email-signup">
<input class="email-input" type="text" placeholder="Your email">
<button class="btn" type="submit" form="email-signup" value="Submit">SUBSCRIBE</button>
</form>
<img class="close-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/close.png?raw=true" alt="close.png" />
</div>

<div class="flex-container">

<div class="flex-item">

<div class="content-box" id="popular">
<h1>Popular this week</h1>
<img class="close-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/close.png?raw=true" alt="close.png" />
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/popular-this-week/app-1.png?raw=true" alt="app-1.png" />
<h1><a href="#">Duolingo Bots</a></h1>
<h3>AI powered-characters to teach language conversation</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>1460</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>49</p>
</div>
</div>
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/popular-this-week/app-2.png?raw=true" alt="app-2.png" />
<h1><a href="#">Tribe 2.0</a></h1>
<h3>Introducing Augmented Messaging</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>1465</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>188</p>
</div>
</div>
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/popular-this-week/app-3.png?raw=true" alt="app-3.png" />
<h1><a href="#">Workplace by Facebook</a></h1>
<h3>Connect everyone in your company and turn ideas into actions</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>1003</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>80</p>
</div>
</div>
<div class="show-more">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/arrow-down.png?raw=true" alt="arrow-down.png" />
<h3>SHOW MORE</h3>
</div>
</div>
<div class="content-box">
<h1>Today</h1>
<img class="close-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/close.png?raw=true" alt="close.png" />
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-1.png?raw=true" alt="app-1.png" />
<h1><a href="#">Sprayscape</a></h1>
<h3>A perfectly imperfect VR-ish camera experiment, by Google</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>82</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>8</p>
</div>
</div>
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-2.png" />
<h1><a href="#">Ask Gary Vee</a></h1>
<h3>The unofficial Gary Vee persona chatbot on Messenger!</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>21</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>9</p>
</div>
</div>
<hr>
<div class="card">
<img class="app-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-3.png?raw=true" alt="app-3.png" />
<h1><a href="#">The Electron Wheel</a></h1>
<h3>Turn your standard bicycle into an electric bicycle</h3>
<div class="interact-box vote-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/votes.png?raw=true" alt="votes.png" />
<p>1003</p>
</div>
<div class="interact-box comment-box">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/comments.png?raw=true" alt="comments.png" />
<p>80</p>
</div>
</div>
<div class="show-more">
<img src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/arrow-down.png?raw=true" alt="arrow-down.png" />
<h3>SHOW MORE</h3>
</div>
</div>
</div>

<div class="flex-item">

<div class="content-box" id="kitty">
<h1>Kittybot for Slack</h1>
<h3>A friendly feline that sends you cool new things</h3>
<img class="close-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/close.png?raw=true" alt="close.png" />
<button class="btn" type="button"># ADD KITTYBOT TO SLACK</button>
</div>

<div class="content-box live-chats">
<h2>UPCOMING LIVE CHATS</h2>
<hr>

<div class="speaker">
<a href="#"><img class="speaker-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-3.png" /></a>
<div class="speaker-info">
<h2><a href="#">Adam Besvinick</a></h2>
<h3>VC at Deep Fork Capital</h3>
</div>
</div>

<div class="speaker">
<a href="#"><img class="speaker-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-3.png" /></a>
<div class="speaker-info">
<h2><a href="#">Susan David</a></h2>
<h3>Author of Emotionally Guilty</h3>
</div>
</div>

<div class="speaker">
<a href="#"><img class="speaker-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-3.png" /></a>
<div class="speaker-info">
<h2><a href="#">Avid Larizadeh Dyggan</a></h2>
<h3>General Partner at GV</h3>
</div>
</div>

<div class="speaker">
<a href="#"><img class="speaker-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-3.png" /></a>
<div class="speaker-info">
<h2><a href="#">Katerina Markov Schneider</a></h2>
<h3>Founder and CEO of Ritual</h3>
</div>
</div>

<div class="speaker">
<a href="#"><img class="speaker-img" src="https://github.com/willjthorp/lab-css-responsive-cloning/blob/master/starter-code/images/today/app-2.png?raw=true" alt="app-3.png" /></a>
<div class="speaker-info">
<h2><a href="#">Jocelyn Glei</a></h2>
<h3>Master of Productivitiy, founder and autor...</h3>
</div>
</div>

<hr>
<h3 id="see-more">SEE MORE</h3>
</div>
<!--live chats-->

</div>
<!--flex item (2)-->

</div>
<!--flex container-->

</div>
<!--main site wrapper-->

</body>
</html>
Loading