API tools faq
paste
Advertisement
southcodes

fashion | about page

southcodes
Nov 20th, 2023 (edited)
1,664
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.60 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - about page 'fashion' 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.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by https://feathericons.com/
  11.    
  12.     - design by https://dribbble.com/shots/14013228-web-design/attachments/5629278?mode=media
  13.  
  14.  -->
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.    
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <meta name="description" content="{MetaDescription}"/>
  24.  
  25.     <!-- fonts -->
  26.     <link rel="preconnect" href="https://fonts.googleapis.com">
  27.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  28.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  29.  
  30.     <!-- normalize -->
  31.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  32.    
  33. <style>
  34.  
  35. :root {
  36.     --background:#eee;
  37.     --boxes-background:#fff;
  38.     --color-square:#8cb3db;
  39.     --text:#333;
  40.     --links: #6a98c5;
  41.     --links-hover:  #36608c;
  42.     --borders:#bbb;
  43.     --icons: #36608c;
  44.     --accent: #8cb3db;
  45. }
  46.  
  47. .tmblr-iframe {display: none;}
  48.  
  49. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--accent);}
  50. ::-webkit-scrollbar {width:6px}
  51. ::-webkit-scrollbar-track-piece{margin:15px 0;}
  52.  
  53. pre {font-family:consolas;
  54.     white-space: pre-wrap;       /* css-3 */
  55.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  56.     white-space: -pre-wrap;      /* Opera 4- */
  57.     white-space: -o-pre-wrap;    /* Opera 7 */
  58.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  59. * {margin: 0;padding: 0;box-sizing: border-box;}
  60. p {margin: 1rem 0;}
  61. body, figure{margin:0;padding:0;box-sizing: border-box;}
  62. html{font: 14px 'Karla', sans-serif;}
  63. body {font-size:14px;color:var(--text);background:var(--background);letter-spacing: .03rem;line-height: 120%;}
  64. a {text-decoration: none;color:var(--links);word-break:break-word;}
  65. a:hover {color:var(--links-hover);}
  66. blockquote {margin:0;padding:0;}
  67. img {max-width:100%;height: auto;display: block;margin:0}
  68. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  69. nav ul,nav li {list-style-type:none;margin:0;padding:0;}
  70.  
  71. #color-square {
  72.     background-color: var(--color-square);
  73.     max-width: 70vh;
  74.     width: 40rem;
  75.     max-height: 70vh;
  76.     height: 40rem;
  77.     position: fixed;
  78.     inset: auto 0 0 auto;
  79.     z-index: -1;
  80. }
  81.  
  82. /* containers */
  83.  
  84. #flex-container {
  85.     display: flex;
  86.     align-items: center;
  87.     justify-content: center;
  88.     width: 100%;
  89.     height: 100vh;
  90.     flex-direction: column;
  91. }
  92.  
  93. /* sidebar */
  94.  
  95. aside {
  96.     width: 35rem;
  97.     display: flex;
  98.     flex-direction: column;
  99.     justify-content: flex-start;
  100.     align-items: center;
  101.     overflow: auto;
  102.     padding: 2rem 0;
  103. }
  104.  
  105. .about-icon {
  106.     width: 4rem;
  107.     height: 4rem;
  108.     border-radius: 100%;
  109.     object-fit: cover;
  110.     margin-bottom: 1rem;
  111. }
  112.  
  113. img.about-icon {
  114.     width: 100%;
  115.     height: 100%;
  116.     object-fit: cover;
  117. }
  118.  
  119. h1 {
  120.     text-align: center;
  121.     transform: rotate(180deg);
  122.     writing-mode:vertical-rl;
  123.     font: 600 2rem 'montserrat', sans-serif;
  124.     letter-spacing: .2rem;
  125. }
  126.  
  127. h1:after {
  128.     content: '';
  129.     width: 3px;
  130.     height: 3rem;
  131.     background-color: var(--accent);
  132.     position: absolute;
  133.     top: -1rem;left:-2rem;
  134. }
  135.  
  136. #sidebar-navigation {
  137.     width: 100%;
  138.     font-size: .9rem;
  139.     text-align: center;
  140.     margin-top: 3rem;
  141.     padding:1rem 1.5rem;
  142.     border-top: 1px solid var(--borders);
  143. }
  144.  
  145. #sidebar-navigation li {
  146.     margin:4rem 0 0;
  147.     position: relative;
  148.     letter-spacing: .05rem;
  149. }
  150. #sidebar-navigation li:first-of-type {margin-top: 1.5rem;}
  151.  
  152. #sidebar-navigation li:after {
  153.     content: '';
  154.     width: 1.9rem;
  155.     height: 1px;
  156.     background-color: var(--borders);
  157.     position: absolute;
  158.     inset: -2rem 0 auto auto;
  159. }
  160.  
  161. #sidebar-navigation li:first-of-type:after {display: none;}
  162.  
  163. /* main */
  164.  
  165. main {
  166.     display: flex;
  167.     width:90%;
  168.     max-width: 65rem;
  169.     height: 80%;
  170.     max-height: 40rem;
  171.     box-sizing: border-box;
  172.     padding-right: 3rem;
  173.     background-color: var(--boxes-background);
  174. }
  175.  
  176. #main-content {
  177.     display: flex;
  178.     flex-direction: column;
  179.     width: 100%;
  180.     height: 80%;
  181.     max-height: 40rem;
  182. }
  183.  
  184. /*  navigation  */  
  185.  
  186. #main-navigation {
  187.     width: 100%;
  188.     height: 6rem;
  189.     padding: 0 2rem;
  190.     letter-spacing: .03rem;
  191. }
  192.  
  193. #main-navigation ul {
  194.     height: 100%;
  195.     display: flex;
  196.     align-items: center;
  197.     justify-content: flex-end;
  198. }
  199.  
  200. #main-navigation li {margin-left: 5rem;}
  201.  
  202. .nav-icon {width: 17px;}
  203.  
  204. /* main content */
  205.  
  206. #main-content {
  207.     height: calc(100% - 6rem);
  208.     width: 100%;
  209.     display: flex;
  210.     flex-direction: row;
  211. }
  212.  
  213. /* about text */
  214.  
  215. #about {
  216.     width: 50%;
  217.     height: 90%;
  218.     margin:0 auto;
  219.     padding: 0;
  220.     overflow: auto;
  221. }
  222.  
  223. /* about details */
  224.  
  225. #about-details {
  226.     list-style: none;
  227.     margin-bottom: 2rem;
  228. }
  229.  
  230. #about-details li {
  231.     position: relative;
  232.     margin:1rem 0;
  233.     padding-left: 1.5rem;
  234. }
  235. #about-details li:before {
  236.     content: '';
  237.     position: absolute;
  238.     top:7px;left:0;
  239.     width: 1rem;
  240.     height: 1px;
  241.     background-color: var(--accent);
  242. }
  243.  
  244. /* about image */
  245.  
  246. figure.about-image {
  247.     height: 100%;
  248.     width: 40%;
  249. }
  250.  
  251. img.about-image {
  252.     width: 100%;
  253.     height: 100%;
  254.     object-fit: cover;
  255. }
  256.  
  257. /* MEDIA */
  258.  
  259. @media only screen and (min-width:0px) and (max-width:750px) {
  260.  
  261.     /* containers */
  262.  
  263.     #flex-container {
  264.         display: block;
  265.         width: 90%;
  266.         height: 100%;
  267.         margin: 5rem auto;
  268.     }
  269.  
  270.     /* sidebar */
  271.  
  272.     aside {
  273.         width: 100%;
  274.         display: block;
  275.         padding: 2rem;
  276.     }
  277.  
  278.     .about-icon {
  279.         width: 6rem;
  280.         height: 6rem;
  281.         margin: 0 auto 2rem;
  282.     }
  283.  
  284.     img.about-icon {
  285.         width: 100%;
  286.         height: 100%;
  287.         object-fit: cover;
  288.     }
  289.  
  290.     h1 {
  291.         transform: rotate(0);
  292.         writing-mode:horizontal-tb;
  293.         margin:0 0 4rem
  294.     }
  295.  
  296.     h1:after {display: none;}
  297.    
  298.     h1 span {position: relative;}
  299.  
  300.     h1 span:after {
  301.         content: '';
  302.         width: 30%;
  303.         height: 3px;
  304.         background-color: var(--color-square);
  305.         position: absolute;
  306.         inset: auto 0 -1rem auto;
  307.     }
  308.  
  309.     #sidebar-navigation {
  310.         width: 100%;
  311.         border: 0;
  312.         margin: 0;
  313.         padding:0;
  314.     }
  315.  
  316.     #sidebar-navigation li {
  317.         margin: 0 1.5rem 0;
  318.         display: inline-block;
  319.         padding-bottom: .5rem;
  320.     }
  321.     #sidebar-navigation li:first-of-type {margin-top: 0;}
  322.  
  323.     #sidebar-navigation li:after {
  324.         content: '';
  325.         width: 1.3rem;
  326.         height: 1px;
  327.         inset: auto 7px -.1rem auto;
  328.     }
  329.  
  330.     #sidebar-navigation li:first-of-type:after {display: block;}
  331.  
  332.     /* main content */
  333.  
  334.     main {
  335.         display: block;
  336.         max-width: 65rem;
  337.         width:100%;
  338.         height: 100%;
  339.         max-height: 100%;
  340.         padding-right: 0;
  341.     }
  342.  
  343.     #main-content {
  344.         width: 100%;
  345.         flex-direction: column;
  346.         height: 100%;
  347.         max-height: 100%;
  348.     }
  349.  
  350.     #main-navigation {
  351.         height: 100%;
  352.         padding: 2rem;
  353.     }
  354.  
  355.     #about {
  356.         width: 100%;
  357.         order: 2;
  358.         padding: 2rem 3rem;
  359.     }
  360.    
  361.     figure.about-image {
  362.         width: 100%;
  363.         height: 15rem;
  364.     }
  365.  
  366.     img.about-image {
  367.         width: 100%;
  368.         height: 100%;
  369.         object-fit: cover;
  370.     }
  371. }
  372.  
  373. </style>
  374. </head>
  375. <body>
  376.  
  377. <!-- change the color of the background square in the css variable --color-square -->
  378. <div id="color-square"></div>
  379.  
  380. <section id="flex-container"><main>
  381.  
  382.     <aside>
  383.  
  384.         <!-- icon image -->
  385.  
  386.         <figure class="about-icon"><img class="about-icon" src="ICON IMAGE URL" alt=""></figure>
  387.  
  388.         <!-- page title, keep it between <span></span> preferably not too long-->
  389.  
  390.         <h1><span>title.</span></h1>
  391.  
  392.         <!-- sidebar links -->
  393.  
  394.         <nav id="sidebar-navigation"><ul>
  395.             <li><a href="LINK URL">LINK NAME</a></li>
  396.             <li><a href="LINK URL">LINK NAME</a></li>
  397.             <li><a href="LINK URL">LINK NAME</a></li>
  398.             <li><a href="LINK URL">LINK NAME</a></li>
  399.         </ul></nav>
  400.     </aside>
  401.  
  402.     <section id="main-inside">
  403.  
  404.         <!-- topbar navigation -->
  405.    
  406.         <nav id="main-navigation"><ul>
  407.            
  408.             <li><a href="/"><i class="nav-icon" data-feather="home"></i></a></li>
  409.            
  410.             <li><a href="/ask"><i class="nav-icon" data-feather="mail"></i></a></li>
  411.            
  412.             <li><a href="https://www.tumblr.com/follow/{name}"><i class=" nav-icon" data-feather="plus"></i></a></li>
  413.            
  414.         </ul></nav>
  415.  
  416.         <div id="main-content">
  417.  
  418.             <article id="about">
  419.  
  420.                 <!-- details in the about -->
  421.                 <ul id="about-details">
  422.                    
  423.                     <li>detail</li>
  424.                     <li>detail</li>
  425.                     <li>detail</li>
  426.                     <li>detail</li>
  427.                 </ul>
  428.                
  429.                 <!-- please wrap all your lines between <p>example</p> -->
  430.  
  431.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex in quos quasi pariatur perferendis cumque dolore excepturi? Blanditiis debitis ea expedita minus ad ex atque, molestias, fuga, sit at maxime?</p>
  432.  
  433.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex in quos quasi pariatur perferendis cumque dolore excepturi? Blanditiis debitis ea expedita minus ad ex atque, molestias, fuga, sit at maxime?</p>
  434.  
  435.             </article>
  436.  
  437.             <!-- about image -->
  438.             <figure class="about-image"><img class="about-image" src="IMAGE URL" alt=""></figure>
  439.  
  440.         </div>
  441.  
  442.     </section>
  443.  
  444. </main></section> <!-- flex/main -->
  445.  
  446. <!-- do not touch -->
  447. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" style="color:black" target="_blank">SC</a></div>
  448.  
  449. <script src="https://unpkg.com/[email protected]/dist/feather.min.js"></script>
  450.  
  451. <script>
  452.     feather.replace();
  453. </script>
  454. </body>
  455. </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!