API tools faq
paste
longituddeonda

about two / neumorphic about page

longituddeonda
May 14th, 2020 (edited)
1,756
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.69 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!-----
  3.  
  4. ;; about two ;;
  5.  
  6. neumophic about page by ebrothemes (originally posted by me on my main, @longtud-de-onda)
  7.  
  8. TERMS OF USE:
  9. - do not remove the credit.
  10. - do not repost/redistribute.
  11. - do not take parts of the code and use it as your own.
  12. - do not use as a base code.
  13.  
  14.  
  15. CREDITS:
  16. icons: honeybee icon font by suomi
  17. tooltips: tippy.js by @atomiks on github
  18.  
  19.  
  20. COLORS:
  21. if you want to change the colors, mess with the colors in the ::root section which will change the colors across the code
  22.  
  23.  
  24. INSTRUCTIONS:
  25. if you only want to change the colors, change at the root, then scroll down to the note 'start editing here'
  26.  
  27. almost all editing and styling is changed past that point, except the icons for the likes/dislikes lists, and whether or not you want a gradient text highlight, both of which are in the css. look for the 🌻 emoji to find those pieces of code.
  28.  
  29.  
  30. HONEYBEE ICONS:
  31. find all available icons to customize code here:
  32.    https://honeybee.suiomi.com/
  33.    
  34. if editing in css, you'll want the four-digit code, which follows a / symbol
  35.    this will look like "/ea15"
  36.    
  37. if editing in the html, you'll want the name
  38.    this will look like "eye-o"
  39.    when changing the icon in the html, you'll see something that looks like         "th th-icon-name"
  40.    you'll then change it to "th th-eye-o" or whatever they icon you want is
  41.  
  42.  
  43. x camila
  44.  
  45. ----->
  46.  
  47. <!DOCTYPE html>
  48. <html>
  49. <html lang="en-US">
  50. <head>
  51.  
  52. <title></title>  
  53.  
  54. <link rel="shortcut icon" href="{Favicon}">
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  57. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  58. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap">
  59. <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
  60.  
  61. <style type="text/css">
  62.                       /* 🌻 edit colors here! */
  63. :root {
  64.   --bg: #E4E5EA;     /* background */
  65.   --li: #fff;        /* light */
  66.   --sh: #aeafb2;     /* shadow */
  67.   --accent: #a54829; /* accent color */
  68.   --accglow: #cc7457;/* glow color */
  69.   --text: #333232;   /* text */
  70.   --hlg: #CFB04A;    /* stats gradient */
  71.  
  72. }
  73.    
  74. /* GENERAL CODE */
  75. body > iframe:first-child { display: none !important; }
  76.  
  77. body {
  78.     background-color: var(--bg);
  79.     font-family: Lato, sans-serif;
  80.     margin:0;
  81.     padding:0;
  82.     font-size:1em;
  83.     color: var(--text);
  84. }
  85.  
  86. a {
  87.     color:var(--text);
  88.     text-decoration: none
  89. }
  90.  
  91. a:hover {
  92.     color: var(--text);
  93. }
  94.  
  95. p {
  96.   margin:0;
  97.   padding:0;
  98.   font-size:1em;
  99. }
  100.  
  101. ul {
  102.   list-style-type: none;
  103.   margin: 0;
  104.   padding: 0;
  105.   line-height: 2.1;
  106. }
  107.  
  108. .th {
  109.     color: var(--text);
  110. }
  111.  
  112. /* STRUCTURE CODE */
  113. .main {
  114.     position: fixed;
  115.     width: 500px;
  116.     height: 500px;
  117.     left: 50%;
  118.     top: 50%;
  119.     transform: translate(-50%, -50%);
  120. }
  121.  
  122. .left {
  123.     height: 500px;
  124.     width: 150px;
  125.     float: left;
  126. }
  127.  
  128. .right {
  129.     height: 500px;
  130.     width: 350px;
  131.     float: right;
  132. }
  133.  
  134. .bottom-right{
  135.     height: 240px;
  136.     width: 165px;
  137.     float: left;
  138. }
  139.  
  140. .column {
  141.     width: 50%;
  142.     float: left;
  143. }
  144.  
  145. /* HIGHLIGHT GRADIENT SPAN */
  146. .highlight {
  147.     font-weight: 700;
  148.     color: white;
  149.     /* 🌻 to make gradient text solid, just replace the contents of background-image with the color or var(--x), x being the name in the ::root section for the color */
  150.     background-image: linear-gradient(to right, var(--accent) 0%, var(--hlg) 100%);
  151.     padding: 2px 5px;
  152.     border-radius: 5px;
  153. }
  154.  
  155.  
  156. /* ICON STYLING*/
  157. .icon {
  158.     margin: 8px auto;
  159.     height: 115px;
  160.     width: 115px;
  161.     border-radius: 50%;
  162.     border: 10px var(--bg) solid;
  163.     box-shadow:  6px 6px 12px var(--sh),
  164.              -6px -6px 12px var(--li);
  165. }
  166.  
  167. .icon img {
  168.     width: 115px;
  169.     height: 115px;
  170.     border-radius: 50%;
  171. }
  172.  
  173. /* UPDATES STYLING */
  174. .updates {
  175.     width: 125px;
  176.     height: 40px;
  177.     margin: 15px auto;
  178.     border-radius: 20px;
  179.     box-shadow:  6px 6px 12px var(--sh),
  180.              -6px -6px 12px var(--li);
  181.     text-align: center;
  182.     line-height: 40px;
  183.     text-transform: uppercase;
  184.     letter-spacing: 2px;
  185.     color: var(--accent);
  186.     font-weight: 700;
  187.     text-shadow:0 0 8px var(--accglow);
  188. }
  189.  
  190. .updates-content {
  191.     width: 105px;
  192.     height: 260px;
  193.     margin: 15px auto;
  194.     border-radius: 20px;
  195.     box-shadow: inset 4px 4px 8px var(--sh),
  196.              inset -4px -4px 8px var(--li);
  197.     padding: 10px;
  198.     overflow: auto;
  199.     font-weight: 700;
  200. }
  201.  
  202. .update {
  203.     border-bottom: 1px solid var(--sh);
  204.     padding-bottom: 15px;
  205.     margin-bottom: 15px;
  206. }
  207.  
  208. .day {
  209.     text-align: right;
  210.     font-weight: 400;
  211.     font-style: italic;
  212. }
  213.  
  214. /* TAB BAR */
  215. .tab {
  216.     overflow: hidden;
  217.     margin: auto;
  218. }
  219.  
  220. .tab button {
  221.     background-color: inherit;
  222.     float: left;
  223.     border: none;
  224.     outline: none;
  225.     cursor: pointer;
  226.     padding: 14px 16px;
  227.     transition: 0.3s;
  228.     font-size: 17px;
  229.     border-radius: 50%;
  230.     margin: 10px 10px;
  231.     box-shadow:  4px 4px 8px var(--sh),
  232.              -4px -4px 8px var(--li);
  233. }
  234.  
  235. .tab button:hover {
  236.     background: linear-gradient(145deg, #d4d4d9, #fbfdff);
  237. }
  238.  
  239. .tab button.active .th {
  240.     background-color: inherit;
  241.     color: var(--accent);
  242.     text-shadow:0 0 5px var(--accglow);
  243. }
  244.  
  245. .tab button.active {
  246.     box-shadow: inset 2px 2px 6px var(--sh),
  247.              inset -3px -3px 6px var(--li);
  248. }
  249.  
  250. /* TAB CONTENT STYLING */
  251. .tabcontent {
  252.     display: none;
  253.     margin: 15px;
  254.     height: 132px;
  255.     padding: 15px 20px;
  256.     border-radius: 20px;
  257.     box-shadow: inset 4px 4px 8px var(--sh),
  258.              inset -4px -4px 8px var(--li);
  259.     overflow: auto;
  260.     line-height: 1.7em;
  261. }
  262.  
  263. #stats{
  264.     line-height: 2.1em;
  265. }
  266.  
  267. #about {
  268.     line-height: 1.6em;
  269. }
  270.  
  271. #current {
  272.     line-height: 2.1em;
  273. }
  274.  
  275. #likes, #dislikes{
  276.     overflow: hidden;
  277. }
  278.  
  279. #likes ul li:before  {    
  280.     content:'\ea55'; /* 🌻 choose honeybee icon code for likes list */
  281.     font-family:'honeybee';
  282.     margin-right: 5px;
  283.     color: var(--accent);
  284. }
  285.  
  286. #dislikes ul li:before {
  287.     content:'\e965'; /* 🌻 choose honeybee icon code for dislikes list */
  288.     font-family:'honeybee';
  289.     margin-right: 5px;
  290.     color: var(--accent);
  291. }
  292.  
  293. /* NAVIGATION LIST */
  294. .link-box {
  295.     float:left;
  296.     height: 240px;
  297.     width: 170px;
  298.     margin: 0px 0px 0px 15px;
  299. }
  300.  
  301. .link {
  302.     height: 60px;
  303.     width: 170px;
  304.     margin: 0px;
  305. }
  306.  
  307. .link-icon {
  308.     height: 40px;
  309.     width: 40px;
  310.     border-radius: 50%;
  311.     box-shadow:  4px 4px 8px var(--sh),
  312.              -4px -4px 8px var(--li);
  313.     margin: 10px 0px;
  314.     float: left;
  315.     line-height: 40px;
  316.     text-align: center;
  317.     font-size: 17px;
  318. }
  319.  
  320. .link-icon .th {
  321.     color: var(--accent);
  322. }
  323.  
  324. .link-text {
  325.     height: 40px;
  326.     width: 120px;
  327.     border-radius: 20px;
  328.     box-shadow:  4px 4px 8px var(--sh),
  329.              -4px -4px 8px var(--li);
  330.     margin: 10px 0px;
  331.     float: right;
  332.     line-height: 40px;
  333.     text-align: center;
  334.     font-size: 17px;
  335.     text-transform: lowercase;
  336. }
  337.  
  338. .link:hover .link-icon, .link:hover .link-text {
  339.     background: linear-gradient(145deg, #d4d4d9, #fbfdff);
  340. }
  341.  
  342. /* ABOUT RECTANGLE */
  343. .about {
  344.     width: 95px;
  345.     height: 170px;
  346.     margin: 10px 15px;
  347.     padding: 10px 20px 0 20px;
  348.     border-radius: 20px;
  349.     box-shadow:  5px 5px 10px var(--sh),
  350.              -5px -5px 10px var(--li);
  351.     text-align: center;
  352.     font-weight: 700;
  353.     font-size: 2.7em;
  354.     text-align-last: justify;
  355.     color: var(--accent);
  356. }
  357.  
  358. /* SOCIAL MEDIA LINKS*/
  359. .social {
  360.     width: 135px;
  361.     margin: 10px 15px;
  362.     display: flex;
  363.     justify-content: space-evenly;
  364. }
  365.  
  366. .social-media{
  367.     width: 30px;
  368.     height: 30px;
  369.     margin: 5px;
  370.     border-radius: 50%;
  371.     box-shadow: inset 3px 3px 6px var(--sh),
  372.              inset -3px -3px 6px var(--li);
  373.     float: left;
  374.     line-height: 32px;
  375.     text-align: center;
  376. }
  377.  
  378. .social-media:hover .th {
  379.     color: var(--accent);
  380.     cursor: pointer;
  381. }
  382.  
  383. /* TIPPY TOOLTIPS */
  384. .tippy-box[data-theme~='tomato'] {
  385.     background-color: var(--bg);
  386.     color: var(--text);
  387.     border-radius: 5px;
  388.     box-shadow:  3px 3px 6px var(--sh),
  389.              -4px -4px 8px var(--li);
  390. }
  391. </style>
  392. </head>
  393.  
  394.  
  395.  
  396. <!--    START EDITING HERE    -->
  397.  
  398. <body>
  399.  
  400. <div class="main">
  401. <div class="left">
  402. <div class="icon">
  403.  
  404. <img src="IMAGE URL HERE"> <!-- 🌻 image is 115px by 115px-->
  405.    
  406. </img></div>
  407. <div class="updates">updates</div>    
  408. <div class="updates-content">
  409.    
  410.     <div class="update">UPDATE NAME<br>
  411.         <div class="day">UPDATE DATE</div></div>
  412.    
  413.     <div class="update">UPDATE NAME<br>
  414.         <div class="day">UPDATE DATE</div></div>
  415.    
  416.     <!-- 🌻 can copy and paste each pair of lines as many times as wanted, it will scroll-->
  417.    
  418.    
  419. </div></div>
  420. <div class="right">
  421. <div class="tab">
  422.  
  423.  <!-- 🌻 to edit the tab icons, find the th th-icon-name, to edit tooltip text, find 'data-tippy-content='tooltip text here'-->
  424.  
  425.   <button class="tablinks" onclick="openCity(event, 'stats')" id="defaultOpen" data-tippy-content="stats"><span class="th th-aloe-vera"></span></button>
  426.  
  427.   <button class="tablinks" onclick="openCity(event, 'about')" data-tippy-content="about"><span class="th th-acorn"></span></button>
  428.  
  429.   <button class="tablinks" onclick="openCity(event, 'likes')" data-tippy-content="likes"><span class="th th-mapple-leaf"></span></button>
  430.  
  431.   <button class="tablinks" onclick="openCity(event, 'dislikes')" data-tippy-content="dislikes"><span class="th th-cactus"></span></button>
  432.  
  433.   <button class="tablinks" onclick="openCity(event, 'current')" data-tippy-content="currently..."><span class="th th-leaf-1"></span></button>
  434. </div>
  435.  
  436.  <!-- STATS TAB CONTENT -->
  437. <div id="stats" class="tabcontent">
  438.  
  439.  
  440.   <span class="highlight">name:</span> NAME HERE
  441.   <br><span class="highlight">age:</span> AGE
  442.   <br><span class="highlight">pronouns:</span> PRONOUNS
  443.   <br><span class="highlight">location:</span> LOCATION
  444.  
  445.  
  446. </div>
  447.  
  448.  
  449.  
  450.  
  451.  <!-- ABOUT TAB CONTENT -->
  452. <div id="about" class="tabcontent"><p>
  453.  
  454.  
  455. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  456.    
  457.        
  458. </p></div>
  459.  
  460.  
  461.  
  462.  
  463.  <!-- LIKES TAB CONTENT -->
  464. <div id="likes" class="tabcontent"><div class="column">  
  465.  
  466.  <!-- column one items -->
  467. <ul>
  468.   <li>ITEM</li>
  469.   <li>ITEM</li>
  470.   <li>ITEM</li>
  471.   <li>ITEM</li>
  472. </ul>
  473.    
  474.    
  475. </div><div class="column">
  476.  
  477. <!-- column two items -->
  478. <ul>
  479.   <li>ITEM</li>
  480.   <li>ITEM</li>
  481.   <li>ITEM</li>
  482.   <li>ITEM</li>
  483. </ul>
  484.    
  485.    
  486. </div></div>
  487.  
  488.  
  489.  
  490.  
  491.  <!-- DISLIKES TAB CONTENT -->
  492. <div id="dislikes" class="tabcontent"><div class="column">  
  493.  
  494.  <!-- column one items -->
  495. <ul>
  496.   <li>ITEM</li>
  497.   <li>ITEM</li>
  498.   <li>ITEM</li>
  499.   <li>ITEM</li>
  500. </ul>
  501.    
  502.    
  503. </div><div class="column">
  504.  
  505. <!-- column two items -->
  506. <ul>
  507.   <li>ITEM</li>
  508.   <li>ITEM</li>
  509.   <li>ITEM</li>
  510.   <li>ITEM</li>
  511. </ul>
  512.    
  513.    
  514. </div></div>
  515.  
  516.  
  517.  <!-- CURRENTLY... TAB CONTENT -->
  518. <div id="current" class="tabcontent">
  519.  
  520.  
  521.   <span class="highlight">watching:</span> TV SHOWS AND MOVIES
  522.   <br><span class="highlight">listening to:</span> MUSIC
  523.   <br><span class="highlight">making:</span> CREATIONS
  524.   <br><span class="highlight">studying:</span> JOB/MAJOR/WHATEVER
  525.  
  526.  
  527. </div>
  528.  
  529.  
  530.  <!-- LINKS -->
  531. <div class="link-box">
  532.     <a href="/">
  533.     <div class="link">
  534.         <div class="link-icon"><span class="th th-home-o"></span></div>
  535.         <div class="link-text">index</div>
  536.     </div>
  537.     </a>
  538.    
  539.     <a href="/ask">
  540.     <div class="link">
  541.         <div class="link-icon"><span class="th th-envelope-o"></span></div>
  542.         <div class="link-text">message</div>
  543.     </div>
  544.     </a>
  545.    
  546.     <a href="/LINKHERE">
  547.     <div class="link">
  548.         <div class="link-icon"><span class="th th-push-pin-o"></span></div>
  549.         <div class="link-text">LINK ONE</div>
  550.     </div>
  551.     </a>
  552.    
  553.     <a href="/LINKHERE">
  554.     <div class="link">
  555.         <div class="link-icon"><span class="th th-push-pin-o"></span></div>
  556.         <div class="link-text">LINK TWO</div>
  557.     </div>
  558.     </a>
  559.    
  560.        
  561. </div>
  562.  
  563. <div class="bottom-right"><div class="about">a b o<br>u t /<br>/ m e</div><div class="social">
  564.  
  565.  <!-- 🌻 browse honeybee icons to see all the social media icons they have, and replace the icons with what you'd like to share. add your username in the date-tippy-content='text here' and add a link to your page where it says URL HERE-->
  566.  
  567.         <a href="URL HERE"><div class="social-media" data-tippy-content="@USERNAME"><span class="th th-discord"></span>
  568. </div></a>
  569.         <a href="URL HERE"><div class="social-media" data-tippy-content="@USERNAME"><span class="th th-instagram-o"></span>
  570. </div></a>
  571.         <a href="URL HERE"><div class="social-media" data-tippy-content="@USERNAME"><span class="th th-spotify"></span>
  572. </div></a>
  573.    
  574.        
  575. <!-- DON'T EDIT CODE BELOW HERE -->      
  576. </div>
  577. </div>
  578. </div>
  579. </div>
  580. <div id="credit" style="font-family:'Lato',sans-serif;position:fixed;bottom:15px;right:10px;font-size:14.5px;line-height:14px;height:14px;width:14px;padding:4px;" data-tippy-content="camila codes"><a href="https://ebrothemes.tumblr.com" style="color:var(--accent);">E</a></div>
  581. </center>
  582. <script>
  583. function openCity(evt, cityName) {
  584.   var i, tabcontent, tablinks;
  585.   tabcontent = document.getElementsByClassName("tabcontent");
  586.   for (i = 0; i < tabcontent.length; i++) {
  587.    tabcontent[i].style.display = "none";
  588.  }
  589.  tablinks = document.getElementsByClassName("tablinks");
  590.  for (i = 0; i < tablinks.length; i++) {
  591.    tablinks[i].className = tablinks[i].className.replace(" active", "");
  592.  }
  593.  document.getElementById(cityName).style.display = "block";
  594.  evt.currentTarget.className += " active";
  595. }
  596. document.getElementById("defaultOpen").click();
  597. </script>
  598. <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  599. <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  600. <script src="https://unpkg.com/@popperjs/core@2"></script>
  601. <script src="https://unpkg.com/tippy.js@6"></script>
  602. <script>
  603.         tippy('.tablinks', {
  604.             arrow: false,
  605.             theme: 'tomato',
  606.             });
  607. </script>
  608. <script>
  609.         tippy('.social-media', {
  610.             arrow: false,
  611.             theme: 'tomato',
  612.             placement: 'bottom',
  613.             });
  614. </script>
  615. <script>
  616.         tippy('#credit', {
  617.             arrow: false,
  618.             theme: 'tomato',
  619.             });
  620. </script>
  621. </body>
  622. </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!