API tools faq
paste
Advertisement
southcodes

kiss & tell | about page

southcodes
Mar 22nd, 2022
1,655
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - page 'kiss & tell' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - design inspired by https://dailydesignfromdebby.tumblr.com/post/167404734617
  9.     - normalize css by https://github.com/necolas
  10.     - fonts by google
  11.     - icon font by https://fontawesome.com/
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.  
  20.     <meta charset="UTF-8">
  21.     <meta name="viewport" content="width=device-width">
  22.  
  23.     <link rel="shortcut icon" href="{favicon}">
  24.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.     <meta name="description" content="{MetaDescription}"/>
  26.  
  27.     <!-- fonts -->
  28.     <link rel="preconnect" href="https://fonts.googleapis.com">
  29.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  30.     <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Hurricane&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap" rel="stylesheet">
  31.    
  32.     <!-- icons font -->
  33.     <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  34.  
  35.     <!-- normalize -->
  36.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  37.    
  38. <style>
  39.  
  40. :root {
  41.     --background: #f7f7f7;
  42.     --container-background: #fff;
  43.     --text: #333;
  44.     --name-color:#888;
  45.     --links: rgb(158, 208, 224);
  46.     --links-hover: blue;
  47.     --borders: pink;
  48.     --icons: lightblue;
  49. }
  50.  
  51. body, figure{margin: 0;padding: 0}
  52. html{font-size: 14px}
  53. body {font: 1rem 'Open Sans', sans-serif;color:var(--text);background:var(--background)}
  54. a {text-decoration: none;color:var(--links);}
  55. a:hover {color:var(--links-hover);}
  56. b {font-weight: 600}
  57.  
  58. main {
  59.     width: 100vw;
  60.     height: 100vh;
  61.     display: flex;
  62.     flex-flow: column wrap;
  63.     justify-content: center;
  64.     align-items: center;
  65.     font-size: .9rem;
  66. }
  67.  
  68. .divider {
  69.     border:0;
  70.     border-top:1px solid var(--borders);
  71.     margin:2.5rem auto;
  72.     width: 70%;
  73. }
  74.  
  75. #about-wrapper {
  76.     width:23rem;
  77.     height:90vh;
  78.     max-height: 37rem;
  79.     background-color: var(--container-background);
  80.     border-radius:8px;
  81.     border: 1px solid var(--borders);
  82.     position: relative;
  83. }
  84.  
  85. #scroll-wrapper {
  86.     height: 100%;
  87.     overflow: auto;
  88.     box-sizing: border-box;
  89.     padding-bottom:5rem;
  90.     border-radius: 8px;
  91. }
  92.  
  93. figure.about-image {
  94.     width:100%;
  95.     height: 10rem;
  96.     position: relative;
  97. }
  98.  
  99. img.about-image {
  100.     width:100%;
  101.     height: 100%;
  102.     object-fit: cover;
  103.     border-top-left-radius:8px;
  104.     border-top-right-radius:8px;
  105.     z-index: 2;
  106.     position: absolute;top:0
  107. }
  108.  
  109. .icon-image {
  110.     width: 7rem;
  111.     height: 7rem;
  112.     border-radius: 100%;
  113.     border:10px solid var(--container-background);
  114.     z-index: 999999;
  115.     margin: auto;
  116.     display: block;
  117.     position: relative;top:5rem;
  118.     object-fit: cover;
  119. }
  120.  
  121. .title {
  122.     font-family: 'Hurricane', cursive;
  123.     margin:3rem 0 0;
  124.     padding: 0;
  125.     font-weight: 400;
  126.     font-size: 3rem;
  127.     text-align: center;
  128. }
  129. .name  {
  130.     font:400 .8rem 'Montserrat', sans-serif;
  131.     margin:0 0 1rem;
  132.     text-align: center;
  133.     text-transform: uppercase;
  134.     letter-spacing: .03rem;
  135.     color:var(--name-color);
  136. }
  137.  
  138. /* details */
  139.  
  140. #details {
  141.     padding: 0 2rem;
  142.     letter-spacing: .03rem;
  143. }
  144.  
  145. #details li {list-style-type:none;margin:0 0 1rem;padding:0;}
  146.  
  147. #details .fa {
  148.     color:var(--icons);
  149.     font-size: 1rem;
  150.     margin-right: 1rem;
  151. }
  152.  
  153. /* bio */
  154.  
  155. #bio {
  156.     padding: 0 2rem;
  157.     letter-spacing: .04rem;
  158.     line-height: 170%;
  159. }
  160.  
  161. /* blogs */
  162.  
  163. #blogs {
  164.     padding: 0 2rem;
  165. }
  166.  
  167. .single-blog {
  168.     margin:1rem 0
  169. }
  170.  
  171. .blogs-image {
  172.     width: 3rem;
  173.     height: 3rem;
  174.     display: inline-block;
  175.     vertical-align: middle;
  176.     margin-right: 1rem;
  177.     border:5px solid var(--container-background);
  178.     outline: 1px solid var(--borders);
  179.     box-sizing: border-box;
  180. }
  181.  
  182. .blog-name {
  183.     display: inline-block;
  184.     vertical-align: middle;
  185.     margin:1rem 0;
  186.     font-family: 'Montserrat', sans-serif;
  187.     text-transform: uppercase;
  188.     font-weight: 600;
  189.     line-height: 175%;
  190. }
  191.  
  192. /* links */
  193.  
  194. #links {
  195.     padding: 0 2rem;
  196.     text-transform: uppercase;
  197.     letter-spacing: .03rem;
  198.     font-weight: 600;
  199. }
  200.  
  201. #links li {
  202.     list-style-type: none;
  203.     padding: 0;
  204.     margin: 0;
  205.     display: inline;
  206. }
  207.  
  208. #links .link {
  209.     margin:0 1rem 1rem;
  210.     display: inline-block;
  211. }
  212.  
  213. #links .link:before {
  214.     content:'\f0c6';
  215.     font-family: "Font Awesome 6 Free";
  216.     margin-right: 1rem;
  217.     color:var(--icons)
  218. }
  219.  
  220. /* socials */
  221.  
  222. #socials {
  223.     display: flex;
  224.     flex-flow: row wrap;
  225.     justify-content: space-around;
  226. }
  227.  
  228. #socials a {
  229.     color:var(--icons);
  230. }
  231.  
  232. #socials .fa {font-size: 1.1rem;margin:1rem }
  233.  
  234. /* follow + message */
  235.  
  236. #fixed {
  237.     position: absolute;
  238.     bottom:0;left:0;right:0;
  239.     display: flex;
  240.     flex-flow: row wrap;
  241.     text-align: center;
  242.     justify-content: space-evenly;
  243.     background-color: var(--container-background);
  244.     border-bottom-left-radius: 8px;
  245.     border-bottom-right-radius: 8px;
  246.     font-family: 'Montserrat', sans-serif;
  247.     text-transform: uppercase;
  248.     font-weight: 700;
  249.     font-size: 1rem;
  250. }
  251.  
  252. #fixed a{
  253.     width: 50%;
  254.     padding: 1rem;
  255.     box-sizing: border-box;
  256.     border-top:1px solid var(--borders);
  257.     border-bottom-left-radius: 8px;
  258.     border-bottom-right-radius: 8px;
  259.     color:var(--text);
  260.     text-shadow: 2px 2px 1px var(--links);
  261.     font-weight: 700;
  262.     transition-duration: .2s;
  263. }
  264.  
  265. #fixed a:hover{text-shadow: 2px 2px 1px var(--links-hover);}
  266.  
  267. #fixed a:first-of-type{
  268.     border-right: 1px solid var(--borders);
  269.     border-bottom-right-radius: 0;
  270. }
  271.  
  272. #fixed a:last-of-type{border-bottom-left-radius: 0;}
  273.  
  274. </style>
  275. </head>
  276. <body>
  277.  
  278. <!--
  279.     remember to insert the url of your blog where its required!
  280. -->
  281.  
  282. <main>
  283.  
  284.     <section id="about-wrapper"><div id="scroll-wrapper">
  285.  
  286.             <figure class="about-image">
  287.                
  288.                 <img src="IMAGE URL" class="about-image">
  289.                
  290.                 <img src="IMAGE URL" class="icon-image">
  291.                
  292.             </figure>
  293.            
  294.                    
  295.             <h1 class="title">title</h1>
  296.  
  297.             <h2 class="name">@YOUR URL HERE</h2>
  298.  
  299.             <article id="details">
  300.                 <li><i class="fa fa-user"></i> name</li>
  301.                 <li><i class="fa fa-calendar-day"></i> age </li>
  302.                 <li><i class="fa fa-heart"></i> pronouns</li>
  303.                 <li><i class="fa fa-location-dot"></i> location</li>
  304.                 <li><i class="fa fa-music"></i>currently listening</li>
  305.                 <li><i class="fa fa-tv"></i>currently watching</li>
  306.             </article>
  307.  
  308.         <hr class="divider">
  309.  
  310.             <article id="bio">
  311.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus minus assumenda delectus autem nisi cupiditate itaque earum possimus ipsum a eos sapiente beatae dignissimos, tenetur obcaecati saepe ad quaerat.</p>
  312.                
  313.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus minus assumenda delectus autem nisi cupiditate itaque earum possimus ipsum a eos sapiente beatae dignissimos, tenetur obcaecati saepe ad quaerat.</p>
  314.             </article>
  315.  
  316.         <hr class="divider">
  317.  
  318.             <article id="blogs">
  319.                
  320.                 <div class="single-blog"><a href="BLOG URL" target="_blank">
  321.                    
  322.                     <img src="IMAGE URL" alt="" class="blogs-image">
  323.  
  324.                     <div class="blog-name">blog name 1</div>
  325.  
  326.                 </a></div>
  327.                
  328.                 <div class="single-blog"><a href="BLOG URL" target="_blank">
  329.                    
  330.                     <img src="IMAGE URL" alt="" class="blogs-image">
  331.  
  332.                     <div class="blog-name">blog name 2</div>
  333.  
  334.                 </a></div>
  335.                
  336.                 <div class="single-blog"><a href="BLOG URL" target="_blank">
  337.                    
  338.                     <img src="IMAGE URL" alt="" class="blogs-image">
  339.  
  340.                     <div class="blog-name">blog name 3</div>
  341.  
  342.                 </a></div>
  343.  
  344.                
  345.             </article>
  346.  
  347.         <hr class="divider">
  348.  
  349.             <article id="links">
  350.                 <a href="#" class="link"><li>link 1</li></a>
  351.  
  352.                 <a href="#" class="link"><li>link 2</li></a>
  353.                
  354.                 <a href="#" class="link"><li>link 3</li></a>
  355.                
  356.                 <a href="#" class="link"><li>link 4</li></a>
  357.             </article>
  358.            
  359.         <hr class="divider">
  360.  
  361.             <article id="socials">
  362.  
  363.                 <a href="#"><i class="fa fa-brands fa-twitter"></i></a>
  364.  
  365.                 <a href="#"><i class="fa fa-brands fa-facebook"></i></a>
  366.  
  367.                 <a href="#"><i class="fa fa-brands fa-instagram"></i></a>
  368.                
  369.                 <a href="#"><i class="fa fa-brands fa-tiktok"></i></a>
  370.  
  371.                 <!-- find more icons: https://fontawesome.com/search -->
  372.  
  373.             </article>
  374.    
  375.     </div>    <!-- scroll-wrapper -->
  376.  
  377.         <article id="fixed">
  378.             <a href="https://tumblr.com/message/YOUR URL HERE" target="_blank">message</a>
  379.  
  380.             <a href="https://www.tumblr.com/follow/YOUR URL HERE" target="_blank">follow</a>
  381.         </article>
  382.  
  383.     </section>    <!-- wrapper -->
  384.  
  385. </main>
  386.  
  387. <!-- don't touch -->
  388.  
  389. <a title="coded by southcodes" href="https://southcodes.tumblr.com/" target="_blank" style="font-family: 'Open Sans', sans-serif;position: fixed;bottom:1rem;right:1rem;color:var(--text);font-size: .8rem;font-weight: 600;letter-spacing: .03rem;">SC</a>
  390.  
  391. </body>
  392. </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!