Advertisement
1xptolevitico69

Javascript setInterval( transform rotate + transform origin )

Nov 12th, 2022
1,367
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.67 KB | None | 0 0
  1.  
  2. <!DOCTYPE html><html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.     .topnave {
  9.       position: relative;
  10.       left: 0;
  11.       margin:40px 0;
  12.       width: 100%;
  13.     }
  14.  
  15.     .topnave a {
  16.       color: red;
  17.       margin: 0 5px;
  18.       text-decoration: underline;
  19.       font-family: verdana;
  20.       font-weight: 900;
  21.       font-size: 3vw;
  22.     }
  23.  
  24.     .avatar {
  25.       width: 100px;
  26.       display: block;
  27.       margin: 20px auto;
  28.       margin-top: 40px;
  29.       border-radius: 50%;
  30.       border: 4px double navy;
  31.     }
  32.  
  33.     body {
  34.       margin: 0;
  35.     }
  36.  
  37.     .top {
  38.       position:sticky;
  39.       width: 100%;
  40.       border: 0;
  41.       outline: 0;
  42.       background-color: transparent;
  43.     }
  44.  
  45.     #input {
  46.       box-sizing: border-box;
  47.       height: 50px;
  48.       width: 50%;
  49.       font-size: 1.5vw;
  50.       padding: 0 10px;
  51.       outline: 0;
  52.       border: 0;
  53.       background-color: red;
  54.       border-radius: 10px 0 0 10px;
  55.     }
  56.  
  57.     .search {
  58.       outline: 0;
  59.       height: 50px;
  60.       font-size: 1.5vw;
  61.       width: 150px;
  62.       text-align: center;
  63.       border: 0;
  64.       color: red;
  65.       background-color: red;
  66.       color: white;
  67.       border-radius: 0 10px 10px 0;
  68.     }
  69.  
  70.     #input::placeholder {
  71.       color: white;
  72.     }
  73.  
  74.     h1 {
  75.       font-size: 3vw;
  76.       font-family: verdana;
  77.     }
  78.  
  79.     @media all and (orientation:portrait) and (max-width:425px) {
  80.       h1 {  
  81.         font-size: 9vw;
  82.       }
  83.  
  84.       #input {
  85.         width: 100%;
  86.         height: 40px;
  87.         font-size: 16px;
  88.         border-radius: 10px;
  89.       }
  90.  
  91.       .search {
  92.         font-size: 16px;
  93.         height: 40px;
  94.         margin: 5px 0;
  95.         width: 150px;
  96.         border-radius: 10px;
  97.       }
  98.  
  99.       .topnave a {
  100.         color: red;
  101.         text-decoration: underline;
  102.         font-family: verdana;
  103.         font-weight: 900;
  104.         font-size: 20px;
  105.       }
  106.    
  107.     }
  108.  
  109.     @media all and (orientation:landscape) and (max-width:768px) {
  110.       .avatar {
  111.         display: none;
  112.       }
  113.  
  114.       h1 {
  115.         font-size: 5vw;
  116.       }
  117.  
  118.       #input {
  119.         width: 70%;
  120.         font-size: 3vw;
  121.         border-radius: 10px;
  122.       }
  123.  
  124.       .search {
  125.         font-size: 3vw;
  126.         margin: 5px 0;
  127.         width: 150px;
  128.         border-radius: 10px;
  129.       }
  130.  
  131.       .topnave a {
  132.         color: red;
  133.         text-decoration: underline;
  134.         font-family: verdana;
  135.         font-weight: 900;
  136.         font-size: 5vw;
  137.       }
  138.     }
  139.   </style>
  140. </head>
  141.  
  142. <body>
  143.  
  144.  
  145.  
  146.   <button class='top'>
  147.  
  148.     <div class='topnave'>
  149.       <a href='https://1xpto.netlify.app/'>Home</a>
  150.       <a href='https://1xpto.netlify.app/media/'>Media</a>
  151.       <img class='avatar' src='https://1xpto.netlify.app/pic/moi.jpg' />
  152.     </div>
  153.  
  154.     <h1>Organic Search</h1>
  155.     <input id='input' type='text' placeholder='Javascript setInterval( transform rotate + transform origin )' readonly />
  156.     <input class='search' onclick='source()' type='button' value='TXT'/><p>
  157.     <input id='input' type='text' placeholder='Javascript setInterval( transform rotate + transform origin )' readonly />
  158.     <input class='search' onclick='web()' type='button' value='HTML' />
  159.   </button>
  160.  
  161.   <script>
  162.     function source() {
  163.       window.open('https://1xpto.netlify.app/posts/Javascript setInterval( transform rotate + transform origin )/local/index.txt');
  164.  
  165.     }
  166.     function web() {
  167.       window.open('https://1xpto.netlify.app/posts/Javascript setInterval( transform rotate + transform origin )/local/index.html');
  168.  
  169.     }
  170.   </script>
  171. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement