<header>
  Елена Грановская- копирайтер.
  </header>
  <ul id="navbar">
 <li><a href="menu_about_us.html"><img src="icons8-about-24.png" alt="логотип" title="логотип"><br>&nbspПРО_НАС&nbsp</a></li>
 <li class="drp"><a href="texty.html" ><img src="icons8-контакты-24.png" alt="логотип" title="логотип"><br> КОНТАКТЫ </a>
<ul class="dropdown">
    <a href="https://www.facebook.com/granovskaolena"><img src="icons8-facebook-24.png" alt="логотип" type="логотип">FACEBOOK</a>
    <a href="http://instagram.com/granovskaolena"><img src="icons8-instagram-24(1).png" alt="логотип" type="логотип">INSTAGRAMM</a>
    <a href="https://vk.com/ninevska"><img src="icons8-vk-circled-24.png" alt="логотип" type="логотип">VKONTAKTE</a>
    <a href="#"><img src="icons8-whatsapp-24(1).png" alt="логотип" type="логотип">WHATSUPP</a>
    <a href="#"><img src="icons8-viber-24.png" alt="логотип" type="логотип">__VIBER__</a>
    <a href="#"><img src="icons8-important-mail-24.png">ЭЛЕКТРОННАЯ_ПОЧТА</a>
    <a href="#"><img src="icons8-phone-24.png" alt="логотип" type="логотип">ТЕЛЕФОН</a>
</ul>   
</li>
 <li><a href=""><img src="icons8-us-dollar-24.png" alt="логотип" type="логотип"><br>СТОИМОСТЬ</a></li>
 <li><a href="BLOG.HTML"><img src="icons8-для-тебя-24.png" alt="логотип" type="логотип"><br>МОИ_БЛОГ</a></li>
</ul>
<h1 class="marquee" align="center" ><span><BIG>KONTENTMAKER</BIG></span></h1>
  
 html { 
      overflow:  hidden;
        position :relative;  }
   header {
        border:4px solid green;
        width:100%;
        background-color:#9400D3;
        color:yellow;
        font-size:48px;
        font-family:cursive;
        text-align:center;
        margine:0 auto;
        position:relative;
        right:0.45%;
        padding:0.2% 0.2%;
    }
  
     #navbar {
        width: 100%;
      margin:0 -0.3%;
        padding:0.3% 0.01%;
        list-style-type: none;
    border: 4px solid #0066FF;
        border-radius: 20px 20px;
        text-align: center;
    font-family:serif;
        background-color:#6495ED;
    position:relative;
    display:inline-block;
    justify-content:center;
  
    }
    #navbar li { 
    display:inline-block;
      position:relative;
      width:23.5%;
      border-radius:5px 20px 5px 20px;
      background-color:#8A2BE2;
        border:5px solid #9932CC;
    }
      #navbar a {
        color: green;
    text-decoration: none;
        font-weight: bold;
        border-radius:20px 5px;
    border: 2px solid white;
    background-color:#9ACEEB;
    font-size:25px;
    position:relative;
      display:inline-block;
      width:95%;
      padding:2% 0;
      margin:1% 2%;
    }
.dropdown {
  display: none;
}
.drp:hover .dropdown {
  position: relative;
  display: block;
  position: absolute;
  top: 92px;
  left: -40px;
}

 #navbar a:hover {
        border-radius: 20px 5px;
        background-color: #66CDAA;
      }

   
  
  

  

 
      h1 {
    color:red;
    }
    body { 
    background: url("plans-to-build-a-home-picjumbo-com.jpg");
    background-size:cover; 
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.