API tools faq
paste
longituddeonda

about three: eloquent / about page

longituddeonda
Jul 27th, 2020 (edited)
1,192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.06 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. ;; about three: eloquent ;;
  4.  
  5. about page by ebrothemes
  6.  
  7. TERMS OF USE:
  8. - do not remove or edit the credit.
  9.            (it will automatically change color
  10.            along with your color customizations.)
  11. - do not repost/redistribute.
  12. - do not take parts of the code and use it as your own.
  13. - do not use as a base code.
  14.  
  15.  
  16. CREDITS:
  17. Background pattern from Toptal Subtle Patterns
  18. normalize.css by necolas on github
  19.  
  20.  
  21. COLORS:
  22. if you want to change the colors, mess with the colors in the ::root section which will change the colors across the code
  23.  
  24.  
  25. INSTRUCTIONS:
  26. all editing should be clear once you reach the html sequence in the bottom half.
  27.  
  28. BUT to edit/add the images, look for the 🌻 emoji or search for where it says 'replace this url with your image' and you'll change where it says 'URLHERE' to your image url. there are additional troubleshooting notes in that area.
  29.  
  30.  
  31. x camila
  32.  
  33. ----->
  34.  
  35. <!DOCTYPE html>
  36. <html>
  37. <html lang="en-US">
  38. <head>
  39.  
  40. <title>about me</title>  
  41.  
  42. <link rel="shortcut icon" href="{Favicon}">
  43. <meta name="viewport" content="width=device-width, initial-scale=1">
  44. <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  45.  
  46. <link href="https://fonts.googleapis.com/css2?family=Khula:wght@300;400&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  47.  
  48. <link href="https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap" rel="stylesheet">
  49.  
  50. <style type="text/css">
  51.  
  52. :root {
  53.     --background:#ffffff;
  54.     --aboutbg:#ffffff;
  55.    
  56.     --text:#131515;
  57.     --accent:#C0728F;
  58.     --accenttext:#ffffff;
  59. }
  60.  
  61. body {
  62.     color: var(--text);
  63.     font-family: 'Poppins', sans serif;
  64.     background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/inflicted.png');
  65.     background-position: center;
  66. }
  67.    
  68. .grid-container1 {
  69.     display: grid;
  70.     height: 100vh;
  71.     grid-template-columns: 1fr 800px 1fr;
  72.     grid-template-rows: 1fr 500px 1fr;
  73. }
  74.  
  75. .credit {
  76.     position: absolute;
  77.     bottom: 20px;
  78.     right: 20px;
  79.     height: 20px;
  80.     font-size:17.5px;
  81.     line-height:20px;
  82.     border-radius: 20px;
  83.     text-align: center;
  84.     background: var(--accent);
  85.     padding: 2px 0px;
  86.     font-weight:400;
  87.     opacity: 0.5;
  88.     box-shadow: 0px 0px 10px -2px #000;
  89.     transition: 200ms;
  90. }
  91.  
  92. .credit a {
  93.     text-decoration: none;
  94.     padding: 5px 8px;
  95. }
  96.  
  97. .credit:hover {
  98.     opacity: 1;
  99. }
  100.  
  101. .grid-container2 {
  102.     border-radius: 7px 10px 10px 10px;
  103.     box-shadow: 0px 3px 10px -2px #000;
  104.     grid-area: 2 / 2 / 2 / 2;
  105.     background: var(--aboutbg);
  106.     display: grid;
  107.     height: 100%;
  108.     grid-template-columns: 1fr 1fr 1fr 1fr;
  109.     grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
  110. }
  111.  
  112. /* TOP LYRIC */
  113.  
  114. .topbar {
  115.     grid-area: 1 / 1 / 1 / 4;
  116.     border-bottom:1px solid var(--accent);
  117.     color: var(--accent);
  118.     font-weight: 700;
  119.     font-style: italic;
  120.     line-height: 50px;
  121.     text-align: center;
  122. }
  123.  
  124. /* SMALL PICTURE STYLING */
  125.  
  126. .leftpic {
  127.     grid-area: 8 / 1 / 11 / 1;
  128.     background: var(--accent);
  129.     border-radius: 0 0 0 7px;
  130. }
  131.  
  132. /* LONG PICTURE STYLING */
  133.  
  134. .rightpic {
  135.     grid-area: 1 / 4 / 11 / 4;
  136.     background: var(--accent);
  137.     border-radius: 0 7px 7px 0;
  138. }
  139.  
  140. /* MAIN ABOUT BOX */
  141.  
  142. .main {
  143.     grid-area: 2 / 2 / 8 / 4;
  144.     padding: 0px 15px;
  145.     overflow: auto;
  146.     border-top: 15px solid var(--aboutbg);
  147.     border-bottom: 15px solid var(--aboutbg);
  148. }
  149.  
  150. .main p {
  151.     margin-top: 0;
  152.     font-size: 10pt;
  153.     line-height: 20px;
  154. }
  155.  
  156. .main i {
  157.     color: var(--accent);
  158. }
  159.  
  160. .main b {
  161.     color: var(--accent);
  162. }
  163.  
  164. .main a {
  165.     color: var(--text);
  166.     text-decoration-color: var(--accent);
  167.     transition: 200ms;
  168. }
  169.  
  170. .main a:hover {
  171.     color: var(--accent);
  172. }
  173.  
  174. /* NAME AND INFO BOX */
  175.  
  176. .base {
  177.     grid-area: 9 / 2 / 11 / 4;
  178.     border-bottom:5px solid var(--accent);
  179.     text-align: center;
  180. }
  181.  
  182. .name {
  183.     width: max-content;
  184.     border-bottom: 1px solid var(--accent);
  185.     margin: 10px auto;
  186.     padding: none;
  187.     font-weight: 700;
  188.     font-style: italic;
  189.     font-size: 28pt;
  190. }
  191.  
  192. .base p {
  193.     padding: none;
  194.     margin: none;
  195.     line-height: 3px;
  196.     font-family:'Khula', sans-serif;
  197.     font-weight: 300;
  198. }
  199.  
  200. /* LINKS */
  201.  
  202. .links {
  203.     grid-area: 8 / 2 / 8 / 4;
  204.     border-bottom:1px solid var(--accent);
  205.     border-top:1px solid var(--accent);
  206. }
  207.  
  208. .links ul {
  209.     list-style-type: none;
  210.     margin: 0;
  211.     padding: 0;
  212.     display: flex;
  213.     justify-content: space-evenly;
  214. }
  215.  
  216. .links li {
  217.     display: inline;
  218.     line-height: 50px;
  219. }
  220.  
  221. .links a {
  222.     padding: 0 8px;
  223.     text-decoration: none;
  224.     color: var(--accent);
  225.     font-weight: 700;
  226.     font-style: italic;
  227.     transition: 400ms;
  228.     border-radius: 3px;
  229. }
  230.  
  231. .links li a:hover {
  232.     background: var(--accent);
  233.     color: var(--accenttext);
  234. }
  235.  
  236. /* TAGS / NAVIGATION */
  237.  
  238. .stats {
  239.     grid-area: 2 / 1 / 8 / 1;
  240.     background: var(--accent);
  241.     display: flex;
  242. }
  243.  
  244. .stats ul {
  245.   list-style: none;
  246.   padding: none;
  247.   margin-left: -20px;
  248.   color: var(--accenttext);
  249.   display: flex;
  250.   flex-direction: column;
  251.   justify-content: space-around;
  252. }
  253.  
  254. .stats li {
  255.   padding-left: none;
  256.   margin: none;
  257.   text-indent: 0px;
  258.   line-height:10px;
  259. }
  260.  
  261. .stats a {
  262.     text-decoration: none;
  263.     color: inherit;
  264.     padding: 6px 8px;
  265.     border-radius: 3px;
  266.     font-weight: 300;
  267.     font-family: 'Poppins', sans-serif;
  268.     font-style: italic;
  269.     letter-spacing: 1px;
  270.     transition: 400ms;
  271. }
  272.  
  273. n {
  274.     position: relative;
  275.     right: 5px;
  276.     top: 7px;
  277.     font-family: 'Londrina Outline', display;
  278.     font-style: normal;
  279.     font-size: 30pt;
  280. }
  281.  
  282. .stats a:hover {
  283.     background: var(--aboutbg);
  284.     color: var(--text);
  285. }
  286.  
  287.  
  288. /* LONG PHOTO */
  289.  
  290. .pic1 {
  291.     height: 500px;
  292.     width: 200px;
  293.    
  294.    
  295.      /* 🌻 replace this url with your image for the right picture */
  296.     background-image: url("URLHERE");
  297.    
  298.    
  299.     /* if it looks weird like it's repeating, switch the two values under 'background-size' to '100% auto' and it should correct it */
  300.    
  301.     /* if it isn't centered properly, mess around with the FIRST percentage under 'background-position' to move it left or right */
  302.    
  303.     /* if it looks too dark or light, or the contrast is off, you can edit that under 'filter'. just change the brightness and contrast values. 100% is normal. lower percentages lower the brightness/contrast, higher percentages increase it. */
  304.    
  305.     background-position: 50% 50%;
  306.     background-size: auto 100%;
  307.     border-radius: 0 7px 7px 0;
  308.     filter: grayscale(100%) brightness(100%) contrast(100%);
  309.     mix-blend-mode: multiply;
  310. }
  311.  
  312. /* SMALL PHOTO */
  313.  
  314. .pic2 {
  315.     height: 150px;
  316.     width: 200px;
  317.    
  318.    
  319.     /* 🌻 replace this url with your image for the bottom left photo*/
  320.     background-image: url("URLHERE");
  321.    
  322.     /* if it looks weird like it's repeating, switch the two values under 'background-size' to '100% auto' and it should correct it */
  323.    
  324.     /* if it isn't centered properly, mess around with the FIRST percentage under 'background-position' to move it left or right */
  325.    
  326.     /* if it looks too dark or light, or the contrast is off, you can edit that under 'filter'. just change the brightness and contrast values. 100% is normal. lower percentages lower the brightness/contrast, higher percentages increase it. */
  327.    
  328.    
  329.     background-position: 50% 50%;
  330.     background-size: auto 100%;
  331.     border-radius: 0 0 0 7px;
  332.     filter: grayscale(100%) brightness(100%) contrast(100%);
  333.     mix-blend-mode: multiply;
  334. }
  335.    
  336. </style>
  337.  
  338.      
  339. </head>
  340.  
  341. <body>
  342. <div class="grid-container1">
  343.  
  344.     <div class="grid-container2">
  345.     <div class="rightpic"><div class="pic1"></div></div>
  346.     <div class="leftpic"><div class="pic2"></div></div>
  347.    
  348.    
  349.    
  350. <!-- QUOTE / LYRIC -->
  351.         <div class="topbar">
  352.             lyrics here
  353.         </div>
  354.        
  355.        
  356. <!-- TAGS -->
  357.        
  358.         <div class="stats">
  359.             <ul>
  360.            
  361.             <!-- TAGS / NAVIGATION goes here. they space themselves but i'd recommend sticking with 5 - 7 tags -->
  362.            
  363.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  364.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  365.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  366.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  367.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  368.             <li><a href="/tagged/TAG HERE"><n>#</n>tag name</a></li>
  369.            
  370.            
  371.             </ul>
  372.         </div>
  373.        
  374.        
  375. <!-- ABOUT -->
  376.  
  377. <div class="main">
  378.        
  379.         <!-- about text goes in between this note -->
  380.             <p>main about text goes here. supports html markups like <b>bold text</b> and <i>italics</i>. it also has nice paragraph spacing when you wrap paragraphs in their tags</p>
  381.            
  382.             <p>you can also <a href="https://ebrothemes.tumblr.com">link things</a> in the text. </p>
  383.  
  384.             <h3>headings are supported</h3>
  385.             <p>but i wouldn't go higher than h3 otherwise it gets pretty large.</p>
  386.             <h4>here's  a smaller heading</h4>
  387.             <h5>and an even smaller one</h5>
  388.             <p>also this entire text section scrolls when it gets long enough.</p>
  389.            
  390.         <!-- and this note -->    
  391.            
  392. </div>
  393.        
  394.  
  395. <!-- LINKS -->
  396.  
  397.         <div class="links"><ul>
  398.             <li><a href="/">home</a></li>
  399.             <li><a href="/ask">ask</a></li>
  400.             <li><a href="/archive">archive</a></li>
  401.             <li><a href="/URLHERE">custom link</a></li>
  402.         </ul></div>
  403.        
  404.        
  405. <!-- NAME AND INFO -->
  406.  
  407.         <div class="base">
  408.             <div class="name">name here</div>
  409.             <p>age -- pronouns -- location</p>
  410.         </div>
  411.        
  412.  
  413.  
  414. </div>
  415. <div class="credit"><a href="https://ebrothemes.tumblr.com" title="ebrothemes" style="color:var(--accenttext);">E</a></div>
  416. </div>
  417.  
  418. </body>
  419. </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!