API tools faq
paste
Advertisement
stylesheet

Metropolis

stylesheet
Jun 5th, 2016
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. ==============================================
  7.  
  8. Coded by Monica T.
  9. http://monicagalaxy.info/
  10. Theme: "Metropolis"
  11. Updated: June 16, 2016
  12. DO NOT REMOVE CREDITS
  13.  
  14. ==============================================
  15.  
  16. -->
  17. <meta charset="UFT-8">
  18.  
  19. <title>metropolis | 2016 design</title>
  20. <link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
  21. <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
  22.  
  23. <style type="text/css">
  24.  
  25. body {
  26. color: #373737;
  27. margin: 0;
  28. text-align: center;
  29. font-size: 11.5px;
  30. font-family: helvetica;
  31. line-height: 23px;
  32. }
  33.  
  34. .content {
  35. max-width: 767px;
  36. padding: 10px;
  37. text-align: left;
  38. position: relative;
  39. margin: 0 auto;
  40.  
  41. }
  42.  
  43. .sidebar {
  44. float: left;
  45. max-width: 130px;
  46. margin-top: 110px;
  47.  
  48. }
  49.  
  50. .whole {
  51. width: 1080px;
  52. margin: 0 auto;
  53. }
  54.  
  55.  
  56. #header {
  57. background: url("http://i.imgur.com/8M2vSkj.png") repeat;
  58. width: 100%;
  59. border-bottom: 1px dashed #0F1626;
  60. left: 0;
  61. height: 40px;
  62. z-index: 0;
  63. }
  64.  
  65. #footer {
  66. font-family: 'Roboto Slab', serif;
  67. left: 0px;
  68. text-align: right;
  69. color: #b56357;
  70. padding: 20px;
  71. letter-spacing: 1px;
  72. font-size: 12px;
  73. }
  74.  
  75.  
  76. h1 {
  77. font-family: 'Megrim', cursive;
  78. color: #373737;
  79. letter-spacing: 2px;
  80. text-transform: uppercase;
  81. font-size: 42px;
  82. margin-top: 38px;
  83. text-align: center;
  84. }
  85.  
  86. h2 {
  87. font-family: 'Roboto Slab', serif;
  88. color: #b56357;
  89. font-weight: normal;
  90. letter-spacing: 1px;
  91. font-size: 16px;
  92. line-height: 8px;
  93. text-transform: uppercase;
  94. }
  95.  
  96. h3 {
  97. font-family: 'Roboto Slab', serif;
  98. color: #373737;
  99. font-weight: normal;
  100. text-align: right;
  101. padding: 4px;
  102. letter-spacing: 1px;
  103. font-size: 13px;
  104. line-height: 8px;
  105. text-transform: uppercase;
  106. }
  107.  
  108.  
  109. a.nav, a.nav:active, a.nav:link, a.nav:visited {
  110. display: block;
  111. font: 9px 'Helvetica';
  112. width: 109px;
  113. color: #373737;
  114. background-color: #b4dbc0;
  115. border: 1px dashed #373737;
  116. margin: 7px;
  117. letter-spacing: 1px;
  118. text-decoration: none;
  119. padding: 4px;
  120. text-align: left;
  121. text-transform: uppercase;
  122.  
  123. }
  124. a.nav:hover {
  125. text-decoration: none;
  126. background-color: #a7b3a5;
  127. }
  128.  
  129. a:link, a:visited {
  130. color: #b56357;
  131. text-decoration: none;
  132. }
  133. a:hover {
  134. color: #666;
  135. background-color: #a7b3a5;
  136. text-decoration: none;
  137. }
  138.  
  139.  
  140. a.pet {
  141. float: right;
  142. padding: 4px;
  143. border: 1px #000 dashed;
  144. margin: 7px;
  145. color: #444;
  146. display: inline-block;
  147. text-decoration: none;
  148. }
  149. a.pet span {
  150. display: none;
  151. border: 0px #000 dashed;
  152. padding: 4px;
  153. background: url("http://i.imgur.com/3VXTYFU.png") repeat;
  154. height: 200px;
  155. width: 220px;
  156. z-index: 1;
  157. color: #000;
  158. left: 0;
  159. top: 0;
  160. }
  161. a.pet span p {
  162. text-align: center;
  163. margin: 10px;
  164. font: 11px helvetica;
  165. color: #373737;
  166. }
  167. a.pet:hover span {
  168. display: block;
  169. }
  170.  
  171. body::-webkit-scrollbar {
  172. width: 7px;
  173. }
  174.  
  175. body::-webkit-scrollbar-track {
  176. -webkit-box-shadow: inset 0 0 6px #373737;
  177. }
  178.  
  179. body::-webkit-scrollbar-thumb {
  180. background-color: #b56357;
  181. outline: 1px dashed #373737;
  182. }
  183.  
  184. </style>
  185. </head>
  186.  
  187. <body>
  188. <div id="header"></div>
  189.  
  190. <div class="whole">
  191.  
  192. <div class="sidebar">
  193. <h3>Sidebar</h3>
  194. <a href="#" class="nav">link</a>
  195. <a href="#" class="nav">link</a>
  196. <a href="#" class="nav">link</a>
  197. <a href="#" class="nav">link</a>
  198. <a href="#" class="nav">link</a>
  199. </div>
  200.  
  201.  
  202. <div class="content">
  203. <h1>metropolis</h1>
  204. <h2>header two</h2>
  205.  
  206. <a href="#" class="pet" style="position: relative;">
  207. <img src="http://www.komar.de/fileadmin/media/Fototapeten_Bilder/8323_NYC_black_and_white_m.jpg" height="200" width="220"><span style="position: absolute;"><p>image caption</p></span>
  208. </a>
  209.  
  210.  
  211. <p><b>bold</b> <i>italics</i> <u>underlined</u> <a href="#">link</a><br>
  212. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>
  213.  
  214.  
  215. <p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>
  216.  
  217. <p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>
  218.  
  219. <div id="footer">
  220. copyright your name | header: <a href="http://www.neopets.com/~Cecira" target="_blank">credit</a> | nyc image: <a href="http://www.komar.de/fileadmin/media/Fototapeten_Bilder/8323_NYC_black_and_white_m.jpg" target="_blank">user</a> | css: <a href="http://monicagalaxy.info" target="_blank">monica</a>
  221. </div>
  222. </div>
  223.  
  224. </div>
  225. </body>
  226. </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!