API tools faq
paste
Advertisement
cloudstrifes

TUMBLR PAGE AM001. Unity

cloudstrifes
Aug 16th, 2014
1,904
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.49 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------------------------------
  2. An 'about me' page created by Monika from noctislucisscaelum.tumblr.com
  3. Page code name: AM001.Unity
  4.  
  5. The idea and the code belongs to the author.
  6.  
  7. TERMS OF USAGE
  8. 1. Don't use this code as a base for your own themes (or if you really HAVE TO, ask me for permission first)
  9. 2. Don't delete any credits.
  10. 3. Don't redistribute as your own.
  11. -------------------------------------------------------------------------->
  12. <html>
  13. <head>
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  18.  
  19. <style type="text/css">
  20.  
  21. /*---------------- defualt hover transition styles -----------------*/
  22. * {
  23.     transition:all 0.3s ease;
  24.     -webkit-transition: all 0.3s ease;
  25.     -moz-transition: all 0.3s ease;
  26.     -o-transition: all 0.3s ease;
  27. }
  28.  
  29. *:hover {
  30.     transition:all 0.5s ease;
  31.     -webkit-transition: all 0.5s ease;
  32.     -moz-transition: all 0.5s ease;
  33.     -o-transition: all 0.5s ease;
  34. }
  35. /*---------------------- defualt link styles -----------------------*/
  36.  a {
  37.     color: #302440;                        /* here you can change the colour of the link */
  38.     text-decoration:none;
  39. }
  40.  
  41. a:hover {
  42.     color: #7e7e7e;                       /* here you can change the colour of the link when hovered */
  43. }
  44.  
  45.  
  46. /*--------------------------- scrollbar -----------------------------*/
  47. ::-webkit-scrollbar {
  48.     width: 8px;
  49.     height: 8px;
  50.     background: #302440;                      /* here you can change the colour of the scrollbar */
  51.     border-right: 5px solid #ffffff;                  /* here you can change the colour behind the scrollbar, i'd recommend you to put the same colour as your background */
  52.     border-left: 2px solid #ffffff;               /* put the same colour as as above */
  53.     border-bottom: 5px solid #ffffff;                 /* put the same colour as as above */
  54.     border-top: 2px solid #ffffff;                /* put the same colour as as above */
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb:vertical {
  58.     background: #302440;                      /* here you can change the colour of the vertical scrollbar */
  59.     border-top: 4px solid #ffffff;                /* here you can change the colour behind the scrollbar, i'd recommend you to put the same colour as your background */
  60.     border-bottom: 4px solid #ffffff;                 /* put the same colour as as above */
  61.     border-right: 3px solid #ffffff;                  /* put the same colour as as above */
  62.     border-top: 4px solid #ffffff;                /* put the same colour as as above */
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:horizontal {
  66.     background: #302440;                      /* here you can change the colour of the horizontal scrollbar i'd recommend the colour as you used for vertical one*/
  67.     border-bottom: 3px solid #ffffff;                 /* here you can change the colour behind the scrollbar, i'd recommend you to put the same colour as your background */
  68.     border-left: 4px solid #ffffff;               /* put the same colour as as above */
  69.     border-right: 4px solid #ffffff;                  /* put the same colour as as above */
  70. }
  71.    
  72. /*--------------------------- selection -----------------------------*/
  73. ::selection {
  74.     background: #302440;                      /* here you can change the background colour of the selection (meaning, when you select some text) */
  75.     color: #ffffff;                           /* here you can change colour of the selected text */
  76. }
  77.  
  78. /* put exactly the same colours below, as you put above, it's exactly the same thing just for moz browseres (e.g. Firefox) */    
  79. ::-moz-selection {
  80.     background: #302440;
  81.     color: #ffffff;
  82. }
  83.  
  84.  
  85. /*--------------------------- main code -----------------------------*/
  86. .credit {
  87.     position: fixed;
  88.     z-index: 999999;
  89.     bottom: 20px;
  90.     right: 20px;
  91.     padding: 7px;
  92.     border: 1px solid #ececec;
  93. }
  94.  
  95. .nlc {
  96.     border-bottom: 1px solid #ececec;
  97. }
  98.  
  99. .themes {
  100.     font-family: Calibri, sans-serif;
  101.     font-size: 9px;
  102.     text-transform: uppercase;
  103. }
  104. html, body {
  105.     background: #ffffff;                    /* here you can change the background colour of the page */
  106.     color: #7e7e7e;                     /* here you can change the default colour of the text */
  107.     padding: 0px;
  108.     margin: 0px;
  109. }    
  110.  
  111. #container {
  112.     padding-left: 512px;
  113. }
  114.  
  115. .content {
  116.     width: 550px;
  117.     margin: 90px auto;
  118. }
  119.  
  120. blockquote {
  121.     margin: 7px 0px 7px 0px;
  122.     padding: 15px;  border-top: 1px solid #ececec;       /* here you can change the colour of the top border of the blockquote box */
  123.     border-left: 1px solid  #302440;                /* here you can change the colour of the left border of the blockquote box */
  124.     border-right: 1px solid #ececec;                /* here you can change the colour of the right border of the blockquote box */
  125.     border-bottom: 1px solid  #302440;                 /* here you can change the colour of the bottom border of the blockquote box */
  126. }
  127.  
  128.  
  129.  
  130. /*---------------------------- sidebar ------------------------------*/
  131. .sidebar {
  132.     top: 0;
  133.     width: 500px;
  134.     position:fixed;
  135.     height: 100%;
  136. }
  137. .graphic {
  138.     background: url('http://static.tumblr.com/jmc3mkz/O2Cnaepgm/imagedef.png'); /* here you can change the image in the sidebar */
  139.     position:fixed;
  140.     width: 400px;
  141.     height: 100%;
  142. }
  143.  
  144. .menucontainer {
  145.     position:fixed;
  146.     width: 400px;
  147.     height: 100%;
  148.     opacity: 0;
  149.     background: rgba(0,0,0,0.4);
  150. }
  151.  
  152. .menucontainer:hover {
  153.     opacity: 1;
  154. }
  155.    
  156. .menu {
  157.     position: absolute;
  158.     text-align:center;
  159.     width: 400px;
  160.     bottom: 20px;
  161. }  
  162. .menu img {
  163.     width: 26px;
  164.     padding: 13px;
  165.     background: #ffffff;
  166.     border-radius:100%;
  167.     box-shadow: 0px 1px 1px #e5e5e5;
  168. }
  169.  
  170. .abouttext {
  171.     background: #302440;                        /* here you can change the background colour of the 'about me' bar */
  172.     position:fixed;
  173.     width: 86px;
  174.     height: 100%;
  175.     margin-left: 406px;
  176. }
  177.  
  178. .about {
  179.     color: #ffffff;                         /* here you can change the colour of the 'about me' text */
  180.     font-family: Arial, Helvetica, sans-serif;
  181.     text-transform: lowercase;
  182.     font-size: 88px;
  183.     font-weight: bold;
  184.     width: 86px;
  185.     height: 600px;
  186.     letter-spacing: -5px;
  187. }
  188.  
  189. .aboutrotate {
  190.     margin-top: 321px;
  191.     margin-left: 29px;
  192.     -moz-transform:rotate(270deg);
  193.     -webkit-transform:rotate(270deg);
  194.     -o-transform:rotate(270deg);
  195. }
  196.  
  197.  
  198. /*-------------------------- main content ---------------------------*/
  199. .infos {
  200.     padding: 25px;
  201.     position: relative;
  202.     border-top: 1px solid #ececec;                  /* here you can change the colour of the top border of the main box */
  203.     border-left: 1px solid  #302440;                /* here you can change the colour of the left border of the main box */
  204.     border-right: 1px solid #ececec;                /* here you can change the colour of the right border of the main box */
  205.     border-bottom: 1px solid  #302440;                  /* here you can change the colour of the bottom border of the main box */
  206.     font-family: Arial, Helvetica, sans-serif;
  207.     font-size: 12px;
  208.     text-align:justify;
  209.     }
  210.    
  211. .top {
  212.     height: 77px;
  213.     width: 100%;
  214.     position: fixed; z-index: 100;
  215.     background-color: #ffffff;                      /* IMPORTANT!! PUT HERE EXACTLY THE SAME COLOUR AS YOUR MAIN BACKGROUND COLOR (THE ONE YOU PUT IN HTML, BODY SECTION) */
  216.     top: 0px;
  217. }
  218.  
  219. .bottom {
  220.     height: 77px;
  221.     width: 100%;
  222.     position: fixed; z-index: 100;
  223.     background-color: #ffffff;                      /* IMPORTANT!! PUT HERE EXACTLY THE SAME COLOUR AS YOUR MAIN BACKGROUND COLOR (THE ONE YOU PUT IN HTML, BODY SECTION) */
  224.     bottom: 0px;
  225. }
  226.  
  227. .line1 {
  228.     width: 21px;
  229.     height: 1px;
  230.     background: #ffffff;                           /* IMPORTANT!! PUT HERE EXACTLY THE SAME COLOUR AS YOUR MAIN BACKGROUND COLOR (THE ONE YOU PUT IN HTML, BODY SECTION) */
  231.     margin-bottom:-1px;
  232.     position: relative;
  233.     z-index: 999;
  234. }
  235. .line2 {
  236.     width: 21px;
  237.     height: 1px;
  238.     background: #ffffff;                           /* IMPORTANT!! PUT HERE EXACTLY THE SAME COLOUR AS YOUR MAIN BACKGROUND COLOR (THE ONE YOU PUT IN HTML, BODY SECTION) */
  239.     margin-top:-1px;
  240.     margin-left: 529px;
  241.     position: relative;
  242.     z-index: 999;
  243. }
  244.  
  245. .infos p:first-child{
  246.     margin-top: 0px;
  247. }
  248. .infos p:last-child{
  249.     margin-bottom: 0px;
  250. }
  251.  
  252. .title {
  253.     font-family: Arial, Helvetica, sans-serif;
  254.     font-size: 16px;
  255.     font-weight: bold;
  256.     border-bottom: 1px solid #ececec;
  257.     color: #302440;
  258.     margin-bottom: 0px;
  259.     font-style: oblique;
  260.     }
  261.  
  262.  
  263. </style>
  264.    
  265.  
  266.  
  267.  
  268. </head>    
  269. <body>
  270. <div class="credit"><a href="http://noctislucisscaelum.tumblr.com"> <span class="nlc">NLC</span><br> <span class="themes">themes</span> </a></div>
  271. <div class="sidebar">
  272. <div class="graphic">
  273. <div class="menucontainer"><div class="menu">
  274. <a href="/"><img src="http://static.tumblr.com/jmc3mkz/SLWnaeo3j/home.png"></a>
  275. <a href="/ask"><img src="http://static.tumblr.com/jmc3mkz/2Zonaeoew/contact.png"></a>
  276. </div></div>
  277. </div>
  278. <div class="abouttext"><div class="about"><div class="aboutrotate">about&nbsp;me</div> </div>  </div>
  279. </div>
  280.  
  281. <div id="container">
  282. <div class="top"></div>
  283. <div class="bottom"></div>
  284. <div class="content">
  285.  
  286. <div class="line1"></div>
  287. <div class="infos">
  288.  
  289.  
  290. <p class="title">This is the title</p>
  291. <p>
  292. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget diam sed magna auctor suscipit. Praesent lacinia vehicula urna. Phasellus at purus at enim posuere adipiscing. Proin vel elementum risus, non lacinia urna. Quisque lectus urna, auctor eu arcu sit amet, scelerisque consequat turpis. Aliquam erat volutpat. Pellentesque dolor risus, hendrerit id convallis quis, luctus at mi. Aliquam vitae tortor id metus cursus pellentesque.
  293. <blockquote>Nulla facilisi. Aliquam lacinia blandit nisl ultrices facilisis. Curabitur sed mi eros. Aliquam venenatis, dolor vel sodales hendrerit, massa nibh tristique tortor, sit amet euismod nulla tellus sed sapien. </blockquote>
  294.  
  295. Sed tincidunt eros <a href="http://noctislucisscaelum.tumblr.com"> vitae massa </a>aliquam porta.
  296. </p><p>
  297. Cras ut egestas justo. Quisque iaculis vestibulum ultrices. Mauris viverra convallis justo, ut viverra libero varius sed. Sed lacinia feugiat dignissim. Praesent placerat venenatis nibh, eget sodales nulla scelerisque nec. Pellentesque eget mi purus. Praesent accumsan ante gravida lacus dapibus faucibus et sit amet ante. Donec turpis magna, semper et facilisis a, volutpat sit amet urna. Phasellus tincidunt neque ac neque tristique, at imperdiet tortor tincidunt. Morbi pretium enim id metus egestas eleifend. Donec consectetur cursus elit, a imperdiet orci ultrices a. Vivamus et euismod lacus. Suspendisse potenti. Etiam dui nunc, iaculis condimentum elementum luctus, sollicitudin et arcu. Nullam ut lorem consequat sapien pellentesque pulvinar sed eget massa. Aliquam id mauris eget magna placerat gravida sed vel leo.</p>
  298. </div>
  299. <div class="line2">
  300.  
  301. </div></div></div>
  302. </body>
  303. </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!