daily pastebin goal
85%
SHARE
TWEET

Spring break

stylesheet Feb 25th, 2017 7 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. ==============================================
  7.  
  8. Coded by Monica T.
  9. http://monicagalaxy.info/
  10. Theme: "Spring Break"
  11. Updated: February 25, 2017
  12. DO NOT REMOVE CREDITS
  13. Notes: Spring break has started! In honour of that, here's a design - "Spring Break".
  14.  
  15. ==============================================
  16.  
  17. -->
  18. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  19. <script>
  20. $(document).ready(function(){
  21. $(".inside").hide();
  22. $(".label").click(function(){
  23. $(this).next(".inside").slideToggle('medium');
  24. });
  25. });
  26. </script>
  27.  
  28. <meta charset="UFT-8">
  29.  
  30. <title>Spring Break 2017</title>
  31. <link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet">
  32. <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
  33.  
  34. <style type="text/css">
  35.  
  36. html {
  37.     background-color: #fff;
  38.     cursor: crosshair;
  39. }
  40.  
  41. body {
  42.     margin: 8em 0 auto;
  43.     text-align: left;
  44.     font-size: 12px;
  45.     line-height: 22px;
  46.     color: #2b2b2b;
  47.     font-family: 'arial';
  48.     cursor: crosshair;
  49. }
  50.  
  51. .content {
  52.     position: relative;
  53.     background-image: url('http://i.imgur.com/FUm69UM.png');
  54.     margin-left: 360px;
  55.     width: 640px;
  56.     padding: 16px;
  57.     margin-top: 20px;
  58.     border-top: 1px solid #121212;
  59. }
  60.  
  61.    body::-webkit-scrollbar {
  62.         width: 7px;
  63. }
  64.  
  65. body::-webkit-scrollbar-track {
  66.     -webkit-box-shadow: inset 0 0 6px #fff;
  67. }
  68.  
  69. body::-webkit-scrollbar-thumb {
  70.   background-color: #54badf;
  71.   outline: 1px solid #121212;
  72. }
  73.  
  74.    
  75. h1 {
  76.     font-family: 'Vollkorn', serif;
  77.     text-align: left;
  78.     margin-top: -43px;
  79.     font-weight: normal;
  80.     font-size: 41px;
  81.     color: #121212;
  82. }
  83.  
  84. h2 {
  85.     font-family: 'Archivo Narrow', sans-serif;
  86.     text-align: left;
  87.     margin-top: -43px;
  88.     text-transform: uppercase;
  89.     font-weight: bold;
  90.     font-size: 24px;
  91.     color: #2b2b2b;
  92. }
  93.  
  94. h3 {
  95.     font-family: 'Archivo Narrow', sans-serif;
  96.     text-align: left;
  97.     margin-top: -43px;
  98.     text-transform: uppercase;
  99.     font-weight: bold;
  100.     font-size: 21px;
  101.     color: #2b2b2b;
  102. }
  103.  
  104. h4 {
  105.     font-family: 'Archivo Narrow', sans-serif;
  106.     margin-top: -43px;
  107.     text-transform: none;
  108.     font-weight: bold;
  109.     font-size: 21px;
  110.     color: #2b2b2b;
  111.     text-align: right;
  112.     margin-top: -28px;
  113.     text-transform: uppercase;
  114. }
  115.  
  116.  
  117. a:link, a:visited {
  118.     color: #666;
  119.     text-decoration: none;
  120. }
  121. a:hover {
  122.     color: #666;
  123.     text-decoration: none;
  124. }
  125.  
  126.  
  127. #holder {
  128.     position: fixed;
  129.     width: 175px;
  130.     padding: 5px;
  131.     font-size: 10px;
  132.     top: 145px;
  133.     margin-left: 42px;
  134.     font-family: arial;
  135.     text-align: left;
  136.     background-image: url('http://i.imgur.com/FUm69UM.png');
  137. }
  138.  
  139. .label{
  140.     font-family: 'Vollkorn', serif;
  141.     background: transparent;
  142.     font-size: 15px;
  143.     font-weight: bold;
  144.     padding: 3px;
  145.     cursor: crosshair;
  146.     line-height: 14px;
  147.     text-align: right;
  148. }
  149.  
  150. .inside{
  151.     padding: 5px;
  152.     font-size: 12px;
  153.     cursor: crosshair;
  154. }
  155.  
  156. .inside a{
  157.     display: block;
  158.     color: #000;
  159.     text-transform: uppercase;
  160.     letter-spacing: 1px;
  161.     text-decoration: underline;
  162.     font-style: italic;
  163.     font: 13px 'Vollkorn', serif;
  164.     color: #121212;
  165.     padding: 1px;
  166.     text-align: right;
  167.     text-transform: none;
  168.     text-decoration: none;
  169. }
  170.  
  171. .inside a:hover{
  172.     text-decoration: underline;
  173. }
  174.  
  175. .image {
  176.     position: fixed;
  177.     top: 0px;
  178.     margin-right: 830px;
  179.     height: 100%;
  180.     width: 280px;
  181.     background-image: url('https://s-media-cache-ak0.pinimg.com/originals/b9/ec/af/b9ecaf8c755e1d7858db9758baf7a003.jpg');
  182. }
  183.  
  184. img {
  185.     border: 8px solid #fdfdfd;
  186.     float: right;
  187.     margin-right: 4px;
  188. }
  189.  
  190. i {
  191.     color: #54badf;
  192. }
  193.    
  194. u {
  195.  
  196.     color: #b17123;
  197. }
  198.  
  199.  
  200. blockquote {
  201.     background-color: #fdfdfd;
  202.     padding: 10px;
  203.     margin-left: 0px;
  204.    
  205. }
  206.  
  207. </style>
  208. </head>
  209. <body>
  210. <div class="image"></div>
  211.  
  212. <div id="holder">
  213. <h4>sidebar</h4>
  214. <p class="label">Links</p>
  215. <div class="inside">
  216. <a href="#" class="nav">home</a>
  217. <a href="#" class="nav">one</a>
  218. <a href="#" class="nav">two</a>
  219. <br>
  220. </div>
  221.  
  222. <p class="label">About</p>
  223. <div class="inside">
  224.  Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne.
  225. </div>
  226.  
  227. <p class="label">Site</p>
  228. <div class="inside">
  229.  Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne.
  230. </div>
  231. </div>
  232.  
  233.  
  234. <div class="content">
  235. <h1>it's <b>spring break</b> </h1>
  236. <blockquote><a href="/">link</a> <b>bold</b> <i>italics</i> <u>underline</u> <s>strike through</s></blockquote>
  237.  
  238. Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
  239. </div><br>
  240.  
  241.  
  242. <div class="content">
  243. <h2>this is header two</h2>
  244. <img src="http://imgur.com/AbYbfaN.jpg" height="210" width="218">
  245. Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam. Falli vivendum scripserit cu vel. Et quot similique vix, vix cu aeque dolore nostro, dicunt nonumes vis id. Quod indoctum evertitur quo in. His nibh solet consul cu, ad quando definitiones quo. Quo ne graece oblique. Quot iudico regione no nec, vis eu molestiae voluptatum. Id sit dolor mediocrem interpretaris. At velit facilisi persequeris nam. Enim dissentias ad est, laudem omnesque an sed. Quot iudico regione no nec, vis eu molestiae voluptatum. Id sit dolor mediocrem interpretaris. At velit facilisi persequeris nam. Enim dissentias ad est, laudem omnesque an sed.
  246. <br>
  247.  
  248. </div><br>
  249.  
  250.  
  251. <div class="content">
  252. <h3>this is header three</h3>
  253. Nullam nonumes ex duo, graeci probatus accommodare cu eos. Ea vis appareat consetetur, brute omnium sadipscing an quo. Atqui augue his id, semper feugait ei ius. Cu eum augue harum omnes, ei nam alia nemore dissentiet. Atqui accusata persequeris ad has, quo at dolorem fierent offendit.
  254. </div><br>
  255. <br>
  256.  
  257. </body>
  258. </html>
RAW Paste Data
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
 
Top