API tools faq
paste
aeternaphantasia

all-in-one #01 revamp: coireil

aeternaphantasia
Nov 1st, 2014
5,912
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>hello my love.</title> <!--change the title of the page here! this will appear as the title at your current tab.-->
  5. <link rel="shortcut icon" href="{Favicon}">
  6.  
  7. <!--
  8.  
  9. All in One #01 REVAMP: Coiréil
  10. coded by kuzuriha
  11.  
  12. As this is a revamp theme, the earlier version of the theme (both the preview and the code) will be removed, and the code won't be updated unless there's a major bug/glitch. The previous version of this page was titled "Calliope".
  13.  
  14. 1. Don't remove the credit.
  15. 2. Don't move the credit. Just leave it there.
  16. 3. Don't use as a base code.
  17. 4. Please enjoy! If you find any bugs, please contact me! c:
  18.  
  19. This is the entry for Coding Cabin's Award Challenge, The Color of the Year.
  20.  
  21. -->
  22.  
  23. <!--Heads up!-->
  24.  
  25. <!--Please read the code carefully! I've tried my best to make that all I'm talking about here makes sense and to group the codes based on their usage but if you are still having trouble, please drop me an ask! c: -->
  26.  
  27. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  28. <script src="https://static.tumblr.com/wdp3vza/lQLplu2w7/scrolloverflow.min.js"></script>
  29. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css"/>
  30. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
  31. <script src="https://static.tumblr.com/wdp3vza/pJvosgmgd/jquery.style-my-tooltips.js"></script>
  32.  
  33. <script>
  34.  
  35. (function($){
  36.  
  37. $(document).ready(function(){
  38.  
  39. $("a[title]").style_my_tooltips({
  40.  
  41. tip_follows_cursor:true,
  42.  
  43. tip_delay_time:0,
  44.  
  45. tip_fade_speed:0,
  46.  
  47. attribute:"title"
  48.  
  49. });
  50.  
  51. });
  52.  
  53. })(jQuery);
  54.  
  55. </script>
  56.  
  57. <style type="text/css">
  58. @import url('https://fonts.googleapis.com/css?family=ABeeZee|Crete+Round');
  59. iframe.tmblr-iframe {
  60. z-index:99999999999999!important;
  61. {block:ifstickydescription}
  62. top:25px!important;
  63. {/block:ifstickydescription}
  64.  
  65. {block:ifnotstickydescription}
  66. top:0!important;
  67. {/block:ifnotstickydescription}
  68.  
  69. right:0!important;
  70. opacity:0.4;
  71. /* delete invert(1) from here */
  72. filter:invert(1) contrast(150%);
  73. -webkit-filter:invert(1) contrast(150%);
  74. -o-filter:invert(1) contrast(150%);
  75. -moz-filter:invert(1) contrast(150%);
  76. -ms-filter:invert(1) contrast(150%);
  77. /* to here if your blog has a dark background */
  78. transform:scale(0.65);
  79. transform-origin:100% 0;
  80. -webkit-transform:scale(0.65);
  81. -webkit-transform-origin:100% 0;
  82. -o-transform:scale(0.65);
  83. -o-transform-origin:100% 0;
  84. -moz-transform:scale(0.65);
  85. -moz-transform-origin:100% 0;
  86. -ms-transform:scale(0.65);
  87. -ms-transform-origin:100% 0;}
  88.  
  89. iframe.tmblr-iframe:hover {
  90. opacity:0.6!important;
  91. }
  92.  
  93. #s-m-t-tooltip {
  94. max-width:200px;
  95. padding:5px 10px 5px 10px;
  96. margin:20px 14px 7px 10px;
  97. background-color:#FF6F61; /* change the background color */
  98. font-style: normal;
  99. font-size:12px; /* change the font size */
  100. line-height:13px;
  101. font-family:consolas;
  102. letter-spacing:1px; /* change the letter spacing */
  103. text-transform:uppercase; /* can be uppercase, lowercase, none*/
  104. color:#fff; /* change the text color */
  105. z-index:999999;
  106. }
  107.  
  108. body{
  109. font-family:'ABeeZee';
  110. font-size:13px;
  111. color:#5E5E5E;
  112. margin:0;
  113. padding:0;
  114. background:#F0F0F0;
  115. }
  116.  
  117. a{
  118. text-decoration:none;
  119. color:#ff6f61;
  120. }
  121.  
  122. .fp-slidesNav{
  123. position: absolute;
  124. z-index: 4;
  125. opacity: 1;
  126. -webkit-transform: translate3d(0,0,0);
  127. -ms-transform: translate3d(0,0,0);
  128. transform: translate3d(0,0,0);
  129. margin: 0 auto !important;
  130. margin-left:50%;
  131. }
  132.  
  133. #fp-nav ul li a span,
  134. .fp-slidesNav ul li a span {
  135. border-radius: 50%;
  136. position: absolute;
  137. z-index: 1;
  138. height: 4px;
  139. width: 4px;
  140. border:1px solid #ff6f61;
  141. background: #fff;
  142. left: 50%;
  143. top: 50%;
  144. margin: -2px 0 0 -2px;
  145. -webkit-transition: all 0.1s ease-in-out;
  146. -moz-transition: all 0.1s ease-in-out;
  147. -o-transition: all 0.1s ease-in-out;
  148. transition: all 0.1s ease-in-out;
  149. }
  150.  
  151. div.fp-slidesNav.fp-bottom{
  152. margin-left:45% !important;
  153. }
  154.  
  155. #welcomepage{
  156. background:#ff6f61;
  157. }
  158.  
  159. .welcometext{
  160. font-family:'Crete Round';
  161. font-size:40px;
  162. font-weight:700;
  163. margin:0 auto;
  164. text-transform:lowercase;
  165. padding:10px;
  166. letter-spacing:3px;
  167. color:#fff;
  168. text-align:center;
  169. }
  170.  
  171. .navlink a{
  172. display:inline-block;
  173. min-width:80px;
  174. padding:10px;
  175. border:1px solid #fff;
  176. font-family:'ABeeZee';
  177. color:#fff;
  178. margin-top:130px;
  179. font-size:13px;
  180. font-weight:400;
  181. text-align:center;
  182. margin-right:10px;
  183. }
  184. /**about**/
  185. .abtcont, .blogrollcont, .tagscont{
  186. margin:0 auto;
  187. width:700px;
  188. height:400px;
  189. }
  190.  
  191. .abtheader{
  192. display:block;
  193. text-align:center;
  194. margin-bottom:30px;
  195. }
  196.  
  197. #abticon, #tagsicon{
  198. width:48px;
  199. height:48px;
  200. margin:0 auto;
  201. padding:10px;
  202. background:#fff;
  203. }
  204.  
  205. #abticon img, #tagsicon img{
  206. width:48px;
  207. height:48px;
  208. max-width:48px;
  209. max-height:48px;
  210. }
  211.  
  212. .abttitle{
  213. margin-top:20px;
  214. font-weight:700;
  215. margin-bottom:15px;
  216. letter-spacing:1px;
  217. font-style:italic;
  218. font-size:15px;
  219. }
  220.  
  221. .abttitle:first-letter{
  222. color:#ff6f61;
  223. }
  224.  
  225. .abtt{
  226. background:#fff;
  227. padding:10px;
  228. height:310px;
  229. }
  230.  
  231. .abtlbl{
  232. display:inline-block;
  233. min-width:45px;
  234. padding:4px;
  235. border-bottom:3px solid #ff6f61;
  236. text-align:center;
  237. font-style:italic;
  238. letter-spacing:1px;
  239. margin-right:15px;
  240. }
  241.  
  242. #quote{
  243. background:#ff6f61;
  244. width:210px;
  245. padding:10px;
  246. float:left;
  247. font-family:'Crete Round';
  248. color:#fff;
  249. margin-right:10px;
  250. text-align:center;
  251. font-size:35px;
  252. line-height:150%;
  253. margin-left:-10px;
  254. margin-top:-10px;
  255. height:310px;
  256. }
  257.  
  258. #abttxt{
  259. text-align:justify;
  260. height:280px;
  261. max-height:280px;
  262. overflow-y:scroll;
  263. overflow-x:none;
  264. padding:15px;
  265. }
  266.  
  267. #abttxt::-webkit-scrollbar{
  268. width:1px;
  269. }
  270.  
  271. #abttxt::-webkit-scrollbar-thumb:vertical{
  272. background:#ff6f61;
  273. }
  274.  
  275. #abttxt a, .faqbox a{
  276. box-shadow:inset 0 -5px 0 #ff6f61;
  277. color:#5e5e5e;
  278. font-weight:700;
  279. }
  280.  
  281. #abttxt i, em{
  282. color:#ff6f61;
  283. }
  284.  
  285. blockquote{
  286. padding-left:5px;
  287. border-left:1px solid #ff6f61;
  288. }
  289.  
  290. /*blogroll*/
  291.  
  292. #blogrollinfo{
  293. display:block;
  294. }
  295.  
  296. #blogrollicon{
  297. float:left;
  298. width:48px;
  299. height:48px;
  300. padding:10px;
  301. background:#fff;
  302. }
  303.  
  304. #blogrollicon img{
  305. width:48px;
  306. height:48px;
  307. max-width:48px;
  308. max-height:48px;
  309. }
  310.  
  311. #blgrlheader{
  312. background:#ff6f61;
  313. font-family:'Crete Round';
  314. color:#fff;
  315. height:48px;
  316. padding:10px;
  317. text-align:center;
  318. font-size:22px;
  319. line-height:200%;
  320. letter-spacing:1px;
  321. margin-bottom:10px;
  322. }
  323.  
  324. #blgrl_cont{
  325. background:#fff;
  326. padding:10px;
  327. width:calc(700px - 48px - 40px);
  328. margin-left:68px;
  329. height:328px;
  330. max-height:328px;
  331. overflow-y:scroll;
  332. overflow-x:none;
  333. }
  334.  
  335. #blgrl_cont::-webkit-scrollbar{
  336. width:4px;
  337. }
  338.  
  339. #blgrl_cont::-webkit-scrollbar-thumb:vertical{
  340. background:#ff6f61;
  341. }
  342.  
  343. .blgrcnt{
  344. float:left;
  345. margin:10px;
  346. width:283px;
  347. }
  348.  
  349. .blogrollportrait{
  350. width:32px;
  351. height:32px;
  352. float:left;
  353. border-radius:50px;
  354. border:3px solid #ff6f61;
  355. padding:4px;
  356. margin-right:10px;
  357. }
  358.  
  359. .blogrollname{
  360. min-width:40px;
  361. margin-right:10px;
  362. background:#ff6f61;
  363. color:#fff;
  364. padding:6px;
  365. display:inline-block;
  366. margin-top:10px;
  367. text-align:center;
  368. }
  369.  
  370. /**tags**/
  371. .tagscont{
  372. width:750px;
  373. }
  374.  
  375. #tagheader{
  376. width:140px;
  377. background:#ff6f61;
  378. height:380px;
  379. padding:10px;
  380. float:left;
  381. }
  382.  
  383. #tagsdesc{
  384. display:block;
  385. margin-top:10px;
  386. color:#fff;
  387. letter-spacing:1px;
  388. padding-bottom:10px;
  389. font-family:'Crete Round';
  390. font-size:25px;
  391. line-height:150%;
  392. text-align:center;
  393. }
  394.  
  395. #tagsgrid{
  396. width:calc(750px - 170px - 10px);
  397. background:#fff;
  398. height:380px;
  399. padding:10px;
  400. margin-left:180px;
  401. max-height:380px;
  402. overflow-x:none;
  403. overflow-y:scroll;
  404. }
  405.  
  406. #tagsgrid::-webkit-scrollbar{
  407. width:4px;
  408. }
  409.  
  410. #tagsgrid::-webkit-scrollbar-thumb:vertical{
  411. background:#ff6f61;
  412. }
  413.  
  414. .tagsheader{
  415. display:block;
  416. font-family:'Crete Round';
  417. text-transform:lowercase;
  418. font-size:20px;
  419. text-align:center;
  420. letter-spacing:1px;
  421. margin-bottom:10px;
  422. }
  423.  
  424. .tagsheader:first-letter{
  425. color:#ff6f61;
  426. }
  427.  
  428. .tagssection{
  429. padding-left:10px;
  430. display:block;
  431. margin-bottom:10px;
  432. }
  433.  
  434. .tags a{
  435. display:inline-block;
  436. min-width:60px;
  437. text-transform:lowercase;
  438. text-align:center;
  439. padding:8px;
  440. background:#ff6f61;
  441. color:#fff;
  442. font-size:10px;
  443. margin-right:10px;
  444. margin-bottom:10px;
  445. }
  446.  
  447. /**faq**/
  448. .faqcont{
  449. width:620px;
  450. margin:0 auto;
  451. margin-top:34px;
  452. margin-bottom:34px;
  453. }
  454.  
  455. .faqheader{
  456. display:block;
  457. background:#ff6f61;
  458. padding:20px;
  459. font-size:30px;
  460. letter-spacing:1px;
  461. text-align:center;
  462. font-family:'Crete Round';
  463. color:#fff;
  464. text-transform:uppercase;
  465. }
  466.  
  467. .faqbox, .askbox{
  468. margin-top:20px;
  469. }
  470.  
  471. .faqbox{
  472. min-height:280px;
  473. }
  474.  
  475. .askbox{
  476. background:#fff;
  477. padding:10px;
  478. margin-bottom:60px;
  479. }
  480.  
  481. .faqwrap{
  482. background:#fff;
  483. padding:10px;
  484. margin-bottom:20px;
  485. }
  486.  
  487. .question, .answer{
  488. padding:10px;
  489. display:block;
  490. text-align:justify;
  491. min-height:40px;
  492. }
  493.  
  494. .question{
  495. margin-top:10px;
  496. margin-bottom:10px;
  497. }
  498.  
  499. .question:nth-of-type(1){
  500. margin-top:0;
  501. }
  502.  
  503. .askicon, .ansicon{
  504. width:48px;
  505. height:48px;
  506. border-radius:100px;
  507. border:2px solid #ff6f61;
  508. padding:5px;
  509. }
  510.  
  511. .askicon{
  512. float:left;
  513. margin-top:-10px;
  514. margin-right:10px;
  515. }
  516.  
  517. .ansicon{
  518. float:right;
  519. margin-top:-10px;
  520. margin-left:10px;
  521. }
  522.  
  523. .askicon img, .ansicon img{
  524. border-radius:100px;
  525. width:48px;
  526. height:48px;
  527. max-width:48px;
  528. max-height:48px;
  529. }
  530. </style>
  531. </head>
  532.  
  533. <body>
  534. <div id="fullpage">
  535. <div class="section">
  536. <div class="slide" id="welcomepage">
  537. <div class="welcometext">
  538. hello, my love,
  539. <br>
  540. i've been searching for someone like you.
  541.  
  542. <div class="navlink">
  543. <a href="/">home</a>
  544. <a href="/archive">archive</a>
  545. <a href="//kuzuriha.tumblr.com">credit</a>
  546.  
  547. <!--add your links here! you can technically add an unlimited amount of links, however, I suggest keeping it to a minimum. By default, this page supports three custom links.-->
  548.  
  549. <a href="/">Link 1</a>
  550. <a href="/">Link 2</a>
  551. <a href="/">Link 3</a>
  552. </div>
  553. </div>
  554. </div><!--end welcome page-->
  555.  
  556. <div class="slide" id="about">
  557. <div class="abtcont">
  558. <div class="abtheader">
  559. <div id="abticon">
  560. <img src="https://i.imgur.com/yixxXnW.png"/><!--change the icon for your about section here.-->
  561.  
  562. </div>
  563. <div class="abttitle">father's eyes, but mother's daughter.</div><!--you can change the title here!-->
  564. <div class="abtlbl">rizu, she/her</div>
  565. <div class="abtlbl">xxi</div>
  566. <div class="abtlbl">s.e asia</div>
  567. <div class="abtlbl">intp</div>
  568. <!--you can add as much or as little labels about yourself here. i do not recommed getting overboard, though!-->
  569. </div><!--end about header-->
  570.  
  571. <div class="abtt">
  572. <div id="quote">
  573. <div style="margin-top:20px;">and you know my lips are all i can hold against you.
  574. <!--you can enter your quote here or just leave it blank. looks just as good, you know.-->
  575. </div></div>
  576.  
  577. <div id="abttxt">Hello and welcome! This is the live preview of <a href="//kuzuriha.tumblr.com">@kuzuriha's</a> first ever all in one page, previously titled <i>Calliope</i>, now titled <i>Coiréil</i>, which is the Irish word for coral. This page is made as an entry for the <b><a href="//codingcabin.tumblr.com">Coding Cabin's</a></b> <b><a href="http://codingcabin.tumblr.com/post/181607465857/pantone-colour-of-the-year-2019-challenge-coding">Pantone Color of the Year</a></b>, using the hex color #FF6F61 Living Coral as its main accent. This page is also inspired by <b>Westlife</b>'s comeback single, <i>Hello My Love.</i>
  578. <br><br>
  579. This AiO page consists of <b>about, blogroll, faq</b> and <b>tags</b> pages. I've included notes to edit in this page so please read through the code first! For those fancy effects on text like <b>bold</b>, <i>italic</i> and everything else, you can simply google "HTML Cheatsheet" and it will come up in no time.
  580. <blockquote>Blockquote looks pretty cool too!</blockquote>
  581. You can write as much as you like -- if you write too much, there'll be a scrollbar to help your reader scroll down your bio. I hope you enjoy this page and hit me on my ask should you encounter any problem!<!--this is where you write your bio!-->
  582.  
  583. </div>
  584. </div><!--end about text-->
  585. </div><!--end about container-->
  586. </div><!--end about section-->
  587.  
  588. <div class="slide" id="blogroll">
  589. <div class="blogrollcont">
  590. <div id="blogrollinfo">
  591. <div id="blogrollicon"><img src="http://i.imgur.com/QCSEzb5.png"/></div>
  592. <div id="blgrlheader">set my heart on fire, you'll all i ever need.</div>
  593.  
  594. </div><!--end blogroll info-->
  595.  
  596. <div id="blgrl_cont">
  597. {block:Following}
  598. {block:Followed}
  599. <div class="blgrcnt">
  600. <img src="{FollowedPortraitURL-128}" class="blogrollportrait"/><a href="{FollowedURL}" class="blogrollname">{FollowedName}</a></div>
  601. {/block:Followed}
  602. {/block:Following}
  603. </div>
  604.  
  605.  
  606. </div><!--end blogroll container-->
  607. </div><!--end blogroll-->
  608.  
  609.  
  610.  
  611. <div class="slide" id="tags">
  612. <div class="tagscont">
  613. <div id="tagheader">
  614. <div id="tagsicon"><img src="http://i.imgur.com/0VMUO8X.png"/></div>
  615. <div id="tagsdesc">happiness ain't a thing i'm used to.</div>
  616. </div><!--end tagheader-->
  617.  
  618. <div id="tagsgrid">
  619. <!--this is your tags section! to add more sections, paste from where it says div class="tagssection" to where it's labeled end tagssection before the /div where it says "end tagsgrid".-->
  620. <div class="tagssection">
  621. <div class="tagsheader">tags section #1</div><!--you can change your tags header here.-->
  622.  
  623. <div class="tags">
  624. <a href="">#tag 1</a>
  625. <a href="">#tag 2</a>
  626. <a href="">#tag 3</a>
  627. <a href="">#tag 4</a>
  628. <a href="">#tag 5</a>
  629. <a href="">#long tag 1</a>
  630. <a href="">#long tag 2</a>
  631. <a href="">#long tag 3</a>
  632. <a href="">#long tag 4</a>
  633. <a href="">#long tag 5</a>
  634. </div>
  635. </div><!--end tagssection-->
  636.  
  637. <div class="tagssection">
  638. <div class="tagsheader">tags section #2</div>
  639. <div class="tags">
  640. <a href="">#tag 1</a>
  641. <a href="">#tag 2</a>
  642. <a href="">#tag 3</a>
  643. <a href="">#tag 4</a>
  644. <a href="">#tag 5</a>
  645. </div>
  646. </div><!--end tagssection-->
  647.  
  648. <div class="tagssection">
  649. <div class="tagsheader">tags section #3</div>
  650. <div class="tags">
  651. <a href="">#tag 1</a>
  652. <a href="">#tag 2</a>
  653. <a href="">#tag 3</a>
  654. <a href="">#long tag 1</a>
  655. <a href="">#long tag 2</a>
  656. <a href="">#long tag 3</a>
  657. <a href="">#long tag 4</a>
  658. <a href="">#long tag 5</a>
  659. <a href="">#a very long tag 1</a>
  660. <a href="">#a very long tag 2</a>
  661. <a href="">#a very long tag 3</a>
  662. </div>
  663. </div><!--end tagssection-->
  664. </div><!--end tagsgrid-->
  665.  
  666. </div><!--end tagscont-->
  667.  
  668. </div><!--end tags-->
  669.  
  670.  
  671. <div class="slide" id="faq">
  672. <div class="faqcont">
  673. <div class="faqheader">f.a.q</div>
  674.  
  675. <div class="faqbox">
  676. <!--to add another section of the faq, you need to copy from where it says div class="faqwrap" to the /div where it says !--end wrap-- BEFORE the /div where it says !--end faqbox--. to remove a section, delete the whole div class="faqwrap" to the /div where it says !--end wrap--.
  677. -->
  678. <div class="faqwrap">
  679. <div class="question">
  680. <div class="askicon"><img src="http://i.imgur.com/oGvzLZu.png"></div>
  681. What is this thing?
  682. </div><!--end question-->
  683.  
  684. <div class="answer">
  685. <div class="ansicon"><img src="http://i.imgur.com/JRr6hSW.png"></div>
  686. This is the revamp of <a href="//kuzuriha.tumblr.com">@kuzuriha's</a> first AiO theme, previously titled Calliope, now titled <i>Coiréil</i>. A drastic change from Greece to Ireland, I know.
  687. </div><!--end answer-->
  688. </div><!--end wrap-->
  689.  
  690. </div><!--end faqbox-->
  691.  
  692. <div class="faqheader">ask me anything</div>
  693. <div class="askbox">
  694. <!--to enable the askbox, replace where it says YOUR URL HERE with your own blog URL. Bear in mind that you need to have your askbox enabled to enable this askbox.-->
  695.  
  696. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOUR_URL_HERE" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  697. </div>
  698. </div><!--end faqcont-->
  699.  
  700. </div><!--end faq-->
  701.  
  702.  
  703.  
  704. </div>
  705.  
  706.  
  707. </div><!--end fullpage-->
  708. </body>
  709.  
  710.  
  711. <script>
  712. $(document).ready(function() {
  713. $('#fullpage').fullpage({
  714. //options here
  715. autoScrolling:true,
  716. controlArrows:false,
  717. scrollBar:true,
  718. scrollOverflow:true,
  719. scrollHorizontally: true,
  720. slidesNavigation:true
  721. });
  722. });
  723. </script>
  724. </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!