daily pastebin goal
71%
SHARE
TWEET

Serenity

stylesheet Jul 22nd, 2016 (edited) 6 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: "Serenity"
  11. Created: July 22, 2016
  12. Updated: July 22, 2016
  13. Background image from: http://vintagebackgrounds.tumblr.com/
  14.  
  15. Best viewed on Safari 1440 x 990
  16.  
  17. PLEASE DO NOT REMOVE CREDITS
  18.  
  19. ==============================================
  20.  
  21. -->
  22.  
  23. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  24. <script>
  25. $(document).ready(function(){
  26. $(".inside").hide();
  27. $(".label").click(function(){
  28. $(this).next(".inside").slideToggle('fast');
  29. });
  30. });
  31. </script>
  32.  
  33.  
  34. <meta charset="UFT-8">
  35.  
  36. <title>serenity | premade layout by monica t. (monicagalaxy)</title>
  37. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  38. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic' rel='stylesheet' type='text/css'>
  39.  
  40.  
  41. <style type="text/css">
  42. html {
  43.     background-color: #fff;
  44.     cursor: crosshair;
  45. }
  46.  
  47. body {
  48.     margin: 0 auto;
  49.     text-align: left;
  50. }
  51.  
  52. p {
  53.    font-family: 'Open Sans', sans-serif;
  54.    font-weight: 300;
  55.    font-size: 12px;
  56.    color: #999;
  57.    line-height: 21px;
  58. }
  59.  
  60.  
  61. .title {
  62.     top: 0px;
  63.     position: relative;
  64.     background-color: #6bbaa7;
  65.     font-family: 'Source Sans Pro', sans-serif;
  66.     text-align: center;
  67.     letter-spacing: 1px;
  68.     font-weight: 300;
  69.     font-size: 65px;
  70.     text-transform: uppercase;
  71.     margin-bottom: 16px;
  72.     color: #fff;
  73. }
  74.    
  75. #background {
  76.     background: url("http://www.hifreevideos.com/images/preview/Explore-Crown-Wallpapers,-Backgrounds-Wallpapers,-142426.jpg") repeat;
  77.     width: 100%;
  78.     left: 0;
  79.     height: 7px;
  80.     z-index: 0;
  81. }
  82.  
  83. .whole {
  84.     max-width: 1080px;
  85.     margin: 0 auto;
  86. }
  87.  
  88. .content {
  89.     position: relative;
  90.     max-width: 640px;
  91.     padding: 2px;
  92.     margin: 0 auto;
  93. }
  94.  
  95.  
  96. #holder{
  97.     max-width: 147px;
  98.     height: auto;
  99.     padding: 5px;
  100.     margin-left: 15px;
  101.     font-size: 12px;
  102.     top: 150px;
  103.     font-family: 'Source Sans Pro', sans-serif;
  104.     text-align: center;
  105.     position: fixed;
  106. }
  107.  
  108. .label{
  109.     letter-spacing: 1px;
  110.     padding: 5px;
  111.     margin-left: -0.5px;
  112.     color: #999;
  113.     cursor: crosshair;
  114.     text-align: left;
  115.     font-size: 14px;
  116. }
  117.  
  118.  
  119. .inside{
  120.     font-family: 'Open Sans', sans-serif;
  121.     margin-left: 5px;
  122.     font-size: 11px;
  123.     display:none;
  124.     color: #999;
  125.     line-height: 21px;
  126.     text-align: left;
  127.    
  128. }
  129.  
  130.  
  131. .inside a{
  132.     color: #999;
  133.     letter-spacing: 1px;
  134.     text-decoration: underline;
  135. }
  136. .inside a:hover{
  137.     color: #99d3df;
  138. }
  139.  
  140.  
  141. h1 {
  142.     font-family: 'Source Sans Pro', sans-serif;
  143.     text-align: center;
  144.     letter-spacing: 1px;
  145.     font-weight: 300;
  146.     font-size: 65px;
  147.     text-transform: uppercase;
  148.     margin-bottom: 16px;
  149.     width: 540px;
  150.     color: #666;
  151.     border-bottom: 1px solid #888;
  152. }
  153.  
  154. h2 {
  155.     font-family: 'Source Sans Pro', sans-serif;
  156.     text-align: left;
  157.     margin-top: 10px;
  158.     margin-bottom: 5px;
  159.     text-transform: none;
  160.     font-weight: 300;
  161.     font-size: 28px;
  162.     color: #6c648b;
  163. }
  164.  
  165. h3 {
  166.     font-family: 'Source Sans Pro', sans-serif;
  167.     text-align: left;
  168.     margin-top: 10px;
  169.     margin-bottom: 5px;
  170.     text-transform: none;
  171.     font-weight: 300;
  172.     font-size: 28px;
  173.     color: #b6a19e;
  174. }
  175.  
  176. a:link, a:visited {
  177.     color: #99d3df;
  178.     text-decoration: none;
  179. }
  180. a:hover {
  181.     color: #99d3df;
  182.     text-decoration: underline;
  183. }
  184.  
  185. img {
  186.    border: 3px solid #6bbaa7;
  187.    margin: 5px;
  188.    float: right;
  189. }
  190.  
  191.  
  192. body::-webkit-scrollbar {
  193.         width: 6px;
  194. }
  195.  
  196. body::-webkit-scrollbar-track {
  197.     -webkit-box-shadow: inset 0 0 6px #6bbaa7;
  198. }
  199.  
  200. body::-webkit-scrollbar-thumb {
  201.   background-color: #b6a19e;
  202. }
  203.  
  204. </style>
  205. </head>
  206.  
  207. <body>
  208.  
  209. <div class="title">
  210. serenity
  211. <div id="background"></div>
  212. </div>
  213.  
  214. <div class="whole">
  215.  
  216. <div id="holder">
  217. <p class="label">links</p>
  218. <div class="inside">
  219. <a href="#">home</a><br>
  220. <a href="#">about</a><br>
  221. <a href="http://monicagalaxy.info/">credit</a><br>
  222. </div>
  223.  
  224. <p class="label">updates</p>
  225. <div class="inside">
  226. Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam<br>
  227. </div>
  228.  
  229. <p class="label">website</p>
  230. <div class="inside">
  231. Enim dissentias ad est, laudem omnesque an sed. Ex nec porro appareat, ad has consul suscipit, an eligendi phaedrum eam<br>
  232. </div>
  233. </div>
  234.  
  235.  
  236. <div class="content">
  237. <h2>second header</h2>
  238. <p>
  239. <img src="http://www.hifreevideos.com/images/preview/Explore-Crown-Wallpapers,-Backgrounds-Wallpapers,-142426.jpg" width="170" height="125">
  240. 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.
  241.  
  242. 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.
  243.  
  244. 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.</p>
  245.  
  246. <p>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.
  247.  
  248. 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.
  249.  
  250. 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.</p>
  251.  
  252. <h3>third header</h3>
  253. <p>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.
  254.  
  255. 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.
  256.  
  257. 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.</p>
  258. </div>
  259.  
  260. </div>
  261. </body>
  262. </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