API tools faq
paste
Advertisement
l2ve

#01

l2ve
Jan 19th, 2023 (edited)
126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.10 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-- Attempt (#01) at creating a responsive webpage using media queries -->
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>template</title>
  9.  
  10.     <style>
  11.        * {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;}
  12.  
  13.        @font-face {
  14.          font-family: bigup;
  15.          src: url(https://dl.dropbox.com/s/g48anuxjyn4px8d/BIGURG__.TTF);
  16.        }
  17.  
  18.        @font-face {
  19.          font-family: windows;
  20.          src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
  21.        }
  22.  
  23.        ::-moz-selection {
  24.          color: black;
  25.          background: transparent;
  26.        }
  27.  
  28.        ::selection {
  29.          color: black;
  30.          background: transparent;
  31.        }
  32.  
  33.        a:link {
  34.          color: black;
  35.        }
  36.  
  37.        a:visited {
  38.          color: black;
  39.        }
  40.  
  41.        a:hover {
  42.          color: black;
  43.          font-style: strong;
  44.        }
  45.  
  46.        a:active {
  47.          color: black;
  48.        }
  49.  
  50.        body {
  51.          font-family: windows;
  52.          background-color: white;
  53.          -ms-overflow-style: none;
  54.          scrollbar-width: none;
  55.       }
  56.  
  57.       body::-webkit-scrollbar {
  58.          display: none;
  59.       }
  60.  
  61.        h1 {
  62.          font-family: bigup;
  63.          font-size: 6.5em;
  64.          text-align: center;
  65.          display: inline-block;
  66.          filter: drop-shadow( 0 1px black) drop-shadow( 1px 0 black) drop-shadow( 0 -1px white) drop-shadow( -1px 0 black) drop-shadow( 0 2px white) drop-shadow( 2px 0 white) drop-shadow( 0 -2px white) drop-shadow( -2px 0 white) drop-shadow( 0 3px black) drop-shadow( 3px 0 white) drop-shadow( 0 -3px black) drop-shadow(-3px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black);
  67.          margin-top: 35px;
  68.          position: relative;
  69.          z-index: 999;
  70.          animation-name: floating;
  71.          animation-duration: 3s;
  72.          animation-iteration-count: infinite;
  73.          animation-timing-function: ease-in-out;
  74.        }
  75.  
  76.        @keyframes floating {
  77.          0% { transform: translate(0,  0px); }
  78.          50%  { transform: translate(0, 15px); }
  79.          100%   { transform: translate(0, -0px); }    
  80.        }
  81.  
  82.        h2 {
  83.          font-family: windows;
  84.          font-size: 1.25em;
  85.        }
  86.  
  87.        .h1-image-mask {
  88.          background-image: url("https://imgur.com/I5niAqS.gif");
  89.          -webkit-background-clip: text;
  90.          -webkit-text-fill-color: transparent;
  91.        }
  92.  
  93.        .main {
  94.          background-color: black;
  95.          border: 1px white solid;
  96.          border-radius: 25px;
  97.          height: 450px;
  98.          width: 700px;
  99.          margin-top: -120px;
  100.          align-content: left;
  101.          position: relative;
  102.          font-family: windows;
  103.          filter: drop-shadow( 0 1px black) drop-shadow( 1px 0 transparent) drop-shadow( 0 -1px white) drop-shadow( -1px 0 black) drop-shadow( 0 2px transparent) drop-shadow( 2px 0 white) drop-shadow( 0 -2px white) drop-shadow( -2px 0 white) drop-shadow( 0 3px black) drop-shadow( 3px 0 white) drop-shadow( 0 -3px transparent) drop-shadow(-3px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black);
  104.        }
  105.  
  106.        .from-them {
  107.          background: linear-gradient(180deg, white 0%, white 55%, grey 100%);
  108.          border: 1px black solid;
  109.          border-radius: 0 5px 15px 5px;
  110.          height: auto;
  111.          width: 200px;
  112.          float: left;
  113.          margin-bottom: 10px;
  114.          padding: 5px;
  115.          padding-bottom: 10px;
  116.        }
  117.  
  118.        .from-me {
  119.          background: linear-gradient(180deg, white 0%, white 55%, #ddd 100%);
  120.          border: 1.5px black solid;
  121.          border-radius: 5px 5px 0 15px;
  122.          height: auto;
  123.          width: 200px;
  124.          float: right;
  125.          margin-bottom: 10px;
  126.          padding: 5px;
  127.          padding-bottom: 10px;
  128.        }
  129.  
  130.        .search-bar {
  131.          background: linear-gradient(180deg, white 0%, white 55%, #ddd 100%);
  132.          border: 1.2px black solid;
  133.          border-radius: 10px;
  134.          height: 10px;
  135.          width: 305px;
  136.          margin-bottom: 10px;
  137.          padding: 10px;
  138.          text-align: center;
  139.          line-height: 80%;
  140.        }
  141.  
  142.        .webpage {
  143.          background: linear-gradient(180deg, white 0%, white 55%, #ddd 100%);
  144.          border: 1.2px black solid;
  145.          border-radius: 10px;
  146.          max-height: 285px;
  147.          width: 305px;
  148.          overflow-y: scroll;
  149.          padding: 10px;
  150.          line-height: 80%;
  151.          -ms-overflow-style: none;
  152.          scrollbar-width: none;
  153.        }
  154.  
  155.        .webpage::-webkit-scrollbar {
  156.          display: none;
  157.       }
  158.  
  159.        .speech-bubble {
  160.          height: auto;
  161.          width: 200px;
  162.          border: 1px black solid;
  163.          border-radius: 15px 0 15px 15px;
  164.          vertical-align: central;
  165.          padding: 10px;
  166.        }
  167.  
  168.        .profile {
  169.             height: 40px;
  170.             width: 40px;
  171.             border-radius: 50%;
  172.             border: 1px black solid;
  173.             margin-left: 5px;
  174.         }
  175.  
  176.        .button {
  177.            font-family: windows;
  178.            font-size: 1.05em;
  179.            height: auto;
  180.            width: auto;
  181.            background: linear-gradient(180deg, white 0%, white 55%, grey 100%);
  182.            border: 1px black solid;
  183.            border-radius: 25px;
  184.            margin-left: 5px;
  185.            margin-top: 5px;
  186.        }
  187.  
  188.        .button:hover {
  189.            transform: scale(1.05);
  190.        }
  191.  
  192.        .post {
  193.             border: 1px black solid;
  194.             padding: 5px;
  195.             margin-top: -8.5px;
  196.        }
  197.  
  198.        .date {
  199.             margin-top: 5px;
  200.             margin-bottom: 25px;
  201.             font-size: 0.85em;
  202.         }
  203.  
  204.        #left-section {
  205.          background-color: white;
  206.          border-top: 3px grey solid;
  207.          border-left: 3px grey solid;
  208.          border-right: 3px #eee solid;
  209.          border-bottom: 3px #eee solid;
  210.          border-radius: 5px 5px 5px 25px;
  211.          height: 340px;
  212.          width: 255px;
  213.          overflow-y: scroll;
  214.          margin-top: 25px;
  215.          color: black;
  216.          padding: 15px;
  217.          -ms-overflow-style: none;
  218.          scrollbar-width: none;
  219.       }
  220.  
  221.       #left-section::-webkit-scrollbar {
  222.          display: none;
  223.       }
  224.  
  225.        #right-section {
  226.          background-color: white;
  227.          border-top: 3px grey solid;
  228.          border-left: 3px grey solid;
  229.          border-right: 3px #eee solid;
  230.          border-bottom: 3px #eee solid;
  231.          border-radius: 5px 5px 25px 5px;
  232.          height: 340px;
  233.          width: 325px;
  234.          overflow: hidden;
  235.          margin-top: 25px;
  236.          margin-left: 10px;
  237.          color: black;
  238.          padding: 15px;
  239.          -ms-overflow-style: none;
  240.          scrollbar-width: none;
  241.        }
  242.        
  243.        #right-section::-webkit-scrollbar {
  244.          display: none;
  245.       }
  246.  
  247.        /* For smaller screens: */
  248.        @media only screen and (max-width: 770px) {
  249.             [class*="body"] {
  250.              scale: 70%;
  251.             }
  252.         }
  253.  
  254.        @media only screen and (max-width: 700px) {
  255.             [class*="body"] {
  256.              scale: 60%;
  257.             }
  258.  
  259.             [class*="h1-image-mask"] {
  260.              scale: 75%;
  261.             }
  262.         }
  263.  
  264.        @media only screen and (max-width: 560px) {
  265.             [class*="body"] {
  266.              scale: 75%;
  267.              align-content: center;
  268.             }
  269.  
  270.             [class*="main"] {
  271.              max-width: 390px;
  272.              margin-top: 140px;
  273.             }
  274.  
  275.             [id*="left-section"] {
  276.              display: none;
  277.             }
  278.  
  279.             [id*="right-section"] {
  280.              scale: 97%;
  281.             }
  282.  
  283.             [class*="h1-image-mask"] {
  284.              display: none;
  285.             }
  286.  
  287.        @media only screen and (max-width: 280px) {
  288.             [class*="body"] {
  289.              scale: 68%;
  290.              align-content: center;
  291.              margin-left: -16%;
  292.             }
  293.  
  294.             [class*="main"] {
  295.              max-width: 390px;
  296.              margin-top: 100px;
  297.             }
  298.  
  299.             [id*="left-section"] {
  300.              display: none;
  301.             }
  302.  
  303.             [id*="right-section"] {
  304.              scale: 97%;
  305.             }
  306.  
  307.             [class*="h1-image-mask"] {
  308.              display: none;
  309.             }
  310.  
  311.  
  312.         }
  313.  
  314.     </style>
  315.     <body class="body">
  316.        <center>
  317.          <h1 class="h1-image-mask">template</h1>
  318.  
  319.          <div class="main">
  320.             <table><tr>
  321.                 <td>
  322.                     <div id="left-section">
  323.                         <div class="from-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  324.                         <div class="from-them">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  325.                     </div>
  326.                 </td>
  327.                 <td>
  328.                     <div id="right-section">
  329.                     <div class="search-bar">username</div>
  330.                     <div class="webpage">
  331.                         <table><tr>
  332.                             <td>
  333.                                 <div class="speech-bubble">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  334.                             <td>
  335.                                 <img class="profile">
  336.                             </td>
  337.                             </td>
  338.                         </tr></table>
  339.  
  340.                         <script>
  341.                             function play() {
  342.                             var audio = document.getElementById("audio");
  343.                             audio.play();
  344.                             }
  345.                         </script>
  346.  
  347.                         <a href="link" target="_parent"><input type="button" class="button" value="text" onclick="play()"></a>
  348.                         <audio id="audio" src="https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3" preload="auto"></audio>
  349.                         <a href="link" target="_parent"><input type="button" class="button" value="text" onclick="play()"></a>
  350.                         <audio id="audio" src="https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3" preload="auto"></audio>
  351.                         <a href="link" target="_parent"><input type="button" class="button" value="text" onclick="play()"></a>
  352.                         <audio id="audio" src="https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3" preload="auto"></audio>
  353.                         <a href="link" target="_parent"><input type="button" class="button" value="text" onclick="play()"></a>
  354.                         <audio id="audio" src="https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3" preload="auto"></audio>
  355.  
  356.                         <hr style="border: 0; height: 15px;">
  357.                         <h2>@USERNAME</h2>
  358.                         <div class="post">Best viewed on a desktop/tablet. Certain elements cannot be viewed when the browser's width is 560px wide or less. Resize the browser to view the additional elements.</div>
  359.                         <div class="date">00 ABC | 00:00</div>
  360.                     </div>
  361.                 </td>
  362.                </div>
  363.              </td>
  364.             </table></tr>
  365.             <br><div style="color: white; opacity: 65%;">cr. l2ve</div>
  366.        </center>
  367.     </body>
  368. </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!