API tools faq
paste
silbrigthemes

Kontaktaufnahme (#11) – Light Version

silbrigthemes
Jun 24th, 2018
753
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. KONTAKTAUFNAHME
  7. Page #11 by @silbrigthemes
  8.  
  9. A simple contact page.
  10.  
  11. Features:
  12. Custom scrollbar, tooltips, text selection and mobile toolbar.
  13. Responsive layout.
  14. Combined ask and submit.
  15.  
  16. Rules:
  17. 1) Do not edit beyond recogniton.
  18. 2) Do not steal (parts of) the code.
  19. 3) Do not claim as your own.
  20. 4) Do not delete the credit.
  21. 5) Please like / reblog if using.
  22.  
  23. The code has been annotated to make customization easier.
  24. If you have any questions, need help or notice any oddities, please feel free to contact me:
  25.  
  26. silbrigthemes.tumblr.com/ask
  27. silbrigsupport.tumblr.com
  28.  
  29. Have fun with this page!
  30.  
  31. -->
  32.  
  33. <head>
  34.  
  35. <meta charset="utf-16">
  36. <title>Contact</title> <!-- Change title here. -->
  37. <link rel="shortcut icon" href="{Favicon}"/>
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  39. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  40.  
  41. <!-- Custom font Merriweather. -->
  42. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  43.  
  44. <!-- Necessary for the theme to be responsive. -->
  45. <meta name="viewport" content="width=device-width, initial-scale=1">
  46.  
  47. <!-- Necessary for the icon font to work. -->
  48. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  49.  
  50. <!-- Tooltips Script -->
  51. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  52. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  53. <script>
  54. (function($){
  55. $(document).ready(function(){
  56. $("[title]").style_my_tooltips({
  57. tip_follows_cursor:true,
  58. tip_delay_time:200,
  59. tip_fade_speed:300
  60. }
  61. );
  62. });
  63. })(jQuery);
  64. </script>
  65.  
  66. <!-- Changes the toolbar color on mobile. -->
  67. <meta name="theme-color" content="#d4e4fd"/>
  68.  
  69. <style>
  70.  
  71. body{
  72. margin:0;
  73. font-size:1em; /* 1em = 16px */
  74. background-color:#fefefe; /* body background */
  75. font-family:"Merriweather"; /* global font */
  76. color:#3a3533; /* text color */
  77. overflow-x:hidden;
  78. }
  79.  
  80. /* Bold Text */
  81. b, strong{
  82. font-weight:700; /* bold text */
  83. }
  84.  
  85. /* Italic Text */
  86. i, em{
  87. font-style:italic;
  88. font-weight:300; /* thin text */
  89. }
  90.  
  91. /* Links */
  92. a{
  93. text-decoration:none;
  94. border-bottom:2px solid #c7bfbd; /* link border */
  95. color:#3a3533; /* link text color */
  96. transition:0.5s;
  97. -moz-transition:0.5s;
  98. -o-transition:0.5s;
  99. -webkit-transition:0.5s;
  100. }
  101.  
  102. a:hover{
  103. text-decoration:none;
  104. border-bottom:2px solid #d4e4fd; /* link border, hover */
  105. transition:0.5s;
  106. -moz-transition:0.5s;
  107. -o-transition:0.5s;
  108. -webkit-transition:0.5s;
  109. }
  110.  
  111. /* Marked Text */
  112. mark{
  113. background-color:#d4e4fd; /* mark background */
  114. padding:0 0.25em;
  115. border-radius:1em; /* rounded corners */
  116. }
  117.  
  118. /* Underlined Text */
  119. u{
  120. text-decoration:none;
  121. border-bottom:2px solid #3a3533; /* border color */
  122. }
  123.  
  124. /* Custom Scrollbar */
  125. ::-webkit-scrollbar{
  126. width:10px;
  127. background-color:#ecf3fe;
  128. border:4px solid #d6d4d6;
  129. }
  130.  
  131. ::-webkit-scrollbar-thumb{
  132. width:10px;
  133. border-radius:5px;
  134. background-color:#d6d4d6;
  135. border:4px solid #ecf3fe;
  136. }
  137.  
  138. /* Custom Text SElection */
  139. ::selection{
  140. background-color:#ecf3fe; /* background color */
  141. }
  142.  
  143. ::-moz-selection{
  144. background-color:#ecf3fe;
  145. }
  146.  
  147. ::-o-selection{
  148. background-color:#ecf3fe;
  149. }
  150.  
  151. ::-webkit-selection{
  152. background-color:#ecf3fe;
  153. }
  154.  
  155. /* Custom Tooltips */
  156. #s-m-t-tooltip{
  157. max-width:300px;
  158. margin:15px;
  159. padding:0.5em;
  160. background:#d4e4fd; /* Tooltip Background Color */
  161. color:#031e49; /* Toolip Color */
  162. z-index:999999;
  163. font-size:12px;
  164. text-transform:uppercase;
  165. font-weight:500;
  166. }
  167.  
  168. /* LEFT SIDE */
  169. #left{
  170. width:50vw;
  171. height:100vh;
  172. background-color:#d6d4d6; /* background color */
  173. display:flex;
  174. align-items:center;
  175. justify-content:center;
  176. flex-direction:column;
  177. }
  178.  
  179. /* Title */
  180. #l-title{
  181. font-size:3em; /* 3em = 48px */
  182. }
  183.  
  184. /* Sidebar Image */
  185. #l-image img{
  186. width:300px;
  187. height:auto;
  188. }
  189.  
  190. /* Description */
  191. #l-desc{
  192. width:300px;
  193. text-align:justify; /* alt.: left, center, right */
  194. }
  195.  
  196. /* Navigation */
  197. #l-nav{
  198. width:300px;
  199. display:flex;
  200. align-items:center;
  201. justify-content:space-evenly;
  202. }
  203.  
  204. /* Navigation Bubbles */
  205. .icon{
  206. width:40px;
  207. height:40px;
  208. border-radius:50%; /* circle */
  209. background-color:#c7bfbd; /* background color */
  210. display:flex;
  211. align-items:center;
  212. justify-content:center;
  213. transition:0.5s;
  214. -moz-transition:0.5s;
  215. -o-transition:0.5s;
  216. -webkit-transition:0.5s;
  217. }
  218.  
  219. .icon:hover{
  220. background-color:#d4e4fd; /* hover background */
  221. transform:scale(1.1); /* increases size */
  222. transition:0.5s;
  223. -moz-transition:0.5s;
  224. -o-transition:0.5s;
  225. -webkit-transition:0.5s;
  226. }
  227.  
  228. a.navlink{
  229. color:#3a3533; /* link color */
  230. text-decoration:none;
  231. border-bottom:none;
  232. }
  233.  
  234. a.navlink:hover{
  235. color:#031e49; /* hover link color */
  236. border-bottom:none;
  237. }
  238.  
  239. /* RIGHT SIDE */
  240. #right{
  241. width:50vw;
  242. height:100vh;
  243. margin-left:50vw;
  244. margin-top:-100vh;
  245. background-color:inherit; /* same as body background */
  246. display:flex;
  247. align-items:center;
  248. justify-content:center;
  249. flex-direction:column;
  250. }
  251.  
  252. #right iframe{
  253. margin-left:-25%;
  254. }
  255.  
  256. /* Hides the tumblr app button. By @yeoli-thm */
  257. .tmblr-iframe--app-cta-button {
  258. display: none!important;
  259. }
  260.  
  261. /* Hides standard tumblr controls */
  262. body > iframe:first-child {
  263. display: none !important;
  264. }
  265.  
  266. /* Necessary for responsive layout */
  267. @media only screen and (max-width:800px){
  268. #left{
  269. width:100vw;
  270. }
  271.  
  272. #right{
  273. width:100vw;
  274. margin-top:0;
  275. margin-left:0;
  276. }
  277. }
  278.  
  279. @media only screen and (max-width:500px){
  280. #right iframe{
  281. width:300px;
  282. margin-left:calc(50% - 150px);
  283. }
  284. }
  285.  
  286. </style>
  287. </head>
  288.  
  289. <body>
  290. <div id="left">
  291. <!-- Title -->
  292. <div id="l-title">Kontakt</div>
  293. <!-- Sidebar Image -->
  294. <div id="l-image">
  295. <img src="https://mediaslide-europe.storage.googleapis.com/munichmodels/pictures/1285/1285/large-1509614986-5754b4242325e78a8f21a73ac77d0ae3.jpg"/>
  296. </div>
  297. <!-- Sidebar Description -->
  298. <div id="l-desc">
  299. <mark>Luisa Hartema</mark>. 23. Model @ IMG Models and <a href="https://www.munich-models.de/" title="munich models">Munich Models</a>.
  300. <p>It will take up to three working days for your message to be answered.</p>
  301. <!-- Navigation Links -->
  302. <div id="l-nav">
  303. <a class="navlink" href="https://www.instagram.com/luisahartema_/?hl=de" title="instagram">
  304. <div class="icon">
  305. <i class="fab fa-instagram"></i>
  306. </div>
  307. </a>
  308.  
  309. <a class="navlink" href="https://de-de.facebook.com/LuisaHartema/" title="facebook">
  310. <div class="icon">
  311. <i class="fab fa-facebook"></i>
  312. </div>
  313. </a>
  314.  
  315. <a class="navlink" href="https://twitter.com/luisa_hartema?lang=de" title="twitter">
  316. <div class="icon">
  317. <i class="fab fa-twitter"></i>
  318. </div>
  319. </a>
  320.  
  321. <a class="navlink" href="https://www.munich-models.de/find-models/1285-luisa-h/" title="munich models">
  322. <div class="icon">
  323. <i class="fas fa-user-circle"></i>
  324. </div>
  325. </a>
  326.  
  327. <a class="navlink" href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes">
  328. <div class="icon">
  329. <i class="fas fa-code"></i>
  330. </div>
  331. </a>
  332. </div>
  333. </div>
  334. </div>
  335.  
  336. <div id="right">
  337. <!-- Iframe for Askbox -->
  338. <p><iframe frameborder="0" scrolling="no" width="150%" height="150" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  339.  
  340. <!-- Iframe for submitbox -->
  341. <p><iframe frameborder="0" scrolling="no" width="150%" height="400" id="submit_form" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]--></p>
  342. </div>
  343. </body>
  344. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!