Advertisement
1xptolevitico69

Html table - Internal links + responsive

Dec 1st, 2022
1,030
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.62 KB | None | 0 0
  1. <!DOCTYPE html><html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <style>
  7.     .top {
  8.       left: 0;
  9.       margin:20px 0;
  10.       width: 100%;
  11.       border: 0;
  12.       outline: 0;
  13.       background-color: transparent;
  14.     }
  15.  
  16.     .topnave a {
  17.       color: red;
  18.       margin: 0 5px;
  19.       text-decoration: underline;
  20.       font-family: verdana;
  21.       font-weight: 900;
  22.       font-size: 3vw;
  23.     }
  24.  
  25.     .avatar {
  26.       width: 100px;
  27.       display: block;
  28.       margin: 50px auto;
  29.       border-radius: 50%;
  30.       border: 4px double navy;
  31.     }
  32.  
  33.     body {
  34.       margin: 0;
  35.     }
  36.  
  37.     .search {
  38.       outline: 0;
  39.       height: 40px;
  40.       font-size: 16px;
  41.       width: 150px;
  42.       text-align: center;
  43.       border: 0;
  44.       color: red;
  45.       background-color: red;
  46.       color: white;
  47.       border-radius: 10px;
  48.     }
  49.  
  50.  
  51.  
  52.     @media all and (orientation:portrait) and (max-width:425px) {
  53.  
  54.  
  55.       .search {
  56.         font-size: 16px;
  57.         width: 150px;
  58.         border-radius: 10px;
  59.       }
  60.  
  61.       .topnave a {
  62.         color: red;
  63.         text-decoration: underline;
  64.         font-family: verdana;
  65.         font-weight: 900;
  66.         font-size: 20px;
  67.       }
  68.    
  69.     }
  70.  
  71.     @media all and (orientation:landscape) and (max-width:768px) {
  72.  
  73.  
  74.       .search {
  75.         font-size: 16px;
  76.         width: 150px;
  77.         border-radius: 10px;
  78.       }
  79.  
  80.       .topnave a {
  81.         color: red;
  82.         text-decoration: underline;
  83.         font-family: verdana;
  84.         font-weight: 900;
  85.         font-size: 5vw;
  86.       }
  87.     }
  88.   </style>
  89. </head>
  90.  
  91. <body>
  92. <audio id='audio' loop src='https://1xpto.netlify.app/posts/player%20mp3/local/soundtrack%2025.mp3'></audio>
  93.  
  94.  
  95.   <button class='top'>
  96.  
  97.     <div class='topnave'>
  98.       <a href='https://1xpto.netlify.app/'>Home</a>
  99.       <a href='https://1xpto.netlify.app/media/'>Media</a>
  100.       <img class='avatar' src='https://1xpto.netlify.app/pic/moi.jpg' />
  101.     </div>
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  <input class='search' onclick='Style()' type='button' value='Source Code'/>
  108. <p>
  109.  <input class='search' onclick='web()' type='button' value='HTML' />
  110.  
  111.   </button>
  112.  
  113.  
  114.   <script>
  115.  
  116.     function Style() {
  117.       window.open('https://1xpto.netlify.app/posts/html%20table%20-%20internal%20links%20+%20responsive/local/index.txt');
  118.       audio.play();
  119.     }
  120.  
  121.     function web() {
  122.       window.open('https://1xpto.netlify.app/posts/html%20table%20-%20internal%20links%20+%20responsive/local/');
  123.     //  audio.play();
  124.     }
  125.   </script>
  126. </body></html>
  127.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement