API tools faq
paste
Advertisement
altraviolence

page 01 - email (ask)

altraviolence
May 21st, 2017
2,209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. EMAIL ask page (01) by PEACHTHMS | peachthms.tumblr.com
  6. V1.1 - fixed home and extra links
  7. V1.2 - fixed ask link
  8.  
  9. - do not claim this page or any of the code as your own
  10. - do not redistribute this page or any of the code as your own
  11. - do not mix my code with another theme maker's code
  12. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  13.  
  14. -->
  15.    
  16. <head>
  17.  
  18. <title>message</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <script src="https://use.fontawesome.com/3ef4dfb6e0.js"></script>
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  25.  
  26. <style>
  27.  
  28. * {
  29.     padding: 0;
  30.     margin: 0;
  31. }  
  32.  
  33. ::-moz-selection {
  34.     background-color: #efb2a0; /** selection colour **/
  35.     color: #ffffff; /** font colour **/
  36. }
  37.  
  38. ::selection {
  39.     background-color: #efb2a0; /** selection colour **/
  40.     color: #ffffff; /** font colour **/
  41. }
  42.  
  43. ::-webkit-scrollbar {
  44.     display: none;
  45. }
  46.  
  47. body {
  48.     background-color: #eeeeee;
  49.     font-family: 'Lato', sans-serif;
  50.     color: #393939;
  51. }
  52.  
  53. #container {
  54.     width: 100%;
  55.     height: 100%;
  56. }
  57.  
  58. #content {
  59.     background-color: #ffffff;
  60.     position: absolute;
  61.     margin: auto auto;
  62.     top: 0;
  63.     right: 0;
  64.     bottom: 0;
  65.     left: 0;
  66.     width: 600px;
  67.     height: 530px;
  68.     -webkit-box-shadow: 2px 2px 0px 0px rgb(221, 221, 221); /** box shadow colour **/
  69.     -moz-box-shadow: 2px 2px 0px 0px rgb(221, 221, 221); /** box shadow colour **/
  70.     box-shadow: 2px 2px 0px 0px rgb(221, 221, 221); /** box shadow colour **/
  71. }
  72.  
  73. #top {
  74.     width: 100%;
  75. }
  76.  
  77. #buttons {
  78.     width: calc(100%-14px);
  79.     padding: 7px;
  80.     border-bottom: 2px solid #eeeeee; /** buttons border colour **/
  81. }
  82.  
  83. #buttons ul {
  84.     list-style: none;
  85. }
  86.  
  87. #buttons li {
  88.     display: inline-block;
  89.     padding: 0 5px;
  90. }
  91.  
  92. .but {
  93.     width: 10px;
  94.     height: 10px;
  95.     border-radius: 100%;
  96.     -moz-border-radius: 100%;
  97.     -webkit-border-radius: 100%;
  98. }
  99.  
  100. #options {
  101.     text-align: center;
  102.     width: 100%;
  103.     padding: 30px 0;
  104.     border-bottom: 2px solid #eeeeee; /** options border colour **/
  105. }
  106.  
  107. #options ul {
  108.     list-style: none;
  109.     margin-left: 10px;
  110. }
  111.  
  112. #options li {
  113.     display: inline-block;
  114.     text-align: center;
  115.     margin: 0 15px;
  116. }
  117.  
  118. #options li span {
  119.     display: block;
  120.     font-size: 10px;
  121.     text-transform: uppercase;
  122.     margin-top: 5px;
  123. }
  124.  
  125. #mid {
  126.     width: 100%;
  127.     display: inline-block;
  128.     margin-top: 30px;
  129. }
  130.  
  131. #mid h1 {
  132.     float: left;
  133.     text-align: center;
  134.     width: 70px;
  135.     margin: 0 10px;
  136.     margin-top: 15px;
  137.     color: #efb2a0; /** to and subject font colour **/
  138.     font-size: 10px;
  139.     text-transform: uppercase;
  140. }
  141.  
  142. #mid p {
  143.     float: left;
  144.     width: 450px;
  145.     font-size: 12px;
  146.     margin: 3px 0;
  147.     padding: 10px;
  148.     border: 1px solid #eeeeee;
  149. }
  150.  
  151. #bot {
  152.     margin: 0 auto;
  153.     margin-left: 90px;
  154. }
  155.  
  156. #ask {
  157.     margin: 30px 0;
  158.     overflow: scroll;
  159. }
  160.  
  161. #close {
  162.     background-color: #ffbcbc; /** first button **/
  163. }
  164.  
  165. #max {
  166.     background-color: #bcffbd; /** second button **/
  167. }
  168.  
  169. #min {
  170.     background-color: #fcffbc; /** third button **/
  171. }
  172.  
  173. i {
  174.     padding: 12px;
  175.     color: #efb2a0; /** icon colour **/
  176.     background-color: #eeeeee; /** icon square background colour **/
  177.     border-radius: 5%;
  178.     -moz-border-radius: 5%;
  179.     -webkit-border-radius: 5%;
  180. }
  181.  
  182. #credit {
  183.     text-transform: uppercase;
  184.     font-size: 8px;
  185.     letter-spacing: 2px;
  186.     bottom: 15px;
  187.     right: 15px;
  188.     position: fixed;
  189. }
  190.  
  191. #credit a {
  192.     color: #aaaaaa;
  193.     text-decoration: none;
  194.     -webkit-transition: all .8;
  195.     -moz-transition: all .8s;
  196.     -o-transition: all .8s;
  197.     -ms-transition: all .8s;    
  198.     transition: all .8s;
  199. }
  200.  
  201. #credit a:hover {
  202.     color: #efb2a0;
  203. }
  204.  
  205. </style>    
  206.  
  207. </head>
  208.  
  209. <body>
  210.  
  211. <div id="container">
  212.  
  213. <div id="content">
  214.    
  215.     <div id="top">
  216.         <div id="buttons">
  217.  
  218.         <!-- to edit the # to your link, also change link name to something appropriate
  219.              e.g. about or icons
  220.              be sure to keep it in the quotation marks!
  221.         -->
  222.  
  223.         <ul>
  224.             <li><a href="/" title="home"><div class="but" id="close"></div></a></li>
  225.             <li><a href="#" title="link name"><div class="but" id="max"></div></a></li>
  226.             <li><a href="#" title="link name"><div class="but" id="min"></div></a></li>
  227.         </ul>
  228.         </div>
  229.  
  230.         <div id="options">
  231.         <ul>
  232.             <li><i class="fa fa-paper-plane" aria-hidden="true"></i><span>send</span></li>
  233.             <li><i class="fa fa-paperclip" aria-hidden="true"></i><span>attach</span></li>
  234.             <li><i class="fa fa-address-card" aria-hidden="true"></i><span>contacts</span></li>
  235.             <li><i class="fa fa-font" aria-hidden="true"></i><span>fonts</span></li>
  236.             <li><i class="fa fa-eyedropper" aria-hidden="true"></i><span>colours</span></li>
  237.             <li><i class="fa fa-floppy-o" aria-hidden="true"></i><span>save</span></li>
  238.            
  239.         </ul>
  240.         </div>
  241.     </div>
  242.    
  243.     <div id="mid">
  244.         <h1>to :</h1><p>peachthms</p> <!-- put your blog url here! -->
  245.        
  246.         <h1>subject :</h1><p>please read my faq!</p> <!-- write a short message here -->
  247.     </div>
  248.    
  249.     <div id="bot">
  250.         <div id="ask">
  251.             <iframe frameborder="0" height="190px" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="470px" style="background-color: transparent; overflow: hidden;"></iframe>
  252.             <!-- ensure ask is enabled! -->
  253.         </div>
  254.     </div>
  255.    
  256. </div>
  257.        
  258. </div>  
  259.  
  260. <div id="credit">
  261. <a href="http://peachthms.tumblr.com" title="page by peachthms">< / ></a>
  262. </div>
  263.  
  264.  
  265. </body>
  266.  
  267. </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!