index1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Пример простой формы обратной связи" />
<title>Форма связи</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" type="text/css" media="screen" href="style1.css">
</head>
<body>
<header>
</header>
<main>
<div class="main-content">
<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
<div class="form-zvonok">
<div>
<label>Имя <span>*</span></label>
<input type='text' name='username' required></div>
<div>
<label>Номер телефона<span>*</span></label>
<input type='text' name='usernumber' required></div>
<div>
<label>E-mail<span>*</span></label>
<input type='text' name='question'>
</div>
<input class="bot-send-mail" type='submit' value='Послать заявку'>
</div>
</form>
</div>
</main>
<footer>
</footer>
</body>
</html>
style1.css
* {
font-family: cursive;
}
.obratnuj-zvonok{
width: 100%;
max-width: 350px;
}
.form-zvonok{
width: 100%;
display: flex;
flex-direction: column;
padding: 0 20px;
box-sizing: border-box;
}
.form-zvonok div{
padding: 15px 0;
}
.bot-send-mail{
box-sizing: border-box;
width: 100%;
}
.form-zvonok label,.form-zvonok input{
display: block;
width: 100%;
box-sizing: border-box;
}
.form-zvonok label{
margin-bottom: 5px;
font-weight: bold;
}
.form-zvonok input{
padding: 10px 15px;
margin-top: 10px;
}
.form-zvonok label span{
color: red;
}
.form-zvonok .bot-send-mail{
padding: 15px;
margin-top: 10px;
background: none;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
background-color: #009b97;
cursor: pointer;
border: 3px #009b97 solid;
border-radius: 5px;
}
.form-zvonok .bot-send-mail:hover{
color: #009b97;
background-color: #fff;
}
Средний
