API tools faq
paste
CarterFromSL

CSS Only Webpage

CarterFromSL
Aug 1st, 2020 (edited)
312
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS-Only Webpage</title>
  5. <link rel="shortcut icon" type="image/png" href="http://cybersandbox.ca/wp-content/uploads/2020/08/fav-css.png"/>
  6. <meta charset="UTF-8">
  7. <meta name="author" content="Carter Lovelace">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <style type="text/css">
  10.   @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
  11.  
  12.   html {
  13.     font-family: 'Josefin Sans', sans-serif;
  14.     width: 100vw;
  15.     height: 100vh;
  16.     background: #00beef;
  17.     overflow-x: hidden;
  18.   }
  19.   head {
  20.     display: block;
  21.     max-width: 1000px;
  22.     margin: 0 auto;
  23.     transition: all 0.25s ease;
  24.     -webkit-transition: all 0.25s ease;
  25.     opacity: 0.95;
  26.     pointer-events: all;
  27.   }
  28.   head::before {
  29.     content: "This page was created using NOTHING but CSS!";
  30.     padding: 60px 30px 500px 30px;
  31.     text-align: center;
  32.     font-weight: bold;
  33.     color: #111;
  34.     font-size: 34px;
  35.     letter-spacing: 0.05em;
  36.     display: block;
  37.     background: white;
  38.     position: relative;
  39.     border: 2px solid #1c95b4 !important;
  40.     border-radius: 5px;
  41.     box-shadow: 0 0 5px rgba(0,0,0,0.5);
  42.   }
  43.   head:hover {
  44.     transform: scale(1.03);
  45.     -webkit-transform: scale(1.03);
  46.     opacity: 1;
  47.   }
  48.   head:hover::before {
  49.     border: 3px solid darkorange !important;
  50.   }
  51.   head::after {
  52.     content: "...other than HTML meta information. And I wouldn't exactly call repurposing meta tags into layout elements 'cheating' because, I mean, what else was I supposed to do? If you're wondering why this page exists, go ahead and hover this section.";
  53.     display: block;
  54.     position: relative;
  55.     max-width: 600px;
  56.     padding: 20px 50px;
  57.     margin: -500px auto 0 auto;
  58.     border-top: 5px solid darkorange;
  59.     height: 300px;
  60.   }
  61.   head:hover::after {
  62.     height: 300px;
  63.     content: "All for the sake of a good challenge! This page was needlessly convoluted to create and it can't actually do anything. Not even a hyperlink, a site like this would hyperstink. Plus, it's impossible for search algorythms to get anything useful from it.";
  64.   }
  65.  
  66.   meta:nth-of-type(2), meta:nth-of-type(1) {
  67.     display: block;
  68.     position: absolute;
  69.     max-width: 400px;
  70.     width: 85%;
  71.     height: 300px;
  72.     left: 50%;
  73.     transform: translateX(-50%);
  74.     overflow: hidden;
  75.     top: 300px;
  76.   }
  77.   head:hover meta:nth-of-type(2), head:hover meta:nth-of-type(1) {
  78.     top: 280px;
  79.   }
  80.  
  81.   meta:nth-of-type(1) {
  82.     border: 1px solid #95795b;
  83.     background-image: url(http://cybersandbox.ca/wp-content/uploads/2019/10/Moth-1030x687.png);
  84.     background-color: rgba(0, 0, 0, 0);
  85.     background-position: center;
  86.     background-size: auto 101%;
  87.     background-repeat: round;
  88.     animation-name: bgMove;
  89.     animation-duration: 5s;
  90.     animation-iteration-count: infinite;
  91.   }
  92.   head:hover meta:nth-of-type(1) {
  93.     background-image: url(http://cybersandbox.ca/wp-content/uploads/2019/10/HoAFer.png);
  94.   }
  95.   meta:nth-of-type(1)::after {
  96.     position: absolute;
  97.     top: 0;
  98.     left: 0;
  99.     width: 100%;
  100.     height: 100%;
  101.     background-color: #bfac97;
  102.     mix-blend-mode: color;
  103.     content: " ";
  104.     padding: 5px;
  105.   }
  106.   meta:nth-of-type(1)::before {
  107.     content: "'Moth' By Jessi Lovelace";
  108.     padding: 5px;
  109.     line-height: 2em;
  110.     text-shadow: 2px 2px 0 white;
  111.   }
  112.   head:hover meta:nth-of-type(1)::before {
  113.     content:"'HoAFer' by Carter Lovelace";
  114.   }
  115.   meta:nth-of-type(2)::before {
  116.     content: ' ';
  117.     position: absolute;
  118.     top: 0;
  119.     left: 0;
  120.     width: 100%;
  121.     height: 100%;
  122.     animation-name: gradientSize;
  123.     animation-duration: 1.5s;
  124.     animation-iteration-count: infinite;
  125.     -moz-box-shadow: inset 0 0 10em black;
  126.     -webkit-box-shadow: inset 0 0 10em black;
  127.     box-shadow: inset 0 0 10em black;
  128.   }
  129.   meta:nth-of-type(2)::after {
  130.     width: 1px;
  131.     height: 100%;
  132.     background: black;
  133.     content: ' ';
  134.     display: block;
  135.     position: absolute;
  136.     animation-name: moveLine;
  137.     animation-duration: 8s;
  138.     animation-iteration-count: infinite;
  139.   }
  140.  
  141.   footer {
  142.     background: #111;
  143.     display: block;
  144.     position: absolute;
  145.     color: white !important;
  146.     right: 10px;
  147.     top: 10px;
  148.     font-size: 35px;
  149.     font-weight: bold;
  150.     line-height: 57px;
  151.     width: 50px;
  152.     height: 50px;
  153.     border-radius: 100%;
  154.     text-align: center;
  155.     transition: all 0.25s ease;
  156.     -webkit-transition: all 0.25s ease;
  157.     opacity: 0.95;
  158.     cursor: pointer;
  159.   }
  160.  
  161.   footer:hover {
  162.     opacity: 1;
  163.     transform: scale(1.1);
  164.     -webkit-transform: scale(1.1);
  165.   }
  166.  
  167.   footer::after {
  168.     content: "?";
  169.   }
  170.  
  171.   footer::before {
  172.     content: "Made by Carter Lovelace!  ▬▬▬▬▬ Contact Me ▬▬▬▬▬  carter@strategylab.ca";
  173.     text-align: center;
  174.     display: block;
  175.     position: absolute;
  176.     background: white;
  177.     padding: 10px;
  178.     width: 280px;
  179.     top: 5px;
  180.     border-radius: 10px;
  181.     border: 1px solid #ddd;
  182.     right: -100px;
  183.     font-size: 16px;
  184.     line-height: 1.5em;
  185.     color: #111;
  186.     pointer-events: none;
  187.     opacity: 0;
  188.     transition: all 0.25s ease;
  189.     -webkit-transition: all 0.25s ease;
  190.   }
  191.  
  192.   footer:hover::before {
  193.     right: 5px;
  194.     opacity: 1;
  195.   }
  196.  
  197.   @media only screen and (max-width: 546px) {
  198.     head:hover meta:nth-of-type(2), head:hover meta:nth-of-type(1), meta:nth-of-type(2), meta:nth-of-type(1) {
  199.       top: 400px !important;
  200.       height: 250px;
  201.     }
  202.     head::before {
  203.       padding-top: 30px !important;
  204.     }
  205.   }
  206.   @media only screen and (max-width: 1000px) {
  207.     head::before {
  208.       margin: 15px;
  209.     }
  210.     head::after {
  211.       margin: -500px 40px 50px 40px;
  212.       padding: 20px 0 !important;
  213.     }
  214.   }
  215.  
  216.   @media only screen and (min-width: 1000px) {
  217.     head::before {
  218.       width: 940px;
  219.       margin: 25px auto;
  220.     }
  221.   }
  222.  
  223.   @keyframes gradientSize {
  224.     0% {
  225.       opacity: 0.3;
  226.     }
  227.     10% {
  228.       opacity: 0.4;
  229.     }
  230.     20% {
  231.       opacity: 0.25;
  232.     }
  233.     30% {
  234.       opacity: 0.5;
  235.     }
  236.     40% {
  237.       opacity: 0.75;
  238.     }
  239.     50% {
  240.       opacity: 0.5;
  241.     }
  242.     60% {
  243.       opacity: 1;
  244.     }
  245.     70% {
  246.       opacity: 0.75;
  247.     }
  248.     80% {
  249.       opacity: 0.5;
  250.     }
  251.     90% {
  252.       opacity: 0.25;
  253.     }
  254.     100% {
  255.       opacity: 0.5;
  256.     }
  257.   }
  258.   @keyframes moveLine {
  259.     0% {
  260.       left: 0;
  261.       opacity: 0;
  262.     }
  263.     9% {
  264.       left: 0;
  265.       opacity: 0;
  266.     }
  267.     10% {
  268.       left: 15%;
  269.       opacity: 0.25;
  270.     }
  271.     15% {
  272.       left: 20%;
  273.       opacity: 0.1;
  274.     }
  275.     20% {
  276.       left: 10%;
  277.       opacity: 0.2;
  278.     }
  279.     25% {
  280.       left: 25%;
  281.       opacity: 0.2;
  282.     }
  283.     30% {
  284.       left: 30%;
  285.       opacity: 0.3;
  286.     }
  287.     40% {
  288.       left: 20%;
  289.       opacity: 0.2;
  290.     }
  291.     50% {
  292.       left: 30%;
  293.       opacity: 0.1;
  294.     }
  295.     60% {
  296.       left: 20%;
  297.       opacity: 0.2;
  298.     }
  299.     70% {
  300.       left: 0%;
  301.       opacity: 0.2;
  302.     }
  303.     80% {
  304.       left: 10%;
  305.       opacity: 0.2;
  306.     }
  307.     90% {
  308.       left: 30%;
  309.       opacity: 0.3;
  310.     }
  311.     100% {
  312.       left: 10%;
  313.       opacity: 0.1;
  314.     }
  315.   }
  316.   @keyframes bgMove {
  317.     0% {
  318.       background-position: 0px center;
  319.     }
  320.     5% {
  321.       background-position: 0 center;
  322.     }
  323.     10% {
  324.       background-position: 0 -2px;
  325.     }
  326.     15% {
  327.       background-position: 0 center;
  328.     }
  329.     30% {
  330.       background-position: 0px center;
  331.     }
  332.     37% {
  333.       background-position: 0 -2px;
  334.     }
  335.     40% {
  336.       background-position: 0px center;
  337.     }
  338.     45% {
  339.       background-position: 0 2px;
  340.     }
  341.     50% {
  342.       background-position: 0px center;
  343.     }
  344.     62% {
  345.       background-position: 0px center;
  346.     }
  347.     65% {
  348.       background-position: 0 -2px;
  349.     }
  350.     67% {
  351.       background-position: 0px center;
  352.     }
  353.     78% {
  354.       background-position: 0px center;
  355.     }
  356.     80% {
  357.       background-position: 0 2px;
  358.     }
  359.     85% {
  360.       background-position: 0 center;
  361.     }
  362.     87% {
  363.       background-position: 0 center;
  364.     }
  365.     89% {
  366.       background-position: 0 -2px;
  367.     }
  368.     91% {
  369.       background-position: 0 center;
  370.     }
  371.     100% {
  372.       background-position: 0px center;
  373.     }
  374.   }
  375. </style>
  376. </head>
  377. <body>
  378. <footer>
  379. </footer>
  380. </body>
  381. </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!