CarterFromSL

CSS Only Webpage

Aug 1st, 2020 (edited)
201
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data