Advertisement
1xptolevitico69

About Media 1

Jan 19th, 2022
1,039
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>About Media 1</title>
  9.   <style>
  10.     body {
  11.       margin: 0;
  12.     }
  13.  
  14.     .top_menu {
  15.       position: fixed;
  16.       width: 100%;
  17.       padding: 5px;
  18.       background-color: green;
  19.       display: flex;
  20.       align-items: center;
  21.     }
  22.  
  23.     .avatar {
  24.       width: 50px;
  25.       border-radius: 50%;
  26.       float: left;
  27.     }
  28.  
  29.     .top_menu a {
  30.       color: snow;
  31.       margin: 0 20px;
  32.     }
  33.  
  34.     .items {
  35.       position: absolute;
  36.       right: 0;
  37.       margin: 0 20px;
  38.     }
  39.  
  40.     .side_menu {
  41.       width: 100%;
  42.       height: 100vh;
  43.       position: absolute;
  44.       top: 0;
  45.       left: 0;
  46.       background-color: black;
  47.       display: none;
  48.     }
  49.  
  50.     #bt_mobile {
  51.       position: absolute;
  52.       right: 10px;
  53.       top: 10px;
  54.     }
  55.  
  56.     @media all and (max-width: 425px) and (orientation: portrait) {
  57.       .top_menu {
  58.         display: none;
  59.       }
  60.  
  61.       .side_menu {
  62.         display: block;
  63.       }
  64.  
  65.       .side_avatar {
  66.         width: 50px;
  67.         border-radius: 50%;
  68.         float: left;
  69.         margin: 20px;
  70.       }
  71.  
  72.       #bt {
  73.         position: absolute;
  74.         right: 10px;
  75.         top: 10px;
  76.       }
  77.  
  78.       .side_menu a {
  79.         display: block;
  80.         margin: 20px;
  81.         color: snow;
  82.       }
  83.     }
  84.  
  85.     @media all and (orientation:landscape) {
  86.       .side_menu {
  87.         display: none;
  88.         width: 0px;
  89.       }
  90.  
  91.       .side_avatar {
  92.         display: none;
  93.       }
  94.  
  95.       #bt {
  96.         display: none;
  97.       }
  98.  
  99.       .side_menu a {
  100.         display: none;
  101.       }
  102.     }
  103.   </style>
  104. </head>
  105.  
  106. <body>
  107.   <button id='bt_mobile'>OpenMobile</button>
  108.  
  109.   <div class='top_menu'>
  110.     <img class='avatar' src='https://1xpto.netlify.app/pics/avatar.png'>
  111.     <div class='items'>
  112.       <a href='#'>Contact</a>
  113.       <a href='#'>Projects</a>
  114.       <a href='#'>Skills</a>
  115.       <a href='#'>About</a>
  116.       <a href='#'>Home</a>
  117.     </div>
  118.   </div>
  119.  
  120.   <div id='side' class='side_menu'>
  121.     <button id='bt'>Close</button>
  122.     <img class='side_avatar' src='https://1xpto.netlify.app/pics/avatar.png'>
  123.     <a style='margin-top:150px;' href='#'>Contact</a>
  124.     <a href='#'>Projects</a>
  125.     <a href='#'>Skills</a>
  126.     <a href='#'>About</a>
  127.     <a href='#'>Home</a>
  128.   </div>
  129.  
  130.   <script>
  131.     bt.onclick = function() {
  132.       side.style.display = 'none';
  133.     }
  134.     bt_mobile.onclick = function() {
  135.       side.style.display = 'block';
  136.     }
  137.   </script>
  138. </body>
  139.  
  140. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement