daily pastebin goal
44%
SHARE
TWEET

Watercolour

stylesheet Apr 27th, 2017 14 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. Coded by Monica T.
  8. http://monicagalaxy.info/
  9. Theme: Watercolour
  10. Updated: April 28, 2017
  11. Image source: http://defreve.deviantart.com/art/Mixed-Texture-254801088
  12. ==============================================
  13.  -->
  14.  
  15. <meta charset="UFT-8">
  16.  
  17. <title>watercolour | an about you page</title>
  18. <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">
  20.  
  21.  
  22. <style type="text/css">
  23.  
  24. body {
  25.     text-align: center;
  26.     font-size: 13px;
  27.     font-family: 'Lato', sans-serif;
  28.     color: #373737;
  29.     margin-top: 90px;
  30.     line-height: 19px;
  31.  
  32. }
  33.  
  34. .whole {
  35.     border: 10px solid transparent;
  36.     border-image: url("http://i64.tinypic.com/2ue1wea.jpg") 1 round;
  37.     padding: 40px;
  38.     width: 500px;
  39.     margin: 0 auto;
  40. }
  41.  
  42. .content {
  43.     text-align: center;
  44.     max-width: 425px;
  45.     padding: 15px;
  46.     margin: 0 auto;
  47.     text-align: left;
  48. }
  49.  
  50. #footer {
  51.     font-family: 'Open Sans', sans-serif;
  52.     max-width: 425px;
  53.     color: #777;
  54.     padding: 2px;
  55.     margin: 0 auto;
  56.     font-size: 11.5px;
  57.     text-align: center;
  58. }
  59.  
  60. .box1 {
  61.     background-color: #fdfdfd;
  62.     padding: 10px;
  63. }
  64.  
  65. .part {
  66.     width: 31%;
  67.     margin: 1px 1%;
  68.     float: left;
  69. }
  70.  
  71. li {
  72.     list-style-type: square;
  73. }
  74.  
  75. h1 {
  76.     font-family: 'Lato 700', sans-serif;
  77.     color: #000;
  78.     text-transform: none;
  79.     font-size: 65px;
  80.     text-align: center;
  81.     margin: 26px;
  82. }
  83.  
  84.  
  85. h2 {
  86.     font-family: 'Source Sans Pro 300', sans-serif;
  87.     color: #000;
  88.     font-weight: normal;
  89.     text-align: center;
  90.     letter-spacing: 1px;
  91.     font-size: 11px;
  92.     text-transform: uppercase;
  93. }
  94.  
  95. h3 {
  96.     font-family: 'Lato', sans-serif;
  97.     line-height: 1px;
  98.     color: #373737;
  99.     text-transform: none;
  100.     font-size: 25px;
  101.     text-align: center;
  102.    
  103. }
  104.  
  105. a:link, a:visited {
  106.     font-family: 'Source Sans Pro 300', sans-serif;
  107.     text-transform: uppercase;
  108.     font-size: 10px;
  109.     letter-spacing: 1px;
  110.     color: #373737;
  111.     text-decoration: none;
  112. }
  113. a:hover {
  114.     color: #373737;
  115.     border-bottom: 2px solid #373737;
  116. }
  117.  
  118. </style>
  119.  
  120.  <body onload="changebg();">
  121.    <script type="text/javascript">
  122.     var bgcount = 4;
  123.     function changebg() {
  124.     var num = Math.ceil( Math.random() * bgcount );
  125.     //alert(num);   we can use this commented line to see what numbers are being generated
  126.     backgound_images = ['http://i67.tinypic.com/dy3kzr.jpg','http://i63.tinypic.com/3rafs.jpg', 'http://i63.tinypic.com/ibhqb6.jpg', 'http://i65.tinypic.com/2m804np.jpg'];
  127.     num=num-1; // we shift back by 1 number because arrays index starts at 0
  128.     document.body.background = backgound_images[num];
  129.     document.body.style.backgroundRepeat = "no-repeat";
  130.     document.body.style.backgroundPosition = "center";
  131.     }
  132.     </script>
  133.  
  134. </head>
  135.  
  136. <body>
  137.  
  138. <div class="whole">
  139. <div class="content">
  140. <h1>your name</h1>
  141. <h2>write about your program, 2019</h2>
  142. <div class="box1">
  143. <li>a student seeking ...</li>
  144. <li>studies at ...</li>
  145. <li>interests lie in ...</li>
  146. </div>
  147.  
  148. <h3>past, present, future</h3>
  149. <div class="part">
  150. 1. research question<br>
  151. 2. experience<br>
  152. 3. involvement<br>
  153. 4. ideas & thoughts<br>
  154. 5. anything pertinent
  155. </div>
  156.  
  157. <div class="part">
  158. 1. research question<br>
  159. 2. experience<br>
  160. 3. involvement<br>
  161. 4. ideas & thoughts<br>
  162. 5. anything pertinent
  163. </p>
  164. </div>
  165.  
  166. <div class="part">
  167. 1. research question<br>
  168. 2. experience<br>
  169. 3. involvement<br>
  170. 4. ideas & thoughts<br>
  171. 5. anything pertinent
  172. </p><br>
  173. </div>
  174. </div>
  175.  
  176. <div id="footer">
  177. <a href="#">cv</a> | <a href="#">e-mail</a> | <a href="http://monicagalaxy.info" target="blank">css</a>
  178. </div>
  179.  
  180. </div>
  181. </div>
  182. </body>
  183. </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