Skip to content

Instantly share code, notes, and snippets.

@adesignl

adesignl/Hubspot Unsubscribe

Created March 28, 2013 17:30
Show Gist options
  • Save adesignl/5265186 to your computer and use it in GitHub Desktop.
Save adesignl/5265186 to your computer and use it in GitHub Desktop.
Download ZIP
Hubspot Unsubscribe Button
Raw
Hubspot Unsubscribe
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/foundation_icons_general/stylesheets/general_foundicons.css">
<link rel="stylesheet" href="css/foundation_icons_social/stylesheets/social_foundicons.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/foundation_icons_general/stylesheets/general_foundicons_ie7.css">
<link rel="stylesheet" href="css/foundation_icons_social/stylesheets/social_foundicons_ie7.css">
<![endif]-->
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>The Talking Cranes Pilot</title>
<!-- Included CSS Files (Uncompressed) -->
<!--
<link rel="stylesheet" href="css/foundation.css">
-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/offcanvas.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="blog" class="off-canvas paneled">
<a href="/" class="logoLarge"></a>
<!-- Header and Nav -->
<!-- <div class="fixed"> -->
<div class="navWrapper">
<nav class="top-bar">
<ul class="">
<!-- Title Area -->
<li class="name hide-for-large-up show-for-small"><a href="#" style="text-align: center;"><img src="images/iconSmall.png"></a></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section class="clearfix">
<!-- Lest Nav Section -->
<ul class="left utility">
<li class="Links">
<a href="#" class="profile"><img src="//www.placekitten.com/20/" alt=""> User Name</a>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown"><a href="#">All Categories</a>
<ul class="dropdown">
<li><a href="#">Art</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Workplace</a></li>
</ul>
</li>
<li><a href="#"><i class="general foundicon-star"></i> Open Talks</a></li>
<li class="has-dropdown"><a href="#">Company Name</a>
<ul class="dropdown">
<li><a href="#" title="">Category Title</a></li>
<li><a href="#" title="">Category Title</a></li>
<li><a href="#" title="">Category Title</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="search">
<form action="/">
<input type="search" placeholder="Search Here">
</form>
</li>
</ul>
</section>
</nav>
<div class="hotTopics text-right"><b>Hot Topics:</b> <a href="#">Topic Title</a> <a href="#">Hot Topic</a> <a href="#">Hot Topic</a></div>
</div>
<header id="header" class="">
<div class="clearfix">
<dl class="tabs two-up show-for-small" id="switchPanels">
<dd class="active"><a href="#panel-1" class="purple">Blog</a></dd>
<dd><a href="#panel-2" class="blue">Conversations</a></dd>
<!-- <dd><a href="#panel-3" class="orange">Products</a></dd> -->
</dl>
</div>
</header>
<!-- </div> -->
<!--[if lt IE 8]>
<div class="alert-box alert">
<div style="text-align: center;">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</div>
<a href="#" class="close">×</button>
</div>
<![endif]-->
<!-- End Header and Nav -->
<div class="row">
<section role="main" id="main">
<div id="panel-1" class="page-panel eight columns mobile-two">
<div id="posts" class="row">
<div class="row summary">
<div class="three columns">
<a href="#"><img src="http://placehold.it/400" alt="image"></a>
</div>
<div class="nine columns">
<h1>Blog Post Title</h1>
<div class="clearfix dateAuthor">
<a href="#" class="left">Author Name</a>
<span class="categories right"><span>Filled Under:</span> <a href="#">Category Name</a>, <a href="#">Category Name</a></span>
</div>
<h5 class="subheader">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet suscipit labore veritatis ullam in aperiam rerum accusantium neque expedita. Amet officiis saepe consequuntur eius dolorum soluta quidem ipsa doloremque.
</h5>
</div>
</div>
<div class="row">
<div class="twelve columns">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repellat provident soluta sequi odit perferendis optio corporis nam eius fugiat cumque animi mollitia? Voluptates nihil recusandae repellat ullam cumque fugiat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam recusandae rerum nesciunt ab ut quam magnam culpa! Asperiores corrupti fuga commodi excepturi tempora esse consequatur at modi ad magnam. Blanditiis.
</p>
<p>
<img src="http://placehold.it/600x200" alt="">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repellat provident soluta sequi odit perferendis optio corporis nam eius fugiat cumque animi mollitia? Voluptates nihil recusandae repellat ullam cumque fugiat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam recusandae rerum nesciunt ab ut quam magnam culpa! Asperiores corrupti fuga commodi excepturi tempora esse consequatur at modi ad magnam. Blanditiis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repellat provident soluta sequi odit perferendis optio corporis nam eius fugiat cumque animi mollitia? Voluptates nihil recusandae repellat ullam cumque fugiat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam recusandae rerum nesciunt ab ut quam magnam culpa! Asperiores corrupti fuga commodi excepturi tempora esse consequatur at modi ad magnam. Blanditiis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repellat provident soluta sequi odit perferendis optio corporis nam eius fugiat cumque animi mollitia? Voluptates nihil recusandae repellat ullam cumque fugiat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam recusandae rerum nesciunt ab ut quam magnam culpa! Asperiores corrupti fuga commodi excepturi tempora esse consequatur at modi ad magnam. Blanditiis.
</p>
</div>
</div>
</div>
</div><!-- /#panel-1 -->
<div id="panel-2" class="page-panel scroll height four columns mobile-two static" >
<div id="sidebar" >
<div class="row" id="feed" >
<!-- Start Conversation Header Block -->
<div class="twelve columns">
<h4>Join The Conversation</h4>
</div>
<div class="twelve columns">
<div class="">
<form action="">
<input type="text" name="conversation-name" id="conversation-name" class="twelve" placeholder="Name" />
<input type="text" name="conversation-email" id="conversation-email" class="twelve" placeholder="Your Email" />
<textarea name="conversation-text" id="conversation-text" class="twelve" placeholder="Your Thoughts On This Blog Post Here" ></textarea>
<div class="row">
<button class="button radius success">Send</button>
</div>
</form>
<hr>
</div>
</div>
<!-- Start Conversation Block -->
<div class="twelve columns">
<div class="panel share radius">
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="twelve mobile-four columns ">
<h5 class="hide-for-medium hide-for-large-up user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<h5 class="hide-for-small user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<div class="comment">
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<a href="#" class="shareButton"><i class="social foundicon-thumb-up"></i></a>
</div>
<div class="bubble">This is text that should be replaced by social sharing buttons</div>
</div>
<!-- END Conversation Block -->
<div class="twelve columns">
<div class="panel share radius">
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="twelve mobile-four columns ">
<h5 class="hide-for-medium hide-for-large-up user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<h5 class="hide-for-small user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<div class="comment">
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<a href="#" class="shareButton"><i class="social foundicon-thumb-up"></i></a>
</div>
<div class="bubble">This is text that should be replaced by social sharing buttons</div>
</div>
<!-- END Conversation Block -->
<div class="twelve columns">
<div class="panel share radius">
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="twelve mobile-four columns ">
<h5 class="hide-for-medium hide-for-large-up user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<h5 class="hide-for-small user">
<a href="#"><img src="http://placehold.it/20x20" alt=""> Joe Schmoe</a> <span class="time">1 hour ago</span>
</h5>
<div class="comment">
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<a href="#" class="shareButton"><i class="social foundicon-thumb-up"></i></a>
</div>
<div class="bubble">This is text that should be replaced by social sharing buttons</div>
</div>
<!-- END Conversation Block -->
</div>
</div><!-- End #sidebar -->
</div><!-- /#panel-2 -->
</section>
</div>
<!-- Footer -->
<footer class="row hide-for-small" id="footer">
<div class="twelve columns">
<div class="row">
<div class="six columns">
<ul class="link-list">
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
<li><a href="#">Section 4</a></li>
</ul>
</div>
<div class="six columns">
<p class="right">&copy; Copyright Talking Cranes, LLC. <small><a href="#" title="Privacy Policy">Privacy Policy</a> | <a href="#" title="Terms and Conditions">Terms and Conditions</a></small></p>
</div>
</div>
</div>
</footer>
<!-- START Loging modal Window -->
<div id="loginModal" class="reveal-modal tiny">
<h2>Login Here.</h2>
<form>
<label>Username / Email</label>
<div class="row collapse">
<div class="one mobile-one columns">
<span class="prefix"><i class="social foundicon-torso"></i></span>
</div>
<div class="eleven mobile-three columns">
<input type="email" placeholder="mail@name.com">
</div>
</div>
<label>Password</label>
<div class="row collapse">
<div class="one mobile-one columns">
<span class="prefix"><i class="general foundicon-lock"></i></span>
</div>
<div class="eleven mobile-three columns">
<input type="password" placeholder="•••••••">
</div>
</div>
<button type="submit" class="button radius success"><i class="general foundicon-checkmark"></i> Login</button>
<button type="reset" class="button radius secondary"><i class="general foundicon-refresh"></i> Reset</button>
<span class="right"><a href="#">Forget Your Password?</a></span>
</form>
<a class="close-reveal-modal">&#215;</a>
</div>
<!-- END Loging modal Window -->
<!-- START conversation modal Window -->
<div id="conversationModal" class="reveal-modal ">
<h2>Start A Conversation</h2>
<form class="custom">
<label>Topic</label>
<input type="email" placeholder="Topic Title Here">
<label>Message</label>
<textarea placeholder="Leave Your Message Here"></textarea>
<h5>Select A Category</h5>
<div class="row">
<div class="six columns">
<label for="confrence"><input type="checkbox" name="" value="">Work Topic </label>
<label for="checkbox1"><input type="checkbox" > Work Topic</label>
<label for="checkbox2"><input type="checkbox" > Work Topic</label>
<label for="checkbox3"><input type="checkbox" > Work Topic</label>
</div>
<div class="six columns">
<label for="checkbox3"><input type="checkbox" > Work Topic</label>
<label for="checkbox3"><input type="checkbox" > Work Topic</label>
<label for="checkbox3"><input type="checkbox" > Work Topic</label>
</div>
</div>
<button type="submit" class="button radius success"><i class="general foundicon-checkmark"></i> Go</button>
</form>
<a class="close-reveal-modal">&#215;</a>
</div>
<!-- END conversation modal Window -->
<!-- START request invite modal -->
<div id="inviteModal" class="reveal-modal">
<h2>Join This Conversation</h2>
<a href="#" class="button large full-width radius"><i class="general foundicon-plus"></i> Request To Join this Conversation</a>
<a class="close-reveal-modal">&#215;</a>
</div>
<!-- END request invite modal -->
<!-- Included JS Files -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Combine and Compress These JS Files -->
<script src="js/foundation.min.js"></script>
<script src="js/jquery.offcanvas.js"></script>
<script src="js/masonry.min.js"></script>
<script src="js/jquery.scroll.js"></script>
<script>
$('body').bind('touchmove', function (ev) {
ev.preventDefault();
});
</script>
<!-- End Combine and Compress These JS Files -->
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment