CodePen Embed - oNzzKmo

<html>
    <head>
       <meta charset="utf-8">
      <title>Да пошло оно все</title> 
      <style>
   body {
    background: #00008B; /* Цвет фона */
    color:#0000FF
   }
  </style>
    </head>
    <body>
      <div id="overlay">
  <div class="popup">
    <button class="close" title="Закрыть окно" onclick="swa2()"></button>
    <p class="zag">Опа, вы посмотрите на это окно, оно отняло 5 часов моего времени)0)</p>
    <p>Я официально заявляю - я устала.</p>
    <p>© Хафизова Ксения, МЖК-101</p>
  </div>
</div>
        <div class="header">
            <div class="logo"> <h1>Доктор Кто</h1> </div>
        </div>
        <div class="about-us">
            <h2>Меню</h2>
          <style type="text/css">
  .saitbar {
     margin: 0 auto;
     padding: 0;
     width: 240px;
     }
  .menu-4, .menu-4 .podmenu, .menu-4 .podmenu-2 {
     margin: 0;                                                   
     padding: 0;
     background-color: #999;
     height: auto;
     list-style-type: none;
     }
  .menu-4 li {
     margin: 0 0 2px;
     padding: 0;
     background-color: #0000FF;
     border-left: 26px solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     position: relative;
     }
  .menu-4 a {
     padding: 6px 0 8px 10px;
     color: #f2f2f2;
     text-decoration: none;
     border-left: 6px solid #5269ff;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 li:hover {
     background-color: #ccc;
     }
  .menu-4 li:hover a {
     color: #0e25c0;
     padding: 6px 0 8px 22px;
     border-left: 6px solid #900000;
     }
  .menu-4 ul.podmenu, .menu-4 ul.podmenu-2 {
     display: none;
     position: absolute;
     top: 0;
     width: 150px;
     background-color: #ccc;
     }
  .menu-4 ul.podmenu {
     left: 214px;
     }
  .menu-4 li:hover .podmenu, .podmenu li:hover {
     display: block;
     padding: 4px 0 4px 14px;
     }
  .menu-4 .podmenu li, .podmenu li {
     margin: 0;
     padding: 0;
     background-color: #ccc;
     border-left: 0 solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 .podmenu li a, .podmenu li a {
     border-left: 0 solid #900000;
     padding: 4px 10px;
     color: #444;
     font-size: 14px;
     border-bottom: 1px dotted #999;
     }
  .menu-4 .podmenu li a:hover, .podmenu li a:hover {
     color: #0e25c0;
     }
</style>

<div class="saitbar">
 <ul class="menu-4">
   <li><a href="#">О сериале</a>
     <ul class="podmenu">
       <li><a href="#">О чем он</a></li>
       <li><a href="#">Создатель</a></li>
       <li><a href="#">Сценаристы и другие</a></li>
       <li><a href="#">Актеры</a></li>
     </ul>
   </li>
   <li><a href="#">О Докторе</a>
     <ul class="podmenu">
       <li><a href="#">Все личности</a></li>
       <li><a href="#">Спутники</a></li>
       <li><a href="#">Его родина</a></li>
       <li><a href="#">Имя</a></li>
     </ul>
   </li>
   <li><a href="#">Персонажи</a>
     <ul class="podmenu">
       <li><a href="#">Враги</a></li>
       <li><a href="#">Друзья</a></li>
       <li><a href="#">Постоянные</a></li>
       <li><a href="#">Второстепенные</a></li>
     </ul>
   </li>
   <li><a href="#">Как вы можете поддержать меня</a>
     <ul class="podmenu">
       <li><a href="#">Я работала над этим больше 5 дней</a></li>
       <li><a href="#">Простите, что без javascript</a></li>
       <li><a href="#">Но вроде и так классно получилось</a></li>
       <li><a href="#">Я ни о чем не жалею...</a></li>
     </ul>
   </li>
 </ul>
</div>
           <p> Посмотрите на этот шикарный сайт, он ведь однозначно заслуживает зачета, да?</p>
            <p>Да и плюсом он опять по "Доктору Кто", юху!</p>
        </div>
        <div class="main-menu">
          <form>

Введите свое имя, плз: <br>
<input type="text" name="text1" size="30"
maxlenght="50"> <br>
<br>
Введите свою фамилию, плз: <br>
<input type="text" name="text2" size="30"
maxlength="50"> <br>
<br>
Введите номер группы, плз: <br>
<input type="password" name="text3" size="30"
maxlength="50"> <br>
<br>
И пароль, плз: <br>
<input type="password" name="text4" size="30"
maxlength="50"> <br>
<br>
Вы любите сериал "Доктор Кто"? <br>
<input type="checkbox" name="lan1" value="Женский"> Да, конечно
<input type="checkbox" name="lan2" value="Мужской"> Да, однозначно
<input type="checkbox" name="lan3" value="Я панк, мне похуй"> Несомненно
<br>
<br>
Введите свои увлечения, плз: <br>
<select name="Увлечения">
<option value="Рисование"> Доктор Кто
<option value="Писательство"> Доктор Кто
<option value="Музыка"> Доктор Кто
</select>
<br>
<br>
</form>
          <button onclick="swa()" type="button">Отправить *нажмите сюда* </button>
        </div>
        <div class="footer">
        В ПОДВАЛЕ СИДЯТ: Хафизова Ксения и ЖМК-101
        </div>
    <script>
var b = document.getElementById('overlay');
function swa(){
	b.style.visibility = 'visible';
	b.style.opacity = '1';
	b.style.transition = 'all 0.7s ease-out 0s';
}
function swa2(){
	b.style.visibility = 'hidden';
	b.style.opacity = '0';
}
</script>

  </body>
</html>

body {
    width: 450px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    font-size: 14px;
}

.logo,
.about-us,
.main-menu,
.footer {
    padding: 10px 20px 10px 20px;
    background-color: #ADD8E6;
    border: 2px solid #cccccc;
}

/* Собственные стили блоков */

.header {
    min-height: 40px;
    margin-bottom: 20px;
}

.logo {
    float: left;
    width: 890px;
    text-align: center;
}


.about-us {
    width: 400px;
  position:absolute;
  margin-bottom: 10px;
  top:120px;
}

.about-us h1 {
    
}

.about-us p {
    font-size: 12px;
}

.main-menu {
    width: 400px; position:absolute;
  left:500px;
  top:120px;
}

.footer {
  position:absolute;
  left:280px;
  top:505px;
}
<style type="text/css">
#overlay {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    overflow: auto;
    visibility:hidden;
    opacity: 0;
    transition: opacity 0.7s ease-in 0s;
}
.popup {
    top: 40%;
    left: 0;
    right: 45%;       
    font-size: 14px;
    margin: auto;
    width: 80%;
    min-width: 200px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #666;
    background-color: #fefefe;
    z-index: 1000;
    border-radius: 10px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}
.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 130, 230, 0.9);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(180, 20, 14, 0.8);
}
#overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:blue;font-size:16px;font-weight:bold;border-bottom:1px solid blue;}
</style>

Я ненавижу javascript

This Pen is owned by Ксения on CodePen.

See more by @Keshka on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.