Advertisement
1xptolevitico69

About Media 2

Jan 19th, 2022
1,126
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <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.     <title>About Media 2</title>
  8.     <style>
  9.  
  10. body {
  11.   margin: 0;
  12. }
  13. .top_menu {
  14.   position: fixed;
  15.   width: 100%;
  16.   padding: 5px;
  17.   background-color: green;
  18.   display: flex;
  19.   align-items: center;
  20. }
  21. .avatar {
  22.   width: 50px;
  23.   border-radius: 50%;
  24.   float: left;
  25. }
  26. a {
  27.   color: snow;
  28.   margin: 0 20px;
  29. }
  30. .items {
  31.   position: absolute;
  32.   right: 0;
  33.   margin: 0 20px;
  34. }
  35. @media all and (max-width: 425px) and (orientation: portrait) {
  36.   .items {
  37.     width: 100px;
  38.   }
  39.   .top_menu {
  40.     padding: 80px 20px;
  41.   }
  42.   a {
  43.     display: block;
  44.     margin: 10px;
  45.   }
  46.   .avatar {
  47.     position: absolute;
  48.     top: 10px;
  49.     left: 10px;
  50.   }
  51. }
  52.  
  53.  
  54.  
  55.  
  56. </style>
  57. </head>
  58. <body>
  59.  
  60.  
  61. <div class='top_menu'>
  62.   <img class='avatar' src='https://1xpto.netlify.app/pics/avatar.png'>
  63.   <div class='items'>
  64.     <a href='#'>Contact</a>
  65.     <a href='#'>Projects</a>
  66.     <a href='#'>Skills</a>
  67.     <a href='#'>About</a>
  68.     <a href='#'>Home</a>
  69.   </div>
  70. </div>
  71.  
  72.  
  73.   <script></script>
  74. </body>
  75. </html>
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement