<!DOCTYPE html>
<html lang="en">
<head>
<title>Конкурс сайтов</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* Стиль body {
    font-family: Arial;
    margin: 0;
}

/* Заголовок/название логотипа */
.header {
    padding: 5px;
    text-align: left;
    opacity: 1;
   background: url("fon9.jpg") no-repeat;
   background-size: 100% 100%;
    color: white;
}

/* Увеличение размер шрифта заголовка */
.header h1 {
    font-size: 40px;
}

/* Стиль верхней панели навигации */
.navbar {
    overflow: hidden;
    background-color: #072348;
}



/* Стиль ссылок панели навигации */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}



/* Изменение цвета при наведении курсора в панели навигации */
.navbar a:hover {
    background-color: #0b3e73;
    color: #7da7d3;
}




/* Контейнер колонка */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* Создание двух неравных колонок, расположенных рядом друг с другом */
/* Боковая панель/левая колонка */
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #001024;
   color: #ffffff;
    padding: 2%;
}

/* Главная колонка */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: #0b3e73;
    padding-left: 10%;
	padding-right: 10%;
    color: #ffffff;
}

/* Изображение */
.fakeimg {
   margin-left: 0%;
   background: url("menu1.jpg") no-repeat;
   background-size: 100% 100%;
}

/* Нижний колонтитул */
.footer {
    padding: 20px;
    text-align: center;
    background: #072348;
    color: #ffffff
}

/* Адаптивная компоновка - когда экран имеет ширину менее 700 пикселей, делаем так, чтобы два столбца укладывались друг на друга, а не рядом друг с другом */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* Адаптивный макет - когда экран имеет ширину менее 400 пикселей, делаем так, чтобы навигационные ссылки складывались друг на друга, а не рядом друг с другом*/
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

.vertical-menu {
    width: 100%;
	background-color: #072348;
	color: #ffffff;
}

.vertical-menu a {
    background-color:#072348;;
    color: #ffffff;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.vertical-menu a:hover {
    background-color: #0b3e73;
    color: #7da7d3;
}



/*ЦЕНТРИРОВАНИЕ ССЫЛОК*/
.topnav {
  position: relative;
  overflow: hidden;
  background-color: #031b35;
}

.topnav a {
  float: left;
   color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 24px;
}

.topnav a:hover {
  background-color: #0b3e73;
    color: #7da7d3;
}

.topnav a.active {
  
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }
  
  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   #justify { text-align: justify; }
   
   
   
  
 body {font-family: Arial, Helvetica, sans-serif;}
form {border: none;;}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #072348;
    box-sizing: border-box;
}

button {
    background-color: #072348;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #072348;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
} 
   
   
   
</style>
</head>
<body>

<div class="header" style="height:150px"></div>

<!-- Top navigation -->
<div class="topnav">

  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="vchod.html" class="active">Форма входа</a>
  </div>
  
  <!-- Left-aligned links (default) -->
  <a href="glav.html">Главная</a>
  <a href="shcool.html">О школе</a>
  
  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="karta.html">Технологии</a>
    <a href="kontakt.html">Форма контакта</a>
  </div>
  
</div>

<div class="row">
  <div class="side">
    
    

	  <div class="vertical-menu">
  
  
     <div class="fakeimg" style="height:60px";></div><br>
  <a href="papirus.html">ПОЛУЧЕНИЕ ПАПИРУСА</a>
  <a href="pisma.html">СОЗДАНИЕ И ПЕРЕДАЧА ПИСЕМ</a>
  <a href="pautin.html">ВСЕМИРНАЯ ПАУТИНА</a>
  <a href="technologi.html">НОВЫЕ ТЕХНОЛОГИИ ОБЩЕНИЯ</a>
</div>

      
      <div>

      <div class=style="height:60px;"></div><br>
      <div style="height:60px;"></div>
  </div>
 </div>
 

 <div class="main">
     
	<form action="index.html">
  <div class="imgcontainer">
   
  </div>

  <div class="container">
    <label for="uname"><b>ЛОГИН</b></label>
    <input type="text" placeholder="Введите логин" name="uname" required>

    <label for="psw"><b>ПАРОЛЬ</b></label>
    <input type="password" placeholder="Введите пароль" name="psw" required>
        
    <button type="submit">ОТПРАВИТЬ</button>
    
  </div>

  <div class="container" style="background-color:#0b3e73">
    <button type="button" class="cancelbtn">ОТМЕНА</button>
    
  </div>
</form>
  
 
  
</div>





	



	 </div>
</div>

<div class="footer">
  <h4>&copy; Владислав Толкачев e-mail: skumen4ikplay@yandex.ru</h4>
</div>

</body>
</html>