API tools faq
paste
Advertisement
codesbyraven

ode to ana

codesbyraven
Apr 26th, 2015
9,684
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7. <!-----JQUERY LIBRARY & FONT AWESOME ICONS----->
  8. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  10.  
  11. <!-----CSS, JQUERY & SCRIPT SHIT FOR THE SLIDESHOW------>
  12. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
  13. <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  14.  
  15. <script>
  16. // Carousel Auto-Cycle
  17. $(document).ready(function() {
  18. $('.carousel').carousel({
  19. interval: 6000
  20. })
  21. });
  22. </script>
  23.  
  24. <!-----GOOGLE FONTS------>
  25. <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
  26.  
  27.  
  28. <!-----TOOLTIPS------>
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32.  
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:90,
  39. tip_fade_speed:600,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44.  
  45. </script>
  46.  
  47. <style type="text/css">
  48.  
  49.  
  50. /*-------TOOLTIP CSS-------*/
  51. .tooltip{
  52. display: inline;
  53. position: relative;
  54. }
  55.  
  56. #s-m-t-tooltip {
  57. background:rgba(0,0,0,.7);
  58. border:1px solid #fff;
  59. color:#fff;
  60. font-family:calibri;
  61. font-size:8px;
  62. margin:15px;
  63. max-width:300px;
  64. padding:2px 8px;
  65. text-transform:uppercase;
  66. letter-spacing:2px;
  67. z-index:99999999;
  68. }
  69.  
  70. /*----------SCROLLBAR----------*/
  71. ::-webkit-scrollbar {
  72. background-color:#acacac;
  73. border:2px solid #000;
  74. width:5px;
  75. }
  76.  
  77. ::-webkit-scrollbar-thumb {
  78. background-color:#acacac;
  79. border-radius:6px;
  80. }
  81.  
  82.  
  83.  
  84. ::selection { background: gray; color: #FFFFFF; text-shadow: 0; }
  85. ::-moz-selection { background: gray; color: #FFFFFF; }
  86.  
  87.  
  88. body {
  89. background:#fff;
  90. font-family:calibri;
  91. font-size:10px;
  92. line-height:100%;
  93. padding:20px;
  94. background: url(http://ri.pinger.pl/pgr400/2c6b749600116e14527d5b55/tumblr_mkqwloUUao1s33ekvo1_1280.png) no-repeat center center fixed;
  95. -webkit-background-size: cover;
  96. -moz-background-size: cover;
  97. -o-background-size: cover;
  98. background-size: cover;
  99. }
  100.  
  101. img {
  102. max-width:100%;
  103. }
  104.  
  105. /*----BOLD & ITALICS----*/
  106. .span8 i, .span8 b {
  107. color:#fff;
  108. }
  109.  
  110. /*------ LINKS------*/
  111. .span8 a, .span4 a{
  112. color:#fff;
  113. text-transform: uppercase;
  114. letter-spacing:1px;
  115. -moz-transition:all .3s ease-in-out;
  116. -ms-transition:all .3s ease-in-out;
  117. -o-transition:all .3s ease-in-out;
  118. -webkit-transition:all .3s ease-in-out;
  119. transition:all .3s ease-in-out;
  120. }
  121.  
  122.  
  123. /*----QUOTE CSS---*/
  124. .span4 p{
  125. color:#fff!important;
  126. text-transform:uppercase;
  127. letter-spacing:2px;
  128. font-size:10px!important;
  129. margin-top:-10px;
  130. }
  131.  
  132. .span4 p::before {
  133. content:"“";
  134. font-family:oswald;
  135. margin-top:15px;
  136. margin-left:-15px;
  137. float:left;
  138. font-size:40px;
  139. font-style:normal;
  140. color:#fff;
  141. }
  142.  
  143.  
  144.  
  145. /*---HEADER CSS-------*/
  146.  
  147. h3 {
  148. color:#fff;
  149. font-family:Oswald, sans-serif;
  150. font-size:14px;
  151. font-weight:300;
  152. letter-spacing:2px;
  153. line-height:120%;
  154. text-transform:uppercase;
  155.  
  156. }
  157.  
  158. /*-----BULLET POINTS-----*/
  159. .span4 ul {
  160. list-style-type:square;
  161. color:#fff;
  162. text-transform:uppercase;
  163. letter-spacing:2px;
  164. margin-top:-10px;
  165. margin-bottom:0px;
  166. }
  167.  
  168. .span4 li {
  169. line-height:100%;
  170. }
  171.  
  172. /*-----THE FADE EFFECT ON THE IMAGES----*/
  173.  
  174. a img{
  175. -moz-transition:all 150ms ease;
  176. -ms-transition:all 150ms ease;
  177. -o-transition:all 150ms ease;
  178. -webkit-transition:all 150ms ease;
  179. transition:all 150ms ease;
  180. }
  181.  
  182. a img:hover {
  183. -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  184. filter:alpha(opacity=50);
  185. opacity:0.6;
  186. text-decoration:none;
  187. }
  188.  
  189. /*-----SELF EXPLANATORY-------*/
  190.  
  191. #readmore {
  192. margin-right:-10px;
  193. padding:5px;
  194. float:right;
  195. width:90px;
  196. }
  197.  
  198.  
  199. #readmore::before {
  200. content:"\f054";
  201. font-family:FontAwesome;
  202. margin-right:4px;
  203. font-size:8px;
  204. }
  205.  
  206. a#readmore {
  207. text-decoration: none;
  208. }
  209.  
  210. a#readmore:hover {
  211. letter-spacing:3px;
  212. }
  213.  
  214.  
  215. .container-fluid { /*dont touch this one idek*/
  216. background:#000;
  217. box-shadow:0 1px 1px rgba(0,0,0,0.1);
  218. margin:0 auto;
  219. max-width:960px;
  220. padding:25px 0 0;
  221. }
  222.  
  223.  
  224. /*-----PAGE HEADER WOW-----*/
  225. .page-header {
  226. background:#000;
  227. color:#B870B8;
  228. margin:-30px 0 0;
  229. padding:10px 30px;
  230. text-transform:uppercase;
  231. }
  232.  
  233. .page-header h3 {
  234. display:inline-block;
  235. font-size:20px; /*PAGE TITLE FONT SIZE*/
  236. line-height:10px;
  237. text-indent:0;
  238. }
  239.  
  240.  
  241. /*---just the "return home" button stuff no big deal---*/
  242. .page-header span {
  243. display:inline-block;
  244. float:right;
  245. letter-spacing:2px;
  246. margin-top:10px;
  247. -moz-transition:all .3s ease-in-out;
  248. -ms-transition:all .3s ease-in-out;
  249. -o-transition:all .3s ease-in-out;
  250. -webkit-transition:all .3s ease-in-out;
  251. transition:all .3s ease-in-out;
  252. }
  253.  
  254.  
  255. .page-header a span{
  256. color:#FFF;
  257. -moz-transition:all .3s ease-in-out;
  258. -ms-transition:all .3s ease-in-out;
  259. -o-transition:all .3s ease-in-out;
  260. -webkit-transition:all .3s ease-in-out;
  261. transition:all .3s ease-in-out;
  262. }
  263.  
  264. .page-header a span:hover{
  265. letter-spacing:3px;
  266. }
  267.  
  268. .page-header span::before {
  269. color:#FFF;
  270. content:"\f053";
  271. font-family:FontAwesome;
  272. font-size:8px;
  273. margin:0 2px;
  274. }
  275.  
  276.  
  277.  
  278. /*THE WHOLE BOTTOM PART UNDER THE IMAGES*/
  279.  
  280. .caption {
  281. -moz-box-sizing:border-box;
  282. -webkit-box-sizing:border-box;
  283. box-sizing:border-box;
  284. height:120px;
  285. line-height:100%;
  286. margin:10px 0 0;
  287. padding:10px 20px;
  288. width:100%;
  289. }
  290.  
  291. .span8 {
  292. height:100px;
  293. overflow:auto;
  294. }
  295.  
  296. .caption .span4,.caption .span8 {
  297. padding:0 20px;
  298. }
  299.  
  300. .caption .span4 {
  301. border-right:1px dotted #CCC;
  302. }
  303.  
  304. .caption h3 {
  305. margin:0 0 20px;
  306. }
  307.  
  308. .caption p {
  309. color:#acacac;
  310. font-size:12px;
  311. line-height:150%;
  312. }
  313.  
  314. .carousel-control {
  315. top:33%;
  316. }
  317.  
  318.  
  319.  
  320. #yepthatsme { padding: 0px 2px 2px 2px; font-size:8px; font-family:calibri; letter-spacing:1px; overflow:hidden; width:6px;height:8px; border:1px solid white; bottom:10px; right:10px;position:fixed;background-color:rgba(0,0,0,0.2);box-shadow: 1px 1px 0px rgba(0,0,0,0.5);-moz-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out; transition:all .6s ease-in-out;text-transform:uppercase;word-break:break-all;} #yepthatsme:hover {width:115px;background:#000;} #yepthatsme a { text-decoration: none;color:transparent;} #yepthatsme a:hover {color:#fff;}
  321.  
  322.  
  323.  
  324. </style></head><body>
  325.  
  326.  
  327. <div class="container-fluid">
  328. <div class="row-fluid">
  329. <div class="span12">
  330. <div class="page-header">
  331. <!--EDIT THE PAGE'S HEADER TITLE HERE-->
  332. <h3>you probably haven't heard of them</h3><a href="/"><span>return home</span></a></div>
  333. <div class="carousel slide" id="myCarousel">
  334. <div class="carousel-inner">
  335.  
  336.  
  337.  
  338. <div class="item active">
  339. <div class="bannerImage">
  340. <a href="#"><img alt="" src="http://placehold.it/960x405/ffffff/000000"></a>
  341. </div>
  342.  
  343. <div class="caption row-fluid">
  344. <div class="span4">
  345. <h3>Moonrise Kingdom Yellow</h3>
  346. <p> Wow, you can put a quote here! Yep. That's pretty damn cool lmao.</p>
  347. <a id="readmore" href="#">Read More</a>
  348. </div>
  349.  
  350. <div class="span8">
  351. <p> <b>Bold</b> <i>Italic</i> <a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ">Link</a> Ennui post-ironic meditation, master cleanse kitsch gentrify Helvetica ugh cliche Wes Anderson tilde mixtape ethical polaroid. Neutra 90's migas, pug semiotics wayfarers hashtag viral distillery American Apparel. Banksy Truffaut actually hoodie.</p>
  352. </div>
  353. </div>
  354. </div><!-- END OF SLIDE 1 -->
  355.  
  356.  
  357.  
  358. <div class="item">
  359. <div class="bannerImage">
  360. <a href="#"><img alt="" src="http://placehold.it/960x405/ffffff/000000"></a>
  361. </div>
  362.  
  363. <div class="caption row-fluid">
  364. <div class="span4">
  365. <h3>Her Red</h3>
  366. <ul>
  367. <li>or you can
  368. <li>do some
  369. <li>bullets instead
  370. </ul>
  371. <a id="readmore" href="#">Read More</a>
  372. </div>
  373.  
  374. <div class="span8">
  375. <p>This one scrolls after the description gets too long. Mumblecore et roof party, Truffaut Odd Future fanny pack Neutra culpa nostrud McSweeney's. Do fugiat quis Marfa, chillwave flannel ugh disrupt fashion axe ea commodo PBR&B anim eu. High Life single-origin coffee beard tilde Blue Bottle aute, Truffaut nihil blog sriracha lumbersexual iPhone nisi occupy. Helvetica cillum kale chips, selfies labore iPhone stumptown laborum. Tofu aliqua crucifix, Wes Anderson blog duis dolor consectetur selvage YOLO consequat lomo. Truffaut church-key Bushwick velit, PBR&B sapiente biodiesel excepteur fixie keffiyeh Neutra butcher mlkshk direct trade. Placeat gluten-free lumbersexual commodo.</p>
  376. </div>
  377. </div>
  378. </div><!-- END OF SLIDE 2 -->
  379.  
  380.  
  381.  
  382. <div class="item">
  383. <div class="bannerImage">
  384. <a href="#"><img alt="" src="http://placehold.it/960x405/ffffff/000000"></a>
  385. </div>
  386.  
  387. <div class="caption row-fluid">
  388. <div class="span4">
  389. <h3>Electrick Children Pink</h3>
  390. <ul>
  391. <li>words
  392. <li>go
  393. <li>here
  394. </ul>
  395. <a id="readmore" href="#">Read More</a>
  396. </div>
  397.  
  398. <div class="span8">
  399. <p>Sartorial magna American Apparel, fingerstache irure heirloom keffiyeh occaecat semiotics polaroid Intelligentsia Banksy. Narwhal selfies crucifix flannel. Sartorial scenester Blue Bottle irure, typewriter flexitarian hella. Nostrud pork belly mollit pour-over. Literally authentic food truck paleo art party. Meh fixie direct trade fingerstache, consequat tote bag street art laborum sint sed drinking vinegar asymmetrical biodiesel organic Pitchfork. Commodo craft beer tousled Blue Bottle Vice tempor, cliche organic twee excepteur selvage duis nisi cupidatat.</p>
  400. </div>
  401. </div>
  402. </div><!-- END OF SLIDE 3 -->
  403.  
  404.  
  405.  
  406. <div class="item">
  407. <div class="bannerImage">
  408. <a href="#"><img alt="" src="http://placehold.it/960x405/ffffff/000000"></a>
  409. </div>
  410.  
  411. <div class="caption row-fluid">
  412. <div class="span4">
  413. <h3>Grand Budapest Purple</h3>
  414. <ul>
  415. <li>words
  416. <li>go
  417. <li>here
  418. </ul>
  419. <a id="readmore" href="#">Read More</a>
  420. </div>
  421.  
  422. <div class="span8">
  423. <p>Brooklyn mixtape listicle pork belly mollit retro. Try-hard distillery iPhone, trust fund typewriter ethical VHS cliche sed Vice. Tempor id whatever anim, Marfa chambray ad McSweeney's cronut. Quinoa literally mumblecore, aesthetic four loko locavore chia Brooklyn health goth craft beer. Umami ethical selvage, flannel tousled butcher vinyl Schlitz occupy twee XOXO 90's.</p>
  424. </div>
  425. </div>
  426. </div><!--END OF SLIDE 4 -->
  427.  
  428.  
  429. <!---START HERE IF YOU WANT TO COPY AND PASTE MORE SLIDES--->
  430. <div class="item">
  431. <div class="bannerImage">
  432. <a href="#"><img alt="" src="http://placehold.it/960x405/ffffff/000000"></a>
  433. </div>
  434.  
  435. <div class="caption row-fluid">
  436. <div class="span4">
  437. <h3>Rosewater White</h3>
  438. <ul>
  439. <li>words
  440. <li>go
  441. <li>here
  442. </ul>
  443. <a id="readmore" href="#">Read More</a>
  444. </div>
  445.  
  446. <div class="span8">
  447. <p>Banh mi raw denim church-key gentrify, vegan Austin before they sold out dreamcatcher roof party locavore Etsy trust fund Odd Future. +1 drinking vinegar sustainable flexitarian mlkshk. Tofu pug mlkshk flannel. Godard Shoreditch craft beer irony, umami Neutra skateboard Pinterest bespoke cray pork belly literally lo-fi. </p>
  448. </div>
  449. </div>
  450. </div><!--END OF SLIDE 5. COPY AND PASTE ANY EXTRA SLIDES AFTER THIS -->
  451.  
  452.  
  453.  
  454.  
  455.  
  456.  
  457. <!---DONT TOUCH ANYTHING AFTER THIS--->
  458. </div><div class="control-box">
  459. <a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a> <a class="carousel-control right" data-slide="next" href="#myCarousel">›</a>
  460. </div><!-- /.control-box -->
  461. </div><!-- /#myCarousel -->
  462. </div><!-- /.span12 -->
  463. </div><!-- /.row -->
  464. </div><!-- /.container -->
  465.  
  466.  
  467. <div id="yepthatsme"><a href="http://www.hailthehelpful.tumblr.com">theme by hailthehelpful</a></div>
  468. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!