API tools faq
paste
atlasthemes

wip page 03

atlasthemes
Nov 6th, 2019 (edited)
1,370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.33 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3.  
  4.  
  5. wip page 03
  6. by @bebewrites
  7. pls do not remove credit,
  8. thanks!<3
  9.  
  10.  
  11.  
  12. ------------------------------------------------------------------------->
  13.  
  14. <!DOCTYPE html>
  15. <head>
  16. <link rel="shortcut icon" href="{Favicon}">
  17.  
  18. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  19.  
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
  21. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  22.  
  23. <!-- title for browser tab -->
  24. <title>works in progress</title>
  25.  
  26. <!-- googe fonts -->
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap" rel="stylesheet">
  29.  
  30. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900,900i&display=swap" rel="stylesheet">
  31.  
  32.  
  33. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  34. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  35.  
  36. <script>
  37. (function($){
  38. $(document).ready(function(){
  39. $("a[title]").style_my_tooltips({
  40. tip_follows_cursor:true,
  41. tip_delay_time:90,
  42. tip_fade_speed:300,
  43. attribute:"title"
  44. });
  45. });
  46. })(jQuery);
  47. </script>
  48.  
  49. <style type="text/css">
  50.  
  51. /* ---------------------- change colors & font here --------------------- */
  52.  
  53. :root {
  54. --body:#777777; /* text color */
  55. --link-color:#999999; /* color of links */
  56. --accent-one:#f4ece2;
  57. --accent-two:#f3dcd5;
  58. --bg-color:#fbfbfb; /* background */
  59. --heading:#555555; /* heading text color */
  60. --panel-color:#f6f6f6;
  61. --side-links:#ffffff; /* side nav link color */
  62. --project-link-hover-text:#ffffff; /* project link text on hover */
  63. --borders:#eeeeee;
  64. --shadow:#dddddd; /* container shadow color */
  65.  
  66. --body-font:'PT Sans';
  67. --text-size:12px;
  68. --text-align:justify; /* or change to LEFT */
  69. --body-line-height:18px;
  70. }
  71.  
  72. /* ---------------------------------------------------------------------- */
  73.  
  74.  
  75. @-webkit-keyframes fadein {
  76. 0% {opacity: 0;}
  77. 100% { opacity: 1; }}
  78.  
  79. @-moz-keyframes fadein {
  80. 0% { opacity: 0; }
  81. 100% { opacity: 1; }}
  82.  
  83. @keyframes fadein {
  84. 0% { opacity: 0; }
  85. 100% { opacity: 1; }}
  86.  
  87.  
  88. #s-m-t-tooltip {max-width:300px;margin-top:-30px;margin-left:0px;letter-spacing:0.5px;padding:1px 6px;text-align:center;text-transform:lowercase;color:var(--link-color);background-color:#ffffff;border:1px solid #f4f4f4;z-index:999999;}
  89.  
  90. body {
  91. font-family:var(--body-font);
  92. font-size:var(--text-size);
  93. color:var(--body);
  94. line-height:var(--body-line-height);
  95. text-align:var(--text-align);
  96. background-color:var(--bg-color);
  97. -moz-osx-font-smoothing:grayscale;
  98. -webkit-font-smoothing:antialiased;
  99. font-smoothing:antialiased;
  100. -webkit-animation: fadein 1.3s;
  101. -moz-animation:fadein 1.3s;
  102. animation:fadein 1.3s;
  103. }
  104.  
  105. a {color:var(--link-color);text-decoration:none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  106.  
  107. a:hover {color:var(--accent);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  108.  
  109.  
  110. #container {
  111. display:block;
  112. position:relative;
  113. margin:100px auto;
  114. width:450px;
  115. height:auto;
  116. border-radius:5px;
  117. background-color:#fff;
  118. box-shadow:3px 3px 5px var(--shadow);
  119. }
  120.  
  121. #sidenav {position:absolute;overflow:hidden;left:-30px;z-index:100;}
  122.  
  123. #sidenav svg {
  124. margin-bottom:-2px;
  125. }
  126.  
  127. #sidenav a {
  128. display:block;
  129. color:var(--side-links);
  130. background-color:var(--accent-two);
  131. padding:4px 8px;
  132. margin-bottom:5px;
  133. border-radius:5px 0 0 5px;
  134. width:14px;
  135. }
  136.  
  137. #sidenav a:hover {color:var(--heading);}
  138.  
  139. header {display:block;width:100%;height:auto;background-color:#fff;} #header-img {width:100%;height:200px;background-image: linear-gradient(to right, var(--accent-one) , var(--accent-two) );display: flex;align-items: center;justify-content: center;} #header-img img {width:100%;height:200px;-webkit-filter: grayscale(100%);filter: grayscale(100%);mix-blend-mode:overlay;opacity:1;}
  140.  
  141. .page-title {
  142. position: absolute;
  143. font-family:'Playfair Display';
  144. font-weight:900;
  145. font-size:26px;
  146. letter-spacing:2px;
  147. font-style:italic;
  148. text-shadow: 1px 1px 3px #444;
  149. color:var(--heading);
  150. text-align:center;
  151. }
  152.  
  153. section {padding:15px;border-bottom:1px solid #f6f6f6;}
  154.  
  155. .accordion {
  156. background-color: #fff;
  157. cursor: pointer;
  158. padding: 15px;
  159. width: 100%;
  160. border:0px;
  161. outline: none;
  162. font-family:'PT Sans';
  163. color:var(--heading);
  164. text-align: left;
  165. font-size:var(--text-size);
  166. letter-spacing:0.5px;
  167. text-transform:uppercase;
  168. font-weight:700;
  169. transition: 0.5s;
  170. }
  171.  
  172. .wip-image {display:inline-block;width:30px;height:30px;float:left;margin-right:10px;vertical-align:middle;} .wip-image img {width:30px;height:30px;border-radius:100%;-webkit-filter: saturate(50%);filter: saturate(50%);}
  173.  
  174. .info {display:inline-block;height:30px;width:335px;} .info span {font-size:var(--text-size);color:var(--link-color);font-style:italic;text-transform:none;font-weight:400;display:block;}
  175.  
  176. .links {display:grid;grid-template-columns:23% 23% 23% 23%;grid-gap:2%;margin:15px 0px;} .links a {display:block;background-color:#fff;padding:2px 5px;text-align:center;} .links a:hover {color:var(--project-link-hover-text);background-color:var(--accent-two);}
  177.  
  178. .active, .accordion:hover {background-color: var(--accent-one);}
  179.  
  180. .panel {
  181. padding: 0 15px;
  182. max-height: 0;
  183. margin-top:-1px;
  184. text-transform:none;
  185. overflow: hidden;
  186. background-color:var(--panel-color);
  187. border-bottom:1px solid var(--accent-two);
  188. transition: 0.3s ease-out;
  189. }
  190.  
  191. .accordion:after {
  192. content: '\f078';
  193. font-family:'FontAwesome';
  194. font-size:9px;
  195. color: #777;
  196. float: right;
  197. line-height:30px;
  198. margin-left: 5px;
  199. transition: 0.4s ease-in-out;
  200. }
  201.  
  202. .active:after {transform:rotate(180deg);transition: 0.4s ease-in-out;}
  203.  
  204. iframe.tmblr-iframe {display:none;}
  205.  
  206. /* don't edit, thanks! <3 */
  207. .atlas {position:fixed;right:25px;bottom:20px;} .atlas a {color:#bbb;background:transparent;font-family:times new roman;font-size:11px;} .atlas a:hover {color:var(--accent);}
  208.  
  209. </style>
  210. </head>
  211. <body>
  212.  
  213. <!------------------------------------------------------------------------->
  214. <!-- -->
  215. <!-- customization starts here -->
  216. <!-- -->
  217. <!------------------------------------------------------------------------->
  218.  
  219. <div id="container">
  220.  
  221. <div id="sidenav" class="sidenav">
  222. <a href="/" id="one" title="home"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a>
  223. <a href="/" id="two" title="contact"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></a>
  224. <a href="/" id="three" title="history"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg></a>
  225. <a href="/" id="four" title="dash"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></a>
  226. </div>
  227.  
  228.  
  229.  
  230. <header><!-- header -->
  231.  
  232. <!-- header image is 450px by 200px -->
  233. <div id="header-img">
  234. <img src="https://live.staticflickr.com/65535/48600849607_07607c4c90_o.jpg"/>
  235.  
  236. <!-- header title -->
  237. <div class="page-title">works in progress</div>
  238.  
  239. </div>
  240. </header><!-- end header -->
  241.  
  242.  
  243.  
  244. <!-- O N E ---------------------------------------------------------------->
  245.  
  246. <section>
  247. <button class="accordion">
  248.  
  249. <!-- wip image -->
  250. <div class="wip-image">
  251. <img src="https://live.staticflickr.com/65535/49024509682_6fdcd31b2b_o.jpg"/></div>
  252.  
  253. <div class="info">
  254.  
  255. <!-- title -->
  256. title one
  257.  
  258. <!-- subtitle -->
  259. <span>adult fantasy</span>
  260.  
  261. </div></button>
  262.  
  263. <div class="panel">
  264.  
  265. <!-- short synopsis, keep inside <p> </p> tags -->
  266. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa.</p>
  267.  
  268. <!-- links -->
  269. <div class="links">
  270. <a href="/">link</a>
  271. <a href="/">link</a>
  272. <a href="/">link</a>
  273. <a href="/">link</a>
  274. </div>
  275.  
  276. </div>
  277. </section>
  278.  
  279.  
  280. <!-- T W O ---------------------------------------------------------------->
  281. <section>
  282. <button class="accordion">
  283.  
  284. <div class="wip-image">
  285. <img src="https://live.staticflickr.com/65535/49024300336_90906bec9b_o.jpg"/></div>
  286.  
  287. <div class="info">
  288. title two
  289.  
  290. <span>ya sci-fi</span>
  291. </div>
  292. </button>
  293.  
  294. <div class="panel">
  295. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa.</p>
  296.  
  297. <div class="links">
  298. <a href="/">link</a>
  299. <a href="/">link</a>
  300. <a href="/">link</a>
  301. <a href="/">link</a>
  302. </div>
  303.  
  304. </div>
  305. </section>
  306.  
  307.  
  308. <!-- T H R E E ------------------------------------------------------------>
  309. <section>
  310. <button class="accordion">
  311.  
  312. <div class="wip-image">
  313. <img src="https://live.staticflickr.com/65535/49023781998_3b6cfbfe25_o.jpg"/></div>
  314.  
  315. <div class="info">
  316. title three
  317.  
  318. <span>poetry collection</span>
  319. </div>
  320. </button>
  321.  
  322. <div class="panel">
  323. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa.</p>
  324.  
  325. <div class="links">
  326. <a href="/">link</a>
  327. <a href="/">link</a>
  328. <a href="/">link</a>
  329. <a href="/">link</a>
  330. </div>
  331.  
  332. </div>
  333. </section>
  334.  
  335. </div><!-- end container - don't edit beyond this point -->
  336.  
  337. <!-- pls don't remove, thanks!<3 -->
  338. <div class="atlas"><a href="https://www.bebewrites.tumblr.com" target="_blank" title="@bebewrites"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></a></div>
  339.  
  340.  
  341. <script>
  342. var acc = document.getElementsByClassName("accordion");
  343. var i;
  344.  
  345. for (i = 0; i < acc.length; i++) {
  346. acc[i].addEventListener("click", function() {
  347. this.classList.toggle("active");
  348. var panel = this.nextElementSibling;
  349. if (panel.style.maxHeight){
  350. panel.style.maxHeight = null;
  351. } else {
  352. panel.style.maxHeight = panel.scrollHeight + "px";
  353. }
  354. });
  355. }
  356. </script>
  357.  
  358. </body>
  359. </html>
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!