API tools faq
paste
Advertisement
aureacor

page two: no exit

aureacor
Apr 20th, 2022 (edited)
4,471
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.57 KB | None | 0 0
raw download clone embed print report
  1.  <!DOCTYPE html PUBLIC>
  2.  
  3. <!------------------------------------------------------
  4.  
  5.      no exit 2.0 @ aureacor
  6.    
  7.    - do not steal
  8.    - do not remove credit, or take portions of my code for your own page
  9.    - do not claim as your own
  10.    - do not use my code as a base
  11.  
  12.    - font: sorts mill goudy by Barry Schwartz
  13.    - icon: fontawesome
  14.  
  15. -------------------------------------------------------->
  16. <title>{title}</title>
  17.  
  18. <style type="text/css">
  19. @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');
  20.  
  21. :root {
  22.  
  23. /* FONTS */
  24.   --font-one: times;
  25.   --font-two: times;
  26.  
  27.  
  28. /*  COLORS */
  29.   --background: #F9F6F0;
  30.   --border: #d4cdc9;
  31.  
  32.   --text: #000;
  33.   --linkhover: #ccc;
  34.   --bold: #000;  
  35.   --specialbg: #bfb5ae;  
  36.   --text-special: #fff;  
  37.  
  38.  
  39. /*  SIIZING */
  40.   --container: 560px;
  41.   --line-divider: 50px;
  42.  
  43.   --text-header: 24px;
  44.   --text-subtitle: 12px;
  45.   --text-navigation: 12px;
  46.   --text-inline: 12px;
  47.  
  48.   --text-firstletter: 400%;
  49.   --text-body: 12px;
  50.   --text-bold: 9px;
  51.   --text-quote: 12px;
  52. }
  53.  
  54. /* GENERAL */
  55.  
  56. ::-webkit-scrollbar { display: none; }
  57.  
  58.  body {
  59.     background: var(--background);
  60.     /*  add grayed out text if you want to include a background
  61.  
  62.     background: url('') no-repeat center center fixed;
  63.     background-size: auto;
  64.   -webkit-background-size: cover;
  65.   -moz-background-size: cover;
  66.   -o-background-size: cover;
  67.   background-size: cover; */
  68.  
  69.     margin: 0 auto;
  70.     width: 100%;
  71. }
  72.  
  73. /* MAIN TITLE */
  74.  
  75.  .header {
  76.     margin: 50px auto;
  77.     text-align: center;
  78.     width: var(--container);
  79.     word-break: break-word;
  80. }
  81.  
  82. .header h1 {
  83.     font-family: var(--font-one);
  84.     text-transform: uppercase;
  85.     font-weight: 400;
  86.     font-size:  var(--text-header);
  87.     letter-spacing: 1px;
  88.      margin: 10px 0px 15px 0px;
  89.  }
  90.  
  91. .header i {
  92.     font-family: var(--font-two);
  93.     font-weight: 400;
  94.     text-transform: lowercase;
  95.     font-size: var(--text-subtitle);
  96.     letter-spacing: 1px;
  97.     margin: 0;
  98. }
  99.  
  100. .header a {
  101.     padding: 0 10px;
  102.     margin-top: 0px;
  103.     font-family: var(--font-two);
  104.     text-decoration: none;
  105.     color: var(--text);
  106.     font-style: italic;
  107.     letter-spacing: 1px;
  108.     transition: 0.5s ease all;
  109.     font-size: 13px;
  110. }
  111.  
  112. .header a:hover {
  113.     color: var(--linkhover);
  114.     transition: 0.5s ease all;
  115. }
  116.  
  117. .header em {
  118.     font-size: 10px;
  119.     vertical-align: middle;
  120. }
  121.  
  122. .line {
  123.     width: 1px;
  124.     height: var(--line-divider);
  125.     background: var(--text);
  126.     margin: 35px auto 35px auto;
  127. }
  128.  
  129.  
  130. .links { word-break: break-word; }
  131. .links li:not(:last-child):after { content: "*"; font-size: 10px;}
  132.  
  133. .links ul {
  134.     list-style:none;
  135.     text-transform:lowercase;
  136.     margin: 0px;
  137.     padding: 0px;
  138. }
  139.  
  140. .links a {  
  141.     letter-spacing: 1px;
  142.      Font-weight: 200;
  143.     text-decoration: none;
  144.     -webkit-transition: all 0.5s ease;
  145.     -moz-transition: all 0.5s ease;
  146.     -o-transition: all 0.5s ease;
  147. }
  148.  
  149. .links a:hover {
  150.    -webkit-transition: all 0.5s ease;
  151.     -moz-transition: all 0.5s ease;
  152.     -o-transition: all 0.5s ease;
  153. }
  154.  
  155. .links ul li {
  156.     display:inline;
  157. }
  158.  
  159.  
  160. /* THREE PART SECTION  */
  161.  
  162.  .flex-container {
  163.     display: flex;
  164.     justify-content: space-around;
  165.     width: var(--container);
  166.     margin: 0 auto;
  167.     margin-bottom: 50px;
  168. }
  169.  
  170.  .flex-items {
  171.     height: 20px;
  172.     margin: 10px;
  173.     flex: 1;
  174.     justify-content: center;
  175.     align-items: center;
  176.     display: flex;
  177. }
  178.  
  179. #flex-center img {
  180.     height:  60px;
  181.    object-fit: contain;
  182. }
  183.  
  184. #flex-sides {
  185.     font-size: var(--text-inline);
  186.     font-family: var(--font-two);
  187.     font-style: italic;
  188.     letter-spacing: 1px;
  189.     padding: 0 10px;
  190. }
  191.  
  192. /* BODY  */
  193.  
  194. .text {
  195.     color: var(--text);
  196.     width: var(--container);
  197.     margin: 0 auto;
  198.     margin-top: 70px;
  199.     border: 2px solid var(--background);
  200.     padding: 20px 65px 65px 65px;
  201.     margin-bottom: 75px;
  202.     text-align:center;
  203. }
  204.  
  205. .double-border {
  206.   outline: 2px solid var(--border);
  207.   box-shadow:inset 0 0 0 1px var(--border);
  208.   background: var(--background);
  209. }
  210.  
  211. span {
  212.     float: left;
  213.     margin-top: 15px; /* change top of the letter's spacing */
  214.     width: .8em;  /* change right of the letter's spacing */
  215.     font-size: var(--text-firstletter);
  216.     font-family: var(--font-two);
  217. }
  218.  
  219.  
  220. .text p {
  221.     font-family: var(--font-two);
  222.     font-size: var(--text-body);
  223.     text-align: justify;
  224.     line-height: 165%;
  225.  }
  226.  
  227. .text b {
  228.     text-transform: uppercase;
  229.     font-size: var(--text-bold);
  230.     color: var(--bold);
  231.     letter-spacing: 0.5px;
  232. }
  233.  
  234. .text special {
  235.     color: var(--text-special);
  236.     background: var(--specialbg);
  237.     padding: 1px 5px;
  238.     border-radius: 2px;
  239.     margin: 0 2px;
  240. }
  241.  
  242. .text u {
  243.     text-decoration: none;
  244.     border-bottom: 1.5px solid var(--border);
  245. }
  246.  
  247. .text img {
  248.     width: 100%;
  249.     object-fit: cover;
  250.     padding: 20px 0px;
  251. }
  252.  
  253.  
  254. /* QUOTE  */
  255.  
  256. #quote {
  257.   width: 70%;
  258.   font-style: italic;
  259.   font-size: var(--text-quote);
  260.   letter-spacing: 1px;
  261.   text-transform: lowercase;
  262.   text-align: center;
  263.   margin: 35px auto 35px auto;
  264. }
  265.  
  266. #quote em {
  267.   text-transform: uppercase;
  268.   font-weight: 700;
  269.   letter-spacing: 1px;
  270. }
  271.  
  272. #quote em i {
  273.  text-transform: lowercase;
  274.  font-weight: 400;
  275.  margin-left: 8px;
  276. }
  277.  
  278. /* SUB HEADER  */
  279.    
  280. #subheader {
  281.   font-family: var(--font-one);
  282.   font-size: var(--text-header);
  283.   font-weight: 400;
  284.   text-transform: uppercase;
  285.   letter-spacing: 1px;
  286.   margin: 40px 0px -5px 0px;
  287.  }
  288.  
  289. #subheader-subtitle {
  290.   font-family: var(--font-two);
  291.   font-size: var(--text-subtitle);
  292.   font-weight: 400;
  293.   text-transform: lowercase;
  294.   letter-spacing: 1px;
  295.   font-style: italic;
  296.   text-align: center;
  297.   margin-bottom: 30px;
  298.  }
  299.  
  300. .credit { position: fixed;     bottom: 0.7em;    right: 1em; }
  301. .credit a {font-size: 14px; text-decoration: none; transition: 0.3s ease all; color:  var(--text);}
  302.  
  303.  
  304. </style>
  305. <body>
  306.  
  307. <div class="text double-border">
  308. <div class="header">
  309.     <i> words here </i>
  310.     <h1> title here </h1>
  311.  
  312. <div class="links"> <ul>
  313.      <li> <a href="/"> ask </a> </li>
  314.      <li> <a href="/"> navigation </a> </li>
  315.      <li> <a href="/"> submit </a> </li>
  316. </ul> </div>
  317. </div>
  318.  
  319.  
  320. <div class="flex-container">
  321.  
  322.       <div class="flex-items" id="flex-sides" style="border-right: 1px solid var(--border);"> words here   </div>
  323.  
  324.       <div class="flex-items" id="flex-center">   <img src="https://via.placeholder.com/60"></img>  </div>  <!-- PLACE IMAGE HERE -->
  325.    
  326.       <div class="flex-items" id="flex-sides" style="border-left: 1px solid var(--border);"> words here   </div>  <!-- COPY THIS LINE IF YOU WANT MORE ITEMS -->
  327.  
  328. </div>
  329.  
  330.  
  331. <p> <span>T</span> is some normal text. <i> This is itlalic text. </i> <b>This is bold text.</b> <u> This is underlinelined text.</u> This is <special>special</special> text.  Aliquam erat volutpat. Vestibulum eget nunc semper dolor ullamcorper elementum et sit amet nulla. Nullam convallis et odio at iaculis. Suspendisse ac rhoncus nisl. Morbi eu mollis erat. Mauris in mauris sit amet sem pellentesque facilisis. Praesent id rutrum neque. Aliquam placerat posuere massa, sed vehicula lectus dignissim eu. Integer vitae tortor nisl. Suspendisse eget nibh ac quam molestie bibendum et sed turpis. Suspendisse ac magna nec nibh dapibus pretium.</p>
  332.  
  333.  
  334.     <img src="https://via.placeholder.com/560x200"></img>  <!-- PLACE IMAGE HERE -->
  335.  
  336.  
  337. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Etiam mollis euismod lectus, id vulputate quam tincidunt at.</b> Aliquam erat volutpat. Vestibulum eget nunc semper dolor ullamcorper elementum et sit amet nulla. Nullam convallis et odio at iaculis. Suspendisse ac rhoncus nisl. Morbi eu mollis erat. Mauris in mauris sit amet sem pellentesque facilisis. Praesent id rutrum neque. Aliquam placerat posuere massa, sed vehicula lectus dignissim eu. Integer vitae tortor nisl. Suspendisse eget nibh ac quam molestie bibendum et sed turpis. Suspendisse ac magna nec nibh dapibus pretium.</p>
  338.  
  339.  
  340.      <p id="quote">
  341.         "PLACE YOUR QUOTE HERE."
  342.      <br></br>
  343.         <em> - author  <i>"title here"</i> </em>
  344.      </p>
  345.  
  346.  
  347. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis euismod lectus, id vulputate quam tincidunt at. Aliquam erat volutpat. Vestibulum eget nunc semper dolor ullamcorper elementum et sit amet nulla. Nullam convallis et odio at iaculis. Suspendisse ac rhoncus nisl. Morbi eu mollis erat. Mauris in mauris sit amet sem pellentesque facilisis. Praesent id rutrum neque. Aliquam placerat posuere massa, sed vehicula lectus dignissim eu. Integer vitae tortor nisl. Suspendisse eget nibh ac quam molestie bibendum et sed turpis. Suspendisse ac magna nec nibh dapibus pretium.</p>
  348.  
  349.  
  350.     <h1 id="subheader"> subheader </h1>
  351.     <p id="subheader-subtitle"> subtitle here </p>
  352.  
  353.     <div class="line"></div>
  354.    
  355.  
  356. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis euismod lectus, id vulputate quam tincidunt at. Aliquam erat volutpat. Vestibulum eget nunc semper dolor ullamcorper elementum et sit amet nulla. Nullam convallis et odio at iaculis. Suspendisse ac rhoncus nisl. Morbi eu mollis erat. Mauris in mauris sit amet sem pellentesque facilisis. Praesent id rutrum neque. Aliquam placerat posuere massa, sed vehicula lectus dignissim eu. Integer vitae tortor nisl. Suspendisse eget nibh ac quam molestie bibendum et sed turpis. Suspendisse ac magna nec nibh dapibus pretium.</p>
  357.  
  358.  
  359. </div>
  360.  
  361. <!-- DO NOT TOUCH BELOW THIS LINE -->
  362. <div class="credit">
  363.     <a href="https://aureacor.tumblr.com" title="AUREACOR">♥</i></i></a>
  364. </div>
  365.  
  366. </body>
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!