<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Error</title>
<link href="../styles/reset.css" rel="stylesheet">
<link href="../styles/basic1.css" rel="stylesheet">
<link href="../styles/emailError.css" rel="stylesheet">
<link href="../styles/mainEmail.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="../js/burger1.js"></script>
</head>
<body>
<div id="burger-container">
<div id="burger">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<header>
<a href="main.html">Главная</a>
<a href="products.html">Продукты</a>
<a href="contact.html">Контакты</a>
</header>
<div id="top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 133">
<path d="M700,78.5c-46.1,43.5-83.1,51.9-109,51c-36.3-1.3-49.5-20.9-110.4-39.7c-46.7-14.5-85-17.2-102.6-18.3
c-92.3-5.9-104.5,23.4-165.9,7.4C163.8,66.3,159,44.8,115,44.5c-33.3-0.2-54.3,11.8-77-1C19.7,33.2,11.6,12.9,7.6-1.5
c230.8,1,461.6,2,692.4,3.1V78.5z"/>
</svg>
</div>
<div id="content">
<h1>Ошибка!!!</h1>
<p>Отправте запрос занова</p>
</div>
<div id="buttom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1170 167">
<path d="M0,91C113.1,6.1,194.4-2,249,8c60.1,11,85.2,43.2,191,65c73,15,127.8,13.5,140,13c93.1-3.4,160.1-32.1,187-42
c80.2-29.4,206.9-47,408,11c-0.9,38.9-1.8,77.8-2.6,116.6L-5.9,166.9L0,91z"/>
</svg>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
html,body {
height:100%;
font-size: 100%;
width: 100%;
position: relative;
overflow-x:hidden;
}#content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 700px;
height: 150px;
}header,#buttom,#top,#content{
position: absolute;
}
header{
margin-top: 20px;
margin-left: 20px;
}
#buttom {
width: 100%;
bottom: 0;
margin-top: auto;
}
#top {
width: 60%;
top: 0; right: 0;
}
*{
margin: 0;
padding: 0;
}
html,body {
height:100%;
font-size: 100%;
width: 100%;
position: relative;
overflow-x:hidden;
}
body{
background: #eb2951;
}
a{
background: #02C851;
box-shadow: 2px 2px 10px #02C851;
}
a:hover{
border: 2px solid #02C851;
color:#02C851;
}
#burger span {
background: #02C851;
}
h1,p{
font-style: italic;
font-variant: normal;
}
h1,a,p{
font-family: Arial, sans-serif;
color:white;
}
h1{
font-weight: 400;
font-size: 2em;
margin-left: 10px;
}
p{
font-size: 2.5em;
font-weight: 400;
margin-left: 80px;
}
#content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 700px;
height: 150px;
}
@media screen and (max-width: 640px) {
h1 { font-size:1.5em; }
p {font-size:2em;}
}
@media screen and (max-width: 480px) {
h1 { font-size:1.2em; }
p {font-size:1.7em;}
}
@media screen and (max-width: 400px) {
h1 { font-size:1em; }
p {font-size:1em;}
}
body{
background: #02C851;
}
svg{
margin: -4px;
}
svg path {
fill: #ffffff;
}
h1,a,p{
color: white;
}
header,#buttom,#top,#content{
position: absolute;
}
header{
margin-top: 20px;
margin-left: 20px;
}
#buttom {
width: 100%;
bottom: 0;
margin-top: auto;
}
#top {
width: 60%;
top: 0; right: 0;
}
a{
background: #eb2951;
box-shadow: 2px 2px 10px #eb2951;
line-height: 2em;
margin-left: 20px;
text-align: center;
display: inline-block;
width: 100px;
height: 30px;
text-decoration:none;
transition-duration: 0.5s;
}
a:hover{
font-weight: bold;
background: none;
box-shadow: none;
line-height: 1.6em;
width: 96px;
height: 26px;
border: 2px solid #eb2951;
color: #eb2951;
}
header a.visibility{
display: block;
}
@media screen and (max-width: 960px) {
header a{
display:none;
margin-top: 5px;
}
}
header a.active{
font-weight: bold;
background: none;
box-shadow: none;
width: 96px;
height: 26px;
line-height: 1.6em;
border: 2px solid #eb2951;
color: #eb2951;
}
#burger-container{
display: none;
position:absolute;
left: 10px;
top: 10px;
}
@media screen and (max-width: 960px) {
#burger-container {
display: block;
}
}
#burger{
cursor:pointer;
display:block;
}
#burger span{
background: #eb2951;
display:block;
width:25px;
height:3px;
margin-bottom: 3px;
position: relative;
top:0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2),
#burger-container.open span:nth-child(3){
width: 0;
opacity:0;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top:9px;
}
#burger-container.open span:nth-child(4){
transform: rotate(45deg);
top:-9px;
}
Простой
Простой
