API tools faq
paste
plutoniumthm

Page 01 - Guava

plutoniumthm
Jun 21st, 2019 (edited)
997
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. Guava
  7. astrocodes @ tumblr.com
  8.  
  9. Inspiration: https://dribbble.com/shots/6608047-Workout-App
  10.  
  11. -->
  12.  
  13.  
  14. <link href="https://fonts.googleapis.com/css?family=Overpass:400,400i,600,600i,700,700i|Karla:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Chivo:400,400i,700,700i|IBM+Plex+Sans:400,400i,700,700i&display=swap" rel="stylesheet">
  15.  
  16. <script src="https://kit.fontawesome.com/c2d255a331.js" crossorigin="anonymous"></script>
  17.  
  18.  
  19. <style>
  20.  
  21. /*
  22.  
  23. CUSTOMIZATION GUIDE
  24.  
  25.  
  26. Colors:
  27.  
  28. > #FA6566 is the red color; it corresponds to the 'About me' card and the arrow nav link. Its RGB equivalent is 'rgba(239,91,91,0.2)' in the code; this is the background color for the arrow nav link.
  29.  
  30. > #50BC74 is the green color; it corresponds to the 'Tags' card and the calendar nav link. Its RBG equivalent is 'rgba(80,188,116,0.2)' in the code; this is the background color for the calendar nav link.
  31.  
  32. > #585AEC is the purple color; it corresponds to the 'Links' card and the pencil bubble nav link. Its RBG equivalent is 'rgba(88,90,236,0.2)' in the code; this is the background color for the pencil bubble nav link.
  33.  
  34. > #1AD0D2 is the blue color; it corresponds to the 'FAQ' card and the laptop code nav link. Its RBG equivalent is 'rgba(26,208,210,0.2)' in the code; this is the background color for the laptop code nav link.
  35.  
  36. > #FC72A4 is the pink color; it only corresponds to the 'Social' card.
  37.  
  38.  
  39. To get different RBG values, head to https://htmlcolorcodes.com/color-picker/.
  40.  
  41. Choose a color from the color picker. It will automatically give you both a HEX value and an RBG value.
  42.  
  43. Match the HEX values with every nth-of-type(1), nth-of-type(2), and so on. These will either be for the 'background-color', or just the 'color'.
  44.  
  45. Of course, if you want to change the colors completely and have them not match, that's okay too.
  46.  
  47.  
  48. ---
  49.  
  50. That's just for the colors. There are several notes in the code to help you with other parts of the customization.
  51.  
  52. Knowledge of HTML/CSS is recommended, but I've tried my best to make the notes as easy to understand as possible! If something isn't clear, please feel free to send me a message and I'll help you out!
  53.  
  54. */
  55.  
  56. * { box-sizing: border-box; }
  57.  
  58. body {
  59. background-color:#114CA6; /* background color for the entire page */
  60. font-family:'Chivo'; /* font for the entire page */
  61. }
  62.  
  63. a {
  64. text-decoration:none;
  65. transition:.2s;
  66. }
  67.  
  68. a:hover {
  69. transition:.2s;
  70. }
  71.  
  72. ::-webkit-scrollbar {
  73. display:none;
  74. }
  75.  
  76. b, strong {
  77. font-weight:700;
  78. }
  79.  
  80. ::selection {
  81. background-color:rgba(255,255,255,0.15);
  82. }
  83.  
  84.  
  85. /* ---- wrapper ---- */
  86.  
  87. .wrapper {
  88. margin-left:250px;
  89. margin-top:80px;
  90. }
  91.  
  92. .wrapper:after {
  93. content: '';
  94. display: block;
  95. clear: both;
  96. }
  97.  
  98.  
  99. /* ---- CARDS ---- */
  100.  
  101. .card {
  102. width:460px; /* you can play around with the height to suit your preferences */
  103. height:380px; /* you can play around with the width to suit your preferences */
  104. padding:30px; /* don't adjust this */
  105. float: left;
  106. margin:20px; /* the space between each one */
  107. background: #fff; /* background color for the tag groups */
  108. border-radius:25px; /* change how rounded the corners are */
  109. transition:.3s ease-in-out;
  110. text-align:left;
  111. color:#fff;
  112. overflow:auto;
  113. }
  114.  
  115. /* about me card*/
  116. .card:hover:nth-of-type(1) {
  117. transform:translateY(-10px); /* the effect when you hover over a card */
  118. transition:.3s ease-in-out;
  119. }
  120.  
  121. /* tags card */
  122. .card:hover:nth-of-type(2) {
  123. transform:translateY(-10px);
  124. transition:.3s;
  125. }
  126.  
  127. /* links card */
  128. .card:hover:nth-of-type(3) {
  129. transform:translateY(-10px);
  130. transition:.3s;
  131. }
  132.  
  133. /* faq card */
  134. .card:hover:nth-of-type(4) {
  135. transform:translateY(-10px);
  136. transition:.3s;
  137. }
  138.  
  139. /* social card*/
  140. .card:hover:nth-of-type(5) {
  141. transform:translateY(-10px);
  142. transition:.3s;
  143. }
  144.  
  145. /* card icons */
  146. .fa-address-card, .fa-tags, .fa-link, .fa-comments-alt, .fa-smile {
  147. font-size:23px;
  148. background-color:rgba(255,255,255,0.15);
  149. padding:12px;
  150. border-radius:100%;
  151. width:49px;
  152. text-align:center;
  153. vertical-align:middle;
  154. margin-bottom:15px;
  155. box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.15);
  156. color:#fff;
  157. }
  158.  
  159. /* ---- FIRST CARD (ABOUT ME) ---- */
  160.  
  161. .card:nth-of-type(1) {
  162. background-color:#FA6566;
  163. }
  164.  
  165. /* ---- SECOND CARD (TAGS) ---- */
  166.  
  167. .card:nth-of-type(2) {
  168. background-color:#50BC74;
  169. }
  170.  
  171. /* ---- THIRD CARD (LINKS) ---- */
  172.  
  173. .card:nth-of-type(3) {
  174. background-color:#585AEC;
  175. }
  176.  
  177. /* ---- FOURTH CARD (FAQ) ---- */
  178.  
  179. .card:nth-of-type(4) {
  180. background-color:#1AD0D2;
  181. }
  182.  
  183. /* ---- FIFTH CARD (SOCIAL) ---- */
  184.  
  185. .card:nth-of-type(5) {
  186. background-color:#FC72A4;
  187. }
  188.  
  189. .card-name {
  190. font-weight:700;
  191. font-size:23px;
  192. letter-spacing:0.5px;
  193. }
  194.  
  195. .card-content {
  196. margin-top:20px;
  197. font-size:13px;
  198. letter-spacing:0.3px;
  199. line-height:23px;
  200. }
  201.  
  202. /* content for the tags card specifically */
  203. .tags-card-content {
  204. margin-top:20px;
  205. font-size:13px;
  206. letter-spacing:0.3px;
  207. line-height:23px;
  208. }
  209.  
  210. .tags-card-content a {
  211. display:inline-block;
  212. background:rgba(255,255,255,0.15);
  213. padding-left:15px;
  214. padding-right:15px;
  215. border-radius:20px;
  216. color:#fff;
  217. text-align:center;
  218. margin-right:3px;
  219. margin-bottom:7px;
  220. transition:.3s;
  221. padding-top:3px;
  222. padding-bottom:3px;
  223. }
  224.  
  225. .tags-card-content a:hover {
  226. background:none;
  227. box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.2);
  228. transition:.3s;
  229. }
  230.  
  231.  
  232.  
  233. /* ---- SOCIAL CARD ---- */
  234.  
  235. /* these are the social icons you can choose from */
  236.  
  237. /* if you want to add more, go to https://fontawesome.com/icons?d=gallery&s=brands, find the icon you want, and add .fa-[icon name] to the list of icons below. make sure to separate them with a comma */
  238. .fa-discord, .fa-playstation, .fa-instagram, .fa-steam, .fa-twitter, .fa-twitch, .fa-skype, .fa-snapchat-ghost, .fa-reddit-alien, .fa-xbox, .fa-youtube, .fa-tumblr, .fa-lastfm, .fa-github-alt {
  239. padding-top:35px;
  240. border-radius:5px;
  241. text-align:center;
  242. vertical-align:middle;
  243. font-size:25px;
  244. }
  245.  
  246. .flip-card {
  247. background-color: transparent;
  248. width: 126px;
  249. height: 100px;
  250. perspective: 1100px;
  251. border-radius:10px;
  252. display:inline-block;
  253. margin-right:5px;
  254. }
  255.  
  256. .flip-card-inner {
  257. position: relative;
  258. width: 100%;
  259. height: 100%;
  260. text-align: center;
  261. transition: transform 0.8s;
  262. transform-style: preserve-3d;
  263. }
  264.  
  265. .flip-card:hover .flip-card-inner {
  266. transform: rotateY(180deg);
  267. cursor:pointer;
  268. }
  269.  
  270. .flip-card-front, .flip-card-back {
  271. position: absolute;
  272. width: 100%;
  273. height: 100%;
  274. backface-visibility: hidden;
  275. }
  276.  
  277. .flip-card-front {
  278. background-color:rgba(255,255,255,0.2);
  279. color:#fff;
  280. border-radius:10px;
  281. vertical-align:middle;
  282. }
  283.  
  284. .flip-card-back {
  285. background-color:rgba(255,255,255,0.4);
  286. color:white;
  287. transform: rotateY(180deg);
  288. border-radius:10px;
  289. padding-top:40px;
  290. }
  291.  
  292.  
  293.  
  294. /* ---- SIDEBAR ---- */
  295.  
  296. .sidebar {
  297. height:calc(100% - 100px);
  298. width:200px;
  299. background:#fff;
  300. text-align:center;
  301. position:fixed;
  302. bottom:0;
  303. border-top-right-radius:25px;
  304. overflow:hidden;
  305. left:0;
  306. }
  307.  
  308. .sidebar-nav {
  309. font-size:23px;
  310. }
  311.  
  312. .sidebar-nav a {
  313. display:block;
  314. padding:10px;
  315. padding-top:100px;
  316. padding-bottom:100px;
  317. text-transform:uppercase;
  318. font-weight:700;
  319. letter-spacing:1px;
  320. text-align:center;
  321. width:210px;
  322. margin-right:-7px;
  323. margin-left:-7px;
  324. transition:.3s;
  325. }
  326.  
  327. .sidebar-nav a:hover {
  328. color:#fff;
  329. opacity:1;
  330. }
  331.  
  332.  
  333. /* --- FIRST NAV LINK (ARROW) ---- */
  334. .sidebar-nav a:nth-of-type(1) {
  335. color:#FA6566;
  336. }
  337.  
  338. .sidebar-nav a:hover:nth-of-type(1) {
  339. color:#FA6566;
  340. background:rgba(250,101,102,0.2);
  341. }
  342.  
  343. .sidebar-nav a:hover:nth-of-type(1) .fa-reply {
  344. transform:scale(1.2);
  345. transition:.3s;
  346. }
  347.  
  348.  
  349. /* ---- SECOND NAV LINK (CALENDAR) ---- */
  350. .sidebar-nav a:nth-of-type(2) {
  351. color:#50BC74;
  352. }
  353.  
  354. .sidebar-nav a:hover:nth-of-type(2) {
  355. color:#50BC74;
  356. background:rgba(80,188,116,0.2);
  357. }
  358.  
  359. .sidebar-nav a:hover:nth-of-type(2) .fa-calendar-day {
  360. transform:scale(1.2);
  361. transition:.3s;
  362. }
  363.  
  364.  
  365. /* ---- THIRD NAV LINK (PENCIL BUBBLE) ---- */
  366. .sidebar-nav a:nth-of-type(3) {
  367. color:#585AEC;
  368. }
  369.  
  370. .sidebar-nav a:hover:nth-of-type(3) {
  371. color:#585AEC;
  372. background:rgba(88,90,236,0.2);
  373. }
  374.  
  375. .sidebar-nav a:hover:nth-of-type(3) .fa-comment-alt-edit {
  376. transform:scale(1.2);
  377. transition:.3s;
  378. }
  379.  
  380.  
  381. /* ---- FOURTH NAV LINK (LAPTOP CODE) ---- */
  382. .sidebar-nav a:nth-of-type(4) {
  383. color:#1AD0D2;
  384. }
  385.  
  386. .sidebar-nav a:hover:nth-of-type(4) {
  387. color:#1AD0D2;
  388. background:rgba(26,208,210,0.2);
  389. }
  390.  
  391. .sidebar-nav a:hover:nth-of-type(4) .fa-laptop-code {
  392. transform:scale(1.2);
  393. transition:.3s;
  394. }
  395.  
  396.  
  397.  
  398. /* ---- NAV ICONS ---- */
  399.  
  400. .fa-reply, .fa-calendar-day, .fa-comment-alt-edit, .fa-laptop-code {
  401. vertical-align:middle;
  402. transition:.3s;
  403. }
  404.  
  405. </style>
  406.  
  407.  
  408. <body>
  409.  
  410. <div align="center">
  411. <div class="sidebar">
  412. <div class="sidebar-nav">
  413. <a href="/"><i class="far fa-reply"></i></a>
  414. <a href="/archive"><i class="fal fa-calendar-day"></i></a>
  415. <a href="/ask"><i class="far fa-comment-alt-edit"></i></a>
  416. <a href="https://astrocodes.tumblr.com"><i class="far fa-laptop-code"></i></a>
  417. </div>
  418. </div>
  419. </div>
  420.  
  421.  
  422. <div class="wrapper" data-masonry='{ "itemSelector": ".card", "columnWidth": 160 }'>
  423.  
  424.  
  425. <!----- ABOUT ME CARD ------------------------------------------------------->
  426.  
  427. <!-- to make a new card, copy the code from here... -->
  428. <div class="card">
  429. <i class="fal fa-address-card"></i><br>
  430. <span class="card-name">About me</span>
  431. <div class="card-content">
  432. <b>Name:</b> Kay<br> <!-- your name; only replace 'Kay' -->
  433. <b>Age:</b> 22 years young<br> <!-- your age; only replace the '22 years young' -->
  434. <b>Pronouns</b> She/her<br> <!-- your pronouns; only replace the 'She/her' -->
  435. <b>Location:</b> ATX <!-- your location (optional) -->
  436. <br><br>
  437. <!-- replace the text below with more info about you -->
  438. i'm an aspiring psychiatrist, and coding is a hobby of mine. i really like IKEA, just in general. i want to move to Sweden someday. i'm into tiny versions of regular-sized objects. orange chicken is my favorite food, but only if it's done right. my go-to starbucks order is one of the tea lemonades, or a doubleshot on ice with extra sweet cream.
  439. </div>
  440. </div>
  441. <!-- ...to here, and paste it -->
  442.  
  443. <!---- END OF ABOUT ME CARD ------------------------------------------------->
  444.  
  445.  
  446.  
  447. <!----- TAGS CARD ----------------------------------------------------------->
  448.  
  449. <div class="card">
  450. <i class="fal fa-tags"></i><br>
  451. <span class="card-name">Tags</span>
  452. <div class="tags-card-content">
  453.  
  454. <h4>Tag category 1</h4>
  455. <a href="#">tag one</a> <!-- replace '#' with your url, and 'tag one' with your tag's name -->
  456. <a href="#">tag two</a>
  457. <a href="#">tag three</a>
  458. <a href="#">tag four</a>
  459. <a href="#">tag five</a>
  460. <a href="#">tag six</a>
  461.  
  462. <h4>Tag category 2</h4>
  463. <a href="#">tag one</a>
  464. <a href="#">tag two</a>
  465. <a href="#">tag three</a>
  466. <a href="#">tag four</a>
  467. </div>
  468. </div>
  469.  
  470. <!----- END OF TAGS CARD ---------------------------------------------------->
  471.  
  472.  
  473.  
  474. <!----- LINKS CARD ---------------------------------------------------------->
  475.  
  476. <div class="card">
  477. <i class="fal fa-link"></i><br>
  478. <span class="card-name">Links</span>
  479. <div class="card-content">
  480. <div class="tags-card-content">
  481. <a href="#">link one</a> <!-- replace '#' with your url, and 'tag one' with your link's name -->
  482. <a href="#">link two</a>
  483. <a href="#">link three</a>
  484. <a href="#">link four</a>
  485. <a href="#">link five</a>
  486. <a href="#">link six</a>
  487. </div>
  488. </div>
  489. </div>
  490.  
  491. <!----- END OF LINKS CARD --------------------------------------------------->
  492.  
  493.  
  494.  
  495. <!----- FAQ CARD ------------------------------------------------------------>
  496.  
  497. <div class="card">
  498. <i class="fal fa-comments-alt"></i><Br>
  499. <span class="card-name">FAQ</span>
  500. <div class="card-content">
  501.  
  502. <!-- to add a new Q/A, copy from here... -->
  503. <b><span style="color:rgba(255,255,255,0.6);">Q: What is your name, sir?</span></b><br>
  504. <span style="padding-bottom:10px;">A: My name is Bill Buttlicker.</span>
  505. <!-- ...to here, and paste -->
  506.  
  507. <br><br> <!-- make sure these are between every Q/A -->
  508.  
  509. <b><span style="color:rgba(255,255,255,0.6);">Q: Really? That's your real name?</span></b><br>
  510. <span style="padding-bottom:10px;">A: How dare you.</span>
  511.  
  512. </div>
  513. </div>
  514.  
  515. <!----- END OF FAQ CARD ----------------------------------------------------->
  516.  
  517.  
  518.  
  519. <!----- SOCIAL CARD --------------------------------------------------------->
  520.  
  521. <div class="card">
  522. <i class="fal fa-smile"></i><Br>
  523. <span class="card-name">Social</span>
  524. <div class="card-content">
  525.  
  526. <!-- start of social media card -->
  527. <!-- to add a new social media card, copy from here... -->
  528. <div class="flip-card">
  529. <div class="flip-card-inner">
  530.  
  531. <div class="flip-card-front">
  532. <i class="fab fa-discord"></i> <!-- social icon; replace 'fa-discord' with one of the social icons from line 225 in the code -->
  533. </div>
  534.  
  535. <div class="flip-card-back">
  536. @username <!-- social username; replace this with your username -->
  537. </div>
  538.  
  539. </div>
  540. </div>
  541. <!-- ...to here, and paste -->
  542. <!-- end of social media card -->
  543.  
  544.  
  545.  
  546. <!-- start of social media card -->
  547. <div class="flip-card">
  548. <div class="flip-card-inner">
  549.  
  550. <div class="flip-card-front">
  551. <i class="fab fa-instagram"></i> <!-- social icon -->
  552. </div>
  553.  
  554. <div class="flip-card-back">
  555. @username <!-- social username -->
  556. </div>
  557.  
  558. </div>
  559. </div>
  560. <!-- end of social media card -->
  561.  
  562.  
  563.  
  564. <!-- start of social media card -->
  565. <div class="flip-card">
  566. <div class="flip-card-inner">
  567.  
  568. <div class="flip-card-front">
  569. <i class="fab fa-twitter"></i> <!-- social icon -->
  570. </div>
  571.  
  572. <div class="flip-card-back">
  573. @username <!-- social username -->
  574. </div>
  575.  
  576. </div>
  577. </div>
  578. <!-- end of social media card -->
  579.  
  580.  
  581.  
  582. <!-- start of social media card -->
  583. <div class="flip-card">
  584. <div class="flip-card-inner">
  585.  
  586. <div class="flip-card-front">
  587. <i class="fab fa-steam"></i> <!-- social icon -->
  588. </div>
  589.  
  590. <div class="flip-card-back">
  591. @username <!-- social username -->
  592. </div>
  593.  
  594. </div>
  595. </div>
  596. <!-- end of social media card -->
  597.  
  598.  
  599.  
  600. <!-- start of social media card -->
  601. <div class="flip-card">
  602. <div class="flip-card-inner">
  603.  
  604. <div class="flip-card-front">
  605. <i class="fab fa-twitch"></i> <!-- social icon -->
  606. </div>
  607.  
  608. <div class="flip-card-back">
  609. @username <!-- social username -->
  610. </div>
  611.  
  612. </div>
  613. </div>
  614. <!-- end of social media card -->
  615.  
  616.  
  617.  
  618. <!-- start of social media card -->
  619. <div class="flip-card">
  620. <div class="flip-card-inner">
  621.  
  622. <div class="flip-card-front">
  623. <i class="fab fa-reddit-alien"></i> <!-- social icon -->
  624. </div>
  625.  
  626. <div class="flip-card-back">
  627. @username <!-- social username -->
  628. </div>
  629.  
  630. </div>
  631. </div>
  632. <!-- end of social media card -->
  633.  
  634.  
  635. </div>
  636. </div>
  637.  
  638. <!----- END OF SOCIAL CARD -------------------------------------------------->
  639.  
  640.  
  641. </div> <!-- don't delete this guy -->
  642.  
  643. <!-- don't delete (or edit) these boys either -->
  644. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  645. <script src="https://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  646.  
  647. </body>
  648. </head>
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!