daily pastebin goal
75%
SHARE
TWEET

Doves are a symbol of peace

stylesheet Aug 4th, 2017 (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: doves are a symbol of peace
  11. Updated: August 4th, 2017
  12. DO NOT REMOVE CREDITS
  13.  
  14. external sources - image credit:
  15. cranes: https://s-media-cache-ak0.pinimg.com/736x/72/e9/dd/72e9ddf1734913ae008066dbdddd9396--birds-flying-tattoo-bird-flying.jpg
  16. smaller cranes: https://fiumidiinchiostro.files.wordpress.com/2015/03/cropped-tree_bird.png
  17. animation css: https://browngirl.tumblr.com/post/68377491864/expanding-updates-box-tutorial
  18.  
  19. ==============================================
  20.  
  21. -->
  22.  
  23. <meta charset="UFT-8">
  24.  
  25. <title>doves are a symbol of peace</title>
  26.  
  27. <style type="text/css">
  28.  
  29. html {
  30.     background-color: #fff;
  31.     height: 100%;
  32.     color: #555555;
  33. }
  34.  
  35. body {
  36.     background-image: url('http://i.imgur.com/6r1fMTd.jpg');
  37.     background-repeat: no-repeat;
  38.     background-attachment: fixed;
  39. }
  40.  
  41. .content {
  42.     position: relative;
  43.     padding: 11px;
  44.     left: 265px;
  45.     width: 640px;
  46.     background-color: #fff;
  47.     font: 13.5px calibri;
  48.     line-height: 19px;
  49. }
  50.  
  51. #image {
  52.     background-image: url('https://secure.static.tumblr.com/a283801fc2836d6fe0bec9368536207e/vdapdks/lWCnjxy7y/tumblr_static_tumblr_static_d5afctv6mg8owwkw8goksowgs_640.png');
  53.     float: right;
  54.    
  55. }
  56.  
  57.  
  58. body::-webkit-scrollbar {
  59.     width: 4px;
  60. }
  61.  
  62. body::-webkit-scrollbar-track {
  63.     -webkit-box-shadow: inset 0 0 6px #fff;
  64. }
  65.  
  66. body::-webkit-scrollbar-thumb {
  67.   background-color: #000;
  68.   outline: 1px solid #121212;
  69. }
  70.  
  71.    
  72. h1 {
  73.     font-family: calibri;
  74.     text-align: left;
  75.     font-weight: normal;
  76.     font-size: 39px;
  77.     color: #000;
  78.     line-height: 1px;
  79. }
  80.  
  81. h2 {
  82.     font-family: calibri;
  83.     text-align: left;
  84.     font-weight: normal;
  85.     font-size: 29px;
  86.     line-height: 29px;
  87.     margin-bottom: 10px;
  88.     color: #000;
  89.     border-bottom: 1px solid #000;
  90.    
  91. }
  92.  
  93. h3 {
  94.     font-family: calibri;
  95.     text-align: left;
  96.     font-weight: normal;
  97.     font-size: 29px;
  98.     line-height: 1px;
  99.     color: #555555;
  100. }
  101.  
  102.  
  103.  
  104. a:link, a:visited {
  105.     color: #999;
  106.     text-decoration: none;
  107. }
  108. a:hover {
  109.     color: #999;
  110.     text-decoration: underline;
  111. }
  112.  
  113. i {
  114.     color: #8c8c8c;
  115. }
  116.    
  117. u {
  118.     color: #8c8c8c;
  119. }
  120.  
  121. p {
  122.     font: 13.5px calibri;
  123. }
  124.  
  125. blockquote {
  126.     background-color: #e5e5e5;
  127.     padding: 10px;
  128.     margin-left: 1px;
  129.    
  130. }
  131.  
  132. #hardziamupdatestab{
  133.     position:fixed;
  134.     top: 72px;
  135.     left: 53px;
  136.     width: 160px;
  137.     z-index: 100;
  138.     font: 17px calibri;
  139. }
  140.  
  141. #hardziamupdatestab a {
  142.     display: block;
  143.     text-decoration: underline;
  144.     color: #555555;
  145.     font: 13.5px calibri;
  146. }
  147.  
  148. .ziam {
  149.     display: inline-block;
  150.     background: #000;
  151.     color: #fff;
  152.     width: 160px;
  153.     margin-left: 15px;
  154.     padding: 5px;
  155.    -webkit-transition: all 0.5s ease-in-out;
  156.    -moz-transition: all 0.5s ease-in-out;
  157.    -o-transition: all 0.5s ease-in-out;
  158. }
  159.  
  160. #bonruffians, #hardziam, #feverfires{
  161.     margin-bottom: 19px;
  162. }
  163.  
  164. #bonruffians:hover .ziam, #hardziam:hover .ziam, #feverfires:hover .ziam{
  165.    margin-left: 122px;
  166.   -webkit-transition: all 0.5s ease-in-out;
  167.   -moz-transition: all 0.5s ease-in-out;
  168.   -o-transition: all 0.5s ease-in-out;
  169. }
  170.  
  171. #hardziam:hover .ziam:before, #bonruffians:hover .ziam:before, #feverfires:hover .ziam:before{
  172.    opacity: 1;
  173.   -webkit-transition: all 0.5s ease-in-out;
  174.   -moz-transition: all 0.5s ease-in-out;
  175.   -o-transition: all 0.5s ease-in-out;
  176. }
  177.  
  178. #hardziam:hover .ziam:after, #bonruffians:hover .ziam:after, #feverfires:hover .ziam:after{
  179.    width: 83px;
  180.   -webkit-transition: all 0.5s ease-in-out;
  181.   -moz-transition: all 0.5s ease-in-out;
  182.   -o-transition: all 0.5s ease-in-out;
  183. }
  184.  
  185. .ziam:after{
  186.    position: fixed;
  187.    width: 0px;
  188.    height: 1px;
  189.    margin-top: -8px;
  190.    left: 65px;
  191.    background: #fff;
  192.    -webkit-transition: all 0.5s ease-in-out;
  193.   -moz-transition: all 0.5s ease-in-out;
  194.   -o-transition: all 0.5s ease-in-out;
  195. }
  196.  
  197. .ziam:before{
  198.    position: fixed;
  199.    width: 8px;
  200.    height: 8px;
  201.    margin-top: 1px;
  202.    left: 40px;
  203.    background: #fff;
  204.    opacity:0;
  205.    -webkit-transition: all 0.5s ease-in-out;
  206.    -moz-transition: all 0.5s ease-in-out;
  207.    -o-transition: all 0.5s ease-in-out;
  208. }
  209.  
  210. .mulan{
  211.     height: 0px;
  212.     width: 155px;
  213.     opacity:0;
  214.     margin-top:-15px;
  215.     background: #fff;
  216.     margin-left: 16px;
  217.     border-right:1px solid #000;
  218.     border-left:1px solid #000;
  219.     border-bottom:1px solid #000;
  220.     border-top:1px solid #000;
  221.     padding: 5px;
  222.     overflow: hidden;
  223.    -webkit-transition: all 0.5s ease-in-out;
  224.    -moz-transition: all 0.5s ease-in-out;
  225.    -o-transition: all 0.5s ease-in-out;
  226. }
  227.  
  228. #hardziam:hover .mulan, #feverfires:hover .mulan, #bonruffians:hover .mulan{
  229.     height: 130px;
  230.     margin-top:8px;
  231.     opacity:1;
  232.     -webkit-transition: all 0.5s ease-in-out;
  233.     -moz-transition: all 0.5s ease-in-out;
  234.     -o-transition: all 0.5s ease-in-out;
  235.     transition-delay: 0.5s;
  236.     -webkit-transition-delay: 0.5s; /* Safari */
  237. }
  238.  
  239. #hardziamupdatestab h3 {
  240.     font: 17px calibri;
  241.     color: #000;
  242.     padding: 2px;
  243.     width: 120px;
  244.     font-weight: bold;
  245.     height: 11px;
  246. }
  247.  
  248. #hardziamupdatestab h4{
  249.     font: 12px Calibri;
  250.     color: #555555;
  251.     padding: 2px;
  252.     width: 150px;
  253.     margin-top: -6px;
  254. }
  255.  
  256. </style>
  257. </head>
  258. <body>
  259. <div id="image"></div>    
  260. <div id="hardziamupdatestab">
  261. <div id="hardziam">
  262.  <div class="ziam">updates</div>
  263.  <div class="mulan">
  264.  <h3>navigation</h3>
  265.  <h4>subtitle for your links</h4>
  266. <a href="#">one</a>
  267. <a href="#">two</a>
  268. <a href="#">three</a>
  269. </div>
  270. </div>
  271.  
  272. <div id="bonruffians">
  273.  <div class="ziam">sidebar</div>
  274.  <div class="mulan">
  275.  <h3>sidebar one</h3>
  276.  <h4>and a subtitle</h4>
  277. <p>
  278. -idea one<br>
  279. -idea two<br>
  280. -idea three<br>
  281. </p>
  282. </div>
  283. </div>
  284.  
  285. <div id="feverfires">
  286.  <div class="ziam">sidebar</div>
  287.  <div class="mulan">
  288.  <h3>sidebar two</h3>
  289.  <h4>and a subtitle</h4>
  290. <p>Lorem ipsum dolor sit amet, eum meis audire postulant.</p>
  291. </div>
  292. </div>
  293. </div>
  294.  
  295. <div class="content">
  296. <h1><b>doves</b> are a symbol of peace</h1>
  297. <blockquote><a href="/">link</a> <b>bold</b> <i>italics</i> <u>underline</u> <s>strike through</s></blockquote>
  298. 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.
  299. 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.
  300. </div>
  301.  
  302. <div class="content">
  303. <h2>header</h2>
  304. 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.
  305. 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.
  306. 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.
  307. 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.
  308. </div>
  309.  
  310. <div class="content">
  311. <h3>header</h3>
  312. 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.
  313. 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.
  314. </div>
  315. </body>
  316. </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