Блог

 body {    background-image: url("pirat.jpg");  }   h1{  font-size :100px; }   h3{  font-size :50px;   }  lt;style type="text"gt; *{ box-sizing: border-box; outline: none; } body{ margin: 0; padding: 0;  } .container{ width: 100%; height: 100px; margin: 0; padding: 0; }  img{ width: 100%; height: 100vh; } .container nav{ position: absolute; width: 100%; top: 0; height: 60px; background-color: #383838; color: white; }  nav ul{ float: right; list-style: none; margin: 0; padding: 0; width: 600px; } nav li{ display: inline-block; line-height: 56px; margin:0 25px; } nav li a{ display: block; color: white; text-decoration: none; font-size: 13px; transition: .5s all; } a:hover{ color:#808080; border-bottom: 5px solid white; } #myInput{ position: relative; margin-top: 10px; padding: 5px 10px 5px 20px; width: 2300x; height: 25px; border-bottom: 2px solid#006699; font-size: 15px; color: #006699; border-radius: 50px; align-items: center; float: right; z-index: 0; }   #btn{ display: none;  } .check{ font-size: 30px; color: white; float: right; line-height: 60px; margin-right: 20px; margin-left: 10px; cursor: pointer; transform: rotate(-90deg); display: none; } @media(max-width: 800px){ nav ul{ position: fixed; width: 40%; height: 100vh; top: 60px; left: 100%; text-align: center; background-color: #2c3e50; transition: all .5s; } nav ul li{ display: block; } nav ul li a{ font-size: 20px; color: white; } .check{ display: block; } #btn:checked ~ ul{ left: 60%; }  @media(max-width: 500px){  }  #myUL {    list-style-type: none;  padding: 0;  margin: 0;  }  #myUL li a {  border: 1px solid #ddd;   margin-top: -1px;   background-color: #f6f6f6;  padding: 12px;   text-decoration: none;   font-size: 18px; color: black;   display: block;  }  #myUL li a:hover:not(.header) {  background-color: #eee; /* Add a hover effect to all links, except for headers */ }    .text input:focus   .hide {   display: block !important;   }  .hide {  display: none;  }  .container { position: relative; } 

 lt;htmlgt; lt;headgt;lt;titlegt;Homelt;/titlegt; lt;font color="white"gt; lt;centergt; lt;h1gt;lt;/h1gt; lt;/centergt; lt;link rel="stylesheet" type="text/css" href="Principala.css"gt; lt;meta name="viewport" content="width=device-width,initial-scale=1.0"gt; lt;/headgt; lt;bodygt; lt;font color="white"gt; lt;div class="relative"gt; lt;font color = "blue"gt; lt;h3gt;lt;/h3gt;  lt;div class="container"gt;  lt;navgt;  lt;input type="checkbox" name="" id="btn"gt;  lt;label for="btn" class="check"gt;!!!lt;/labelgt;  lt;div class="search"gt;lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"gt;lt;/divgt; lt;ulgt; lt;ligt;lt;a href="#"gt;HOMElt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;SERVICElt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;CONTACTlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;FAQlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;ABOUT USlt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;div class=hidegt; lt;ul id="myUL"gt;  lt;ligt;lt;a href="#"gt;Adelelt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Agneslt;/agt;lt;/ligt;   lt;ligt;lt;a href="#"gt;Billylt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Boblt;/agt;lt;/ligt;   lt;ligt;lt;a href="#"gt;Calvinlt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Christinalt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Cindylt;/agt;lt;/ligt;lt;/ulgt;lt;/divgt;  lt;script src="Principala.js"gt;lt;/scriptgt; lt;/scriptgt; lt;/bodygt; lt;/htmlgt;