API tools faq
paste
Advertisement
enbythemes

page 03: blossom

enbythemes
Jul 9th, 2020 (edited)
516
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.78 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. blossom © xroub.tumblr.com
  3.  
  4. THANK YOU TO
  5. yeolithm.com for the css carousel tutorial
  6.  
  7. COLORS:
  8. background: #fafafa
  9. box backgrounds: #fff
  10. box shadows: #eee
  11. sidebar navi (hover): #ddd
  12. sidebar navi (selected): #999
  13. accent (pale pink): #e5ceca
  14. answer background: #f0f0f0
  15. social media links background: #fafafa
  16.  
  17. ICONS:
  18. sidebar navi and user information icons: https://feathericons.com/
  19. social media icons: https://honeybee.suiomi.com/
  20. -->
  21. <!DOCTYPE html>
  22. <html>
  23. <head>
  24. <link rel="shortcut icon" href="{Favicon}" />
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  26. <title>{Title}</title>
  27.  
  28. <!-- scripts -->
  29. <script src="https://unpkg.com/feather-icons"></script>
  30. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  31.  
  32. <style>
  33. /* html */
  34. * {
  35. margin: 0;
  36. padding: 0;
  37. box-sizing: border-box;
  38. }
  39.  
  40. body {
  41. font-family: sans-serif;
  42. font-size: 12px;
  43. line-height: 1.5em;
  44. text-align: justify;
  45. color: #333;
  46. background-color: #fafafa;
  47. }
  48.  
  49. /* scrollbar */
  50. ::-webkit-scrollbar {width: 0px;}
  51. ::-webkit-scrollbar-thumb {background: #e5ceca;}
  52.  
  53. /* text selection */
  54. ::selection {
  55. background: #e5ceca;
  56. color: #fff;
  57. }
  58.  
  59. p {margin: 1em 0;}
  60. b {color: #e5ceca;}
  61.  
  62. a {
  63. text-decoration: none;
  64. color: #e5ceca;
  65. transition: all 0.4s ease;
  66. -webkit-transition: all 0.4s ease;
  67. -moz-transition: all 0.4s ease;
  68. -o-transition: all 0.4s ease;
  69. }
  70.  
  71. a:hover {
  72. color: #aaa;
  73. border-bottom: 2px solid #e5ceca;
  74. }
  75.  
  76. blockquote {
  77. margin: 1em;
  78. padding-left: 10px;
  79. border-left: 2px solid #e5ceca;
  80. }
  81.  
  82. /* main */
  83. #container {
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. min-height: 100vh;
  88. }
  89.  
  90. #carousel, #navigation {
  91. flex: initial;
  92. display: block;
  93. }
  94.  
  95. #carousel {
  96. overflow: hidden;
  97. width: 500px;
  98. height: 400px;
  99. border-radius: 4px;
  100. background-color: #fff;
  101. border: 1px solid #eee;
  102. }
  103.  
  104. .p-wrapper {
  105. position: relative;
  106. width: 100%;
  107. height: 100%;
  108. transition: transform 0.4s ease-in-out;
  109. }
  110.  
  111. #button_a:checked ~ #carousel .p-wrapper {
  112. -webkit-transform: translateY(0);
  113. transform: translateY(0);
  114. }
  115.  
  116. #button_b:checked ~ #carousel .p-wrapper {
  117. -webkit-transform: translateY(-100%);
  118. transform: translateY(-100%);
  119. }
  120.  
  121. #button_c:checked ~ #carousel .p-wrapper {
  122. -webkit-transform: translateY(-200%);
  123. transform: translateY(-200%);
  124. }
  125.  
  126. #button_d:checked ~ #carousel .p-wrapper {
  127. -webkit-transform: translateY(-300%);
  128. transform: translateY(-300%);
  129. }
  130.  
  131. [class^="panel_"] {
  132. overflow: auto;
  133. position: relative;
  134. width: inherit;
  135. height: inherit;
  136. padding: 15px;
  137. }
  138.  
  139. #navigation {
  140. margin-right: 24px;
  141. }
  142.  
  143. #navigation svg {
  144. width: 25px;
  145. vertical-align: middle;
  146. }
  147.  
  148. [class^="label_"], #navigation a {
  149. display: block;
  150. cursor: pointer;
  151. margin: 10px 0;
  152. width: 40px;
  153. height: 40px;
  154. line-height: 40px;
  155. text-align: center;
  156. border-radius: 4px;
  157. border: 1px solid #eee;
  158. color: #aaa;
  159. background-color: #fff;
  160. transition: all 0.3s ease;
  161. }
  162.  
  163. [class^="label_"]:hover, #navigation a:hover {
  164. color: #444;
  165. background-color: #ddd;
  166. }
  167.  
  168. #button_a:checked ~ #navigation .label_a,
  169. #button_b:checked ~ #navigation .label_b,
  170. #button_c:checked ~ #navigation .label_c,
  171. #button_d:checked ~ #navigation .label_d {
  172. cursor: default;
  173. color: #fff;
  174. background-color: #999;
  175. }
  176.  
  177. /* about section */
  178. .user {
  179. position: fixed;
  180. width: 100px;
  181. max-height: 320px;
  182. }
  183.  
  184. .user img {width: 100%;}
  185.  
  186. .userinfo {margin-top: 10px;}
  187.  
  188. .userinfo svg {
  189. width: 1em;
  190. vertical-align: middle;
  191. margin-right: 5px;
  192. }
  193.  
  194. .ab {
  195. position: fixed;
  196. width: 350px;
  197. max-height: 320px;
  198. margin-left: 120px;
  199. padding: 0 10px;
  200. overflow: auto;
  201. }
  202.  
  203. .qu {
  204. position: fixed;
  205. width: 470px;
  206. bottom: 15px;
  207. left: 15px;
  208. padding: 8px;
  209. background: #fafafa;
  210. text-align: center;
  211. font-style: italic;
  212. }
  213.  
  214. /* faq section */
  215. .q, .a {
  216. padding: 8px;
  217. margin-bottom: 10px;
  218. }
  219.  
  220. .q {background: #e5ceca;}
  221. .a {background: #f0f0f0;}
  222.  
  223. /* tags section */
  224. .ttl {
  225. text-transform: uppercase;
  226. letter-spacing: 1px;
  227. margin-bottom: 5px;
  228. }
  229.  
  230. .group {margin-bottom: 15px;}
  231. .group a {margin: 0 .5em 0 0;}
  232.  
  233. /* links section */
  234. .panel_d a:hover {border: none;}
  235.  
  236. .group img {
  237. width: 45px;
  238. border-radius: 100%;
  239. transition: all 0.4s ease;
  240. -webkit-transition: all 0.4s ease;
  241. -moz-transition: all 0.4s ease;
  242. -o-transition: all 0.4s ease;
  243. }
  244.  
  245. .group img:hover {
  246. padding: 3px;
  247. border: 1px solid #ccc;
  248. transition: all 0.4s ease;
  249. -webkit-transition: all 0.4s ease;
  250. -moz-transition: all 0.4s ease;
  251. -o-transition: all 0.4s ease;
  252. }
  253.  
  254. .links li {
  255. display: inline-block;
  256. width: calc(50% - 15px);
  257. background: #fafafa;
  258. padding: 5px;
  259. margin: .5em;
  260. border: 1px solid #eee;
  261. }
  262.  
  263. .links .th {
  264. width: 1em;
  265. vertical-align: middle;
  266. margin-right: 3px;
  267. color: #aaa;
  268. }
  269.  
  270. .links .usn {float: right;}
  271.  
  272. /* tumblr controls by magnusthemes */
  273. .iframe-controls--desktop {
  274. position:fixed;
  275. top:0px;
  276. right:0px;
  277. z-index:214748364789123456789;
  278. filter:invert(100%);
  279. -webkit-filter:invert(100%);
  280. -webkit-transform:scale(0.6,0.6);
  281. -webkit-transform-origin: 100% 0%;
  282. -ms-transform-origin:100% 0%;
  283. -ms-transform:scale(0.6,0.6);
  284. transform:scale(0.6,0.6);
  285. transform-origin:100% 0%;
  286. }
  287.  
  288. /*credit */
  289. .crd {
  290. bottom: 10px;
  291. right: 10px;
  292. position: fixed;
  293. }
  294.  
  295. </style>
  296. </head>
  297. <body>
  298. <div id="container">
  299.  
  300. <!-- sidebar navigation -->
  301. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  302. <input hidden type="radio" name="carousel-control" id="button_b"/>
  303. <input hidden type="radio" name="carousel-control" id="button_c"/>
  304. <input hidden type="radio" name="carousel-control" id="button_d"/>
  305.  
  306. <!-- navigation icons -->
  307. <div id="navigation">
  308. <label for="button_a" class="label_a"> <span class="th th-users-o"></span> </label>
  309. <label for="button_b" class="label_b"> <span class="th th-paper-plane-o"></span></label>
  310. <label for="button_c" class="label_c"> <span class="th th-folder-2-o"></span></label>
  311. <label for="button_d" class="label_d"> <span class="th th-link"></span> </label>
  312.  
  313. <div style="margin-top: 120px;">
  314. <a href="/" title="return"><span class="th th-home-o"></span></a></>
  315. <a href="https://enbythemes.tumblr.com" title="code by enbythemes"><span class="th th-code"></span></a>
  316. </div>
  317. </div>
  318.  
  319. <div id="carousel">
  320. <div class="p-wrapper">
  321.  
  322. <!-- about section -->
  323. <section class="panel_a">
  324. <div class="user">
  325. <img src="{PortraitURL-128}">
  326.  
  327. <div class="userinfo">
  328. <i data-feather="user"></i> name <br>
  329. <i data-feather="circle"></i> pronouns <br>
  330. <i data-feather="calendar"></i> age <br>
  331. <i data-feather="map-pin"></i> whatever
  332. </div>
  333. </div>
  334.  
  335. <!-- about/bio -->
  336. <div class="ab">
  337. <p><blockquote>Here is the about section. <b>Bold.</b> <i>Italic.</i> <a href="/">A link.</a></blockquote></p>
  338.  
  339. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare faucibus diam id maximus. Fusce at efficitur nunc. Curabitur sed ullamcorper orci. Nam nulla enim, ultricies nec lectus a, commodo volutpat nisi. Pellentesque facilisis lacinia ante, eu pulvinar ante varius a. Fusce tincidunt efficitur tempor. Praesent pretium felis consectetur posuere sagittis. Sed luctus nisl non vestibulum semper. Vivamus mi velit, porttitor ac malesuada at, vulputate venenatis augue.</p>
  340. </div>
  341.  
  342. <!-- quote -->
  343. <div class="qu">
  344. "quote goes here"
  345. </div>
  346. </section>
  347.  
  348. <!-- faq section -->
  349. <section class="panel_b">
  350.  
  351. <div class="q">
  352. Is this a question?
  353. </div>
  354.  
  355. <div class="a">
  356. Yes, and this is an answer.
  357. </div>
  358.  
  359. <!-- ask box -->
  360. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" 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>
  361. </section>
  362.  
  363. <!-- links section -->
  364. <section class="panel_c">
  365.  
  366. <div class="group">
  367. <div class="ttl">group title</div>
  368. <a href="/">#tag one</a>
  369. <a href="/">#tag two</a>
  370. <a href="/">#tag three</a>
  371. </div>
  372. <!-- copy and paste as needed -->
  373. </section>
  374.  
  375. <!-- other section -->
  376. <section class="panel_d">
  377. <div class="group">
  378. <div class="ttl">other blogs</div>
  379. <a href="/" title="blog name"><img src="https://via.placeholder.com/45"></a>
  380. </div>
  381.  
  382. <div class="group">
  383. <div class="ttl">cool blogs</div>
  384. <a href="/" title="blog name"><img src="https://via.placeholder.com/45"></a>
  385. </div>
  386.  
  387. <div class="links">
  388. <ul>
  389. <!-- get more icons at honeybee.suiomi.com-->
  390. <li><span class="th th-instagram"></span><a class="usn" href="/">@username</a></li>
  391. <li><span class="th th-twitter"></span><a class="usn" href="/">@username</a></li>
  392. </ul>
  393. </div>
  394. </section>
  395.  
  396. </div>
  397. </div>
  398. </div>
  399. <!-- credit -->
  400. <!-- if you ever want to move my credit, please send me an ask or message to let me know -->
  401. <a href="" class="crd" title="code by rou">enby</a>
  402. <script>
  403. feather.replace()
  404. </script>
  405. </body>
  406. </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!