Skip to content

Instantly share code, notes, and snippets.

@alvaromuir

alvaromuir/TumblrDemo.html

Last active December 25, 2015 01:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alvaromuir/6893368 to your computer and use it in GitHub Desktop.
Save alvaromuir/6893368 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr demo in html, sans js or iframes.
Raw
TumblrDemo.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Alvaro Muir | Thought You'd Wanna Know</title>
<meta name="description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.">
<link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_128.png">
<link rel="apple-touch-icon" href="http://25.media.tumblr.com/avatar_1fc553fa2cd7_128.png">
<link rel="alternate" type="application/rss+xml" href="#">
<!-- DEFAULT VARIABLES -->
<meta name="color:Post Type Text" content="#555555">
<meta name="color:Post Type Photo" content="#555555">
<meta name="color:Post Type Photoset" content="#555555">
<meta name="color:Post Type Quote" content="#555555">
<meta name="color:Post Type Link" content="#555555">
<meta name="color:Post Type Chat" content="#555555">
<meta name="color:Post Type Video" content="#555555">
<meta name="color:Post Type Audio" content="#555555">
<meta name="image:Header" content="">
<meta name="if:Show About Widget" content="1">
<meta name="if:Show Stuff I Like Widget" content="1">
<meta name="if:Show Latest Tweets Widget" content="0">
<meta name="if:Show People I Follow Widget" content="1">
<meta name="text:Number of Tweets" content="3">
<meta name="text:Google Analytics ID" content="">
<meta name="text:Disqus Shortname" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="access">
<div class="menu">
<div id="pages">
<ul>
<li><a target="_blank" href="/">Home</a></li>
<li class="archive"><a target="_blank" href="/archive">Archive</a></li>
<li class="mobile"><a target="_blank" href="/mobile">Mobile</a></li>
<li class="rss"><a target="_blank" href="#">RSS</a></li>
</ul>
</div><!-- #pages -->
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="">
<input type="submit" value="Search" class="search-button">
</form>
</div><!-- #search -->
</div><!-- .menu -->
</div><!-- #access -->
<div id="branding">
<h1>
<a target="_blank" href="/">Alvaro Muir | Thought You'd Wanna Know</a>
</h1>
</div><!-- #branding -->
</div><!-- #header -->
<div id="main">
<div id="container" class="test">
<div id="content">
<div id="post-236" class="post post-type-quote">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Quote</a>
</div><!-- .type -->
<div class="date">
November 08, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<div class="quote-content">"It does not matter how slow you go so long as you do not stop."</div>
<p class="quote-source">— Wisdom of&nbsp;<a target="_blank" href="http://en.wikipedia.org/wiki/Confucius">Confucius</a></p>
<div class="tags">
<p>Tags: <a target="_blank" href="#" class="single-tag">wisdom</a> </p>
</div>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-459265350" class="post post-type-photo">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Photo</a>
</div><!-- .type -->
<div class="date">
November 08, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<a target="_blank" href="#"><img src="http://24.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_500.jpg" class="photo" alt="Passing through Times Square by&nbsp;Mareen Fischinger"></a>
<a target="_blank" href="http://www.tumblr.com/photo/1280/demo/459265350/1/tumblr_kzjlfiTnfe1qz4rgh" class="high-res"></a>
<div class="caption"><p>Passing through Times Square by&nbsp;<a target="_blank" href="http://www.mareenfischinger.com/">Mareen Fischinger</a></p></div>
<div class="tags">
<p>Tags: <a target="_blank" href="#" class="single-tag">Mareen Fischinger</a> <a target="_blank" href="#" class="single-tag">New York City</a> <a target="_blank" href="#" class="single-tag">Times Square</a> </p>
</div>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-234" class="post post-type-link">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Link</a>
</div><!-- .type -->
<div class="date">
November 08, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<div class="link-wrap"><a target="_blank" href="http://">My favorite web site</a></div>
<div class="description"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-233" class="post post-type-chat">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Chat</a>
</div><!-- .type -->
<div class="date">
November 08, 2006
</div><!-- .date -- >
</div><!-- .post-meta -->
</div><!-- .post-meta -->
<div class="post-content">
<ul class="chat-wrap">
<li class="odd user_1">
<span class="label">Jack:</span>
Hey, you know what sucks?
</li>
<li class="even user_2">
<span class="label">Lindsey:</span>
vaccuums
</li>
<li class="odd user_1">
<span class="label">Jack:</span>
Hey, you know what sucks in a metaphorical sense?
</li>
<li class="even user_2">
<span class="label">Lindsey:</span>
black holes
</li>
<li class="odd user_1">
<span class="label">Jack:</span>
Hey, you know what just isn't cool?
</li
<li class="even user_2">
<span class="label">Lindsey:</span>
lava?
</li>
</ul>
<div class="tags">
<p>Tags: <a target="_blank" href="http://demo.tumblr.com/tagged/funny" class="single-tag">funny</a> </p>
</div>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-459260683" class="post post-type-audio">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Audio</a>
</div><!-- .type -->
<div class="date">
November 07, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<div class="audio-wrap"><span id="audio_player_459260683"><div class="audio_player"><iframe class="tumblr_audio_player tumblr_audio_player_459260683" src="#" frameborder="0" allowtransparency="true" scrolling="no" width="207" height="27" style="-webkit-transform: translate3d(0px, 0px, 0px);"></iframe></div></span></div>
<div class="caption"><p><strong><a target="_blank" href="http://allisonweiss.tumblr.com/">Allison Weiss</a>&nbsp;—</strong> Fingers Crossed</p></div>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-232" class="post post-type-text">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Text</a>
</div><!-- .type -->
<div class="date">
November 07, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<h3><a target="_blank" href="http://demo.tumblr.com/post/232/an-example-post">An example post</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer <a target="_blank" href="/">adipiscing elit</a>. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetuer adipiscing elit. </li>
<li>Nam at tortor quis ipsum tempor aliquet.</li>
</ul>
<p>Cum sociis <a target="_blank" href="/">natoque penatibus</a> et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.</p>
<blockquote>Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.</blockquote>
<p>Suspendisse ac pede. Cras <a target="_blank" href="/">tincidunt pretium</a> felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.</p>
</div><!-- post-content -->
</div><!-- .post -->
<div id="post-459009076" class="post post-type-text">
<div class="post-meta">
<div class="type">
<a target="_blank" href="#">Text</a>
</div><!-- .type -->
<div class="date">
October 01, 2006
</div><!-- .date -->
</div><!-- .post-meta -->
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetuer <a target="_blank" href="/">adipiscing elit</a>. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
</div><!-- post-content -->
</div><!-- .post -->
<div class="pagination">
<span class="next-page"><a target="_blank" href="/page/2">Next »</a></span>
</div><!-- .pagination -->
</div><!-- #content -->
<div class="clearfix"></div>
</div><!-- #container -->
<div id="sidebar">
<h3>About</h3>
<div id="about" class="widget">
<img src="http://31.media.tumblr.com/avatar_1fc553fa2cd7_64.png" alt="portrait">
<div class="description"><p>just me and my thoughts</p></div>
</div>
<h3><a target="_blank" href="http://www.tumblr.com/liked/by/demo">Stuff I like</a></h3>
<div id="likes_container" class="widget">
</div>
<h3>Latest Tweets</h3>
<div id="twitter" class="widget">
<div id="tweets"></div>
<p><a target="_blank" href="http://twitter.com/pixelunion">Follow me</a></p>
</div>
<h3>People I follow</h3>
<div id="following_container" class="widget">
<ul>
</ul>
</div>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">
<div id="colophon"><p>Powered by <a target="_blank" href="http://tumblr.com">Tumblr</a>.
</div><!-- #footer -->
</div><!-- #wrapper -->
<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script><script type="text/javascript">try{var pageTracker=_gat._getTracker("UA-19295787-1");pageTracker._trackPageview()}catch(err){}</script>
<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment