API tools faq
paste
Advertisement
southcodes

page #14 ALL-IN-ONE 'cherry'

southcodes
Aug 13th, 2019 (edited)
589
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.47 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - page #14 'cherry' by skye southcodes.tumblr.com for the Fruitilicious Challenge by codingcabin.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.  
  7.     - honeybee icons by @suiomi
  8.     - background pattern by http://backgroundlabs.com/item/seamless-cherry-pattern/
  9.     - animations by https://daneden.github.io/animate.css/
  10.     - normalize css by https://necolas.github.io/normalize.css/
  11.    
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.     <title>{title}</title>
  18.  
  19.     <meta charset="UTF-8">
  20.     <meta name="viewport" content="width=device-width">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.     <meta name="description" content="{MetaDescription}"/>
  25.  
  26.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Montserrat:400|600" rel="stylesheet">
  27.     <link href="https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css" rel="stylesheet">
  28.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  29.  
  30.  
  31. <style>
  32.  
  33. body, figure{margin: 0;padding: 0; background:url('https://66.media.tumblr.com/5acf5cf94ba02f8a742fc75d8294937e/tumblr_pvdqkbWj8X1r1y6uyo1_500.png') fixed;}
  34. html{font-size: 14px}
  35. body {font: 1rem 'Open Sans', sans-serif;color:#000;letter-spacing:.03rem;}
  36. a {text-decoration: none;color:#d63333;}
  37. a:hover {color:red;}
  38. b {font-weight: 600}
  39. nav ul li, nav ul {list-style-type:none;margin:0;padding:0;}
  40. nav ul li { display:inline-block;}
  41.  
  42. /*DONT TOUCH*/
  43. div.th {font-size:4rem;position:absolute;right:-.8rem;top:-.8rem;}
  44. span.th {font-size:2.5rem;vertical-align:middle;margin-right:1rem;}
  45. .th-cherry {color:darkred;}
  46. .th-strawberry {color:crimson;}
  47. .th-peach {color:lightpink;}
  48. .th-apple {color:#993149}
  49. .border {border:1px solid #eee;background:#f9f9f9;padding:.7rem;}
  50.  
  51.  
  52. /*  header  */
  53. #header { z-index:9999;
  54.     background:rgba(255,255,255,.95);
  55.     position:fixed;bottom:0;right:0;left:0;}
  56. header {padding:1.5rem;text-transform:uppercase;}
  57. header #topnav {font: 600 1.1rem 'Montserrat', sans-serif;}
  58. header #topnav ul li {margin-right:1.5rem;letter-spacing:.05rem;}
  59. #bg {
  60.     width:100%;
  61.     height:1rem;
  62.     background:linear-gradient( to right,darkred,crimson,lightpink);
  63. }
  64.  
  65. main {
  66.     margin:7rem auto 2rem;
  67.     width:90rem;
  68.     max-width:88vw;}
  69. main h1 {font-size:1.4rem;margin:0;}
  70.  
  71. .box {
  72.     width:calc((100% - 6rem)  / 2);
  73.     position:relative;
  74.     background:rgba(255,255,255,.95);
  75.     padding:1.3rem;
  76.     border:1px solid #ebebeb;
  77.     margin:0 1.5rem 3rem;
  78.     box-sizing:border-box;
  79. }
  80. .box nav {margin-top:1rem;}
  81. .box:last-of-type {margin-bottom:8rem;}
  82. /*ABOUT*/
  83.  
  84. #about {
  85.     border-bottom:.7rem solid pink;  /* ABOUT BORDER COLOR */
  86. }
  87.  
  88. #about #inside {
  89.     box-sizing:border-box;
  90.     vertical-align:top;
  91.     float:left;
  92.     width:calc(100% - 7rem)
  93. }
  94. #inside p {margin:.5rem 0;}
  95. #favi {width:6rem;display:block}
  96. #name {
  97.     margin:1rem 0 0 0;text-align:center;font-size:.9rem;line-height:100%;word-break:break-word;
  98. }
  99.  
  100. #quote {text-align:center;font-style:italic;}
  101.  
  102.  
  103. /*TAGS*/
  104.  
  105. #tags,#links{font-size:.95rem;}
  106.  
  107. #tags nav ul li {
  108.     border-bottom:2px solid crimson;  /* TAGS BORDER COLOR */
  109.     margin:0 .3rem .5rem;}
  110. #tags a {color:crimson;}
  111.  
  112. /*LINKS*/
  113.  
  114. #links nav ul li {
  115.     border-bottom:2px solid darkred;  /* LINKS BORDER COLOR */
  116.     margin:0 .3rem .5rem;}
  117. #links a {color:darkred;}
  118.  
  119. #links nav ul li:hover,#tags nav ul li:hover { border-bottom:2px solid transparent;}
  120.  
  121. /*DONT TOUCH*/
  122. footer {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.9rem;background:white;font-weight:600;}
  123.  
  124. #favi2 {display:none;}
  125.  
  126. @media only screen and (min-width:0) and (max-width:500px) {
  127.    
  128.     #confavi {display:none;}
  129.    
  130.     .box {
  131.         min-width:95vw;
  132.         margin-left:auto;
  133.         margin-right:auto;
  134.     }
  135.    
  136.    
  137.     #favi2 {display:block;}
  138.    
  139.     #about #inside {width:100%}
  140. }
  141.  
  142. @media only screen and (min-width:501px) and (max-width:1000px) {
  143.     .box {
  144.         width:100%;
  145.         margin-right:auto;
  146.         margin-left:auto;
  147.     }
  148. }
  149.  
  150.  
  151.  
  152. </style>
  153.  
  154.  
  155. </head>
  156. <body>
  157.  
  158. <div id="header">
  159. <div id="bg"></div>
  160. <header>
  161.  
  162.     <nav id="topnav"><ul>
  163.         <!--    LINKS    -->
  164.     <span class="th th-apple"></span>
  165.         <li><a href="/">home</a></li>
  166.         <li><a href="/inbox">ask</a></li>
  167.         <li><a href="https://www.tumblr.com">dashboard</a></li>
  168.     </ul></nav>
  169. </header>
  170. </div>
  171.  
  172. <main data-masonry='{ "itemSelector": ".box"}'>
  173.  
  174.     <article id="about" class="box">
  175.        
  176.         <div id="inside" class="border">
  177.    
  178.             <!--ABOUT-->
  179.                
  180.             <h1>About</h1>
  181.                  
  182.                  <a href="/"><img src="{favicon}" id="favi2" style="width:6rem" align="right"/></a>
  183.                  
  184.             <p>text section. wrap paragraphs in p tags.</p>
  185.            
  186.             <!--
  187.             EXAMPLE
  188.            
  189.             <p>paragraph 1</p>
  190.            
  191.             <p>paragraph 2</p>
  192.            
  193.             -->
  194.        
  195.            
  196.         </div>
  197.        
  198.        
  199.         <div style="float:right;width:6rem;" id="confavi">
  200.             <a href="/"><img src="{favicon}" id="favi"/></a>
  201.            
  202.             <p id="name">{name}</p>
  203.         </div>
  204.        
  205.     </article>
  206.    
  207.        
  208.        
  209.         <!--    QUOTE   -->
  210.    
  211.     <article id="quote" class="box"><div class="border">
  212.        
  213.         <p>quote goes here</p>
  214.        
  215.     </div></article>
  216.    
  217.     <article id="links" class="box" style="border-bottom:.7rem solid darkred;"><div class="th th-cherry animated rotateIn delay-2s"></div><div class="border">
  218.    
  219.                 <!--LINKS-->
  220.                
  221.             <h1>Links</h1>
  222.            
  223.             <nav id="nlinks"><ul>
  224.            
  225.                 <li><a href="/">main blog</a></li>
  226.                
  227.                 <li><a href="/">side blog</a></li>
  228.                
  229.                 <li><a href="/">twitter</a></li>
  230.                
  231.                 <li><a href="/">instagram</a></li>
  232.                
  233.                 <li><a href="/">youtube</a></li>
  234.                
  235.                 <li><a href="/">snapchat</a></li>
  236.                
  237.             </ul></nav>
  238.        
  239.     </div></article>
  240.        
  241.  
  242.  
  243.    
  244.    
  245.     <article id="tags" class="box" style="border-bottom:.7rem solid crimson;">
  246.     <div class="th th-strawberry animated rotateIn delay-2s"></div><div class="border">
  247.    
  248.    
  249.                 <!--TAGS-->
  250.                
  251.             <h1>Tags</h1>
  252.            
  253.             <nav id="tlinks"><ul>
  254.                
  255.                 <li><a href="/">pink</a></li>
  256.                
  257.                 <li><a href="/">red</a></li>
  258.                
  259.                 <li><a href="/">carmesi</a></li>
  260.                
  261.                 <li><a href="/">plum</a></li>
  262.                
  263.                 <li><a href="/">opal</a></li>
  264.                
  265.                 <li><a href="/">cherry</a></li>
  266.                
  267.                 <li><a href="/">apple</a></li>
  268.                
  269.                 <li><a href="/">crystal</a></li>
  270.             </ul></nav>
  271.        
  272.     </div></article>
  273.    
  274.  
  275.  
  276.  
  277. </main>
  278.  
  279.  
  280.  
  281.  
  282. <!-- SCRIPTS -->
  283. <footer><a href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a></footer>
  284. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  285. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  286.  
  287. </body>
  288. </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!