кодировку исправьте на utf-8 в метаданных в хеде, не поможет - код на базу
1 лайк
`<html lang="ru">
<head>
<meta charset=UTF-8"utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700&subset=latin,cyrillic">
<title>A+</title>
</head>
<body>
<header class="main-header">
<div class="container1">
<div class="header-top">
<div class="logo">
<img src="img/logotype.png" width="182" height="82" alt="A+">
</div>
<nav class="main-menu">
<ul>
<li><a href="#" class="link main-menu__link">Программа обучения</a></li>
<li><a href="#" class="link main-menu__link">Выпускники</a></li>
<li><a href="#" class="link main-menu__link">Как поступить</a></li>
<li><a href="#" class="link main-menu__link">Контакты</a></li>
</ul>
</nav>
</div>
<div class="promo">
<div class="promo-title">Учеба еще никогда не была такой интересной!</div>
<p>Обучаем готовых к трудоустройству специалистов на теоретических и практических курсах.</p>
<a href="#" class="btn btn-blue">Подать заявку</a>
</div>
</div>
</header>
<section class="features1">
<div class="container2">
<div class="features-item">
<div class="features-icon features-icon-schedule"></div>
<h2 class="features-title">Гибкий график обучения</h2>
<p class="features-text">Современный темп жизни требует гибкого подхода к расписанию.</p>
</div>
<div class="features-item">
<div class="features-icon features-icon-practice"></div>
<h2 class="features-title">Практические занятия</h2>
<p class="features-text">На одной теории далеко не уедешь, поэтому мы обучаем на практике.</p>
</div>
<div class="features-item">
<div class="features-icon features-icon-work"></div>
<h2 class="features-title">Не оставим без работы</h2>
<p class="features-text">Хорошие специалисты всегда в цене и Вы станете именно таким.</p>
</div>
</div>
</section>
<section class="features2">
<div class="container3">
<div class="top-section">
<h2 class="headings learn-types-title">Формы обучения</h2>
</div>
<table class="learn-types-table" >
<tr class="table-row">
<td class="table-heading">Название</td>
<td class="table-heading">Длительность</td>
<td class="table-heading">Описание</td>
</tr>
<tr class="table-row">
<td class="table-data"><strong>Дневное обучение</strong></td>
<td class="table-data sooqa"><strong>4 года</strong></td>
<td class="table-data table-data_last ">Наиболее интенсивный вариант обучения, для тех, кто не терпит компромиссов ни в чем.</td>
</tr>
<tr class="table__row" align="left">
<td class="table-data "><strong>Вечернее обучение</strong></td>
<td class="table-data sooqa"><strong>5 лет</strong></td>
<td class="table-data table-data_last">Вынуждены совмещать учебу с работой? Дадим вам такую возможность, совмещайте на здоровье.</td>
</tr>
</table>
</div>
</section>
<section class="contacts">
<div class="container4">
<h2 class="contacts-title">Обратная связь</h2>
<form class="contacts-form" action="" method="post">
<table>
<tr>
<td class="title">
<label for="fullname" style="color:#000">ФИО:</label>
</td>
<td class="field">
<input type="text" id="fullname" name="fullname" placeholder="Представьтесь, пожалуйста">
</td>
</tr>
<tr>
<td class="title"style="color:#000">Пол:</td>
<td class="field">
<label style="color:#000"><b><input type="radio" id="man" name="sex" value="man" checked> Мужской</b></label>
<label style="color:#000"><b><input type="radio" id="woman" name="sex" value="woman"> Женский</b></label>
</td>
</tr>
<tr>
<td class="title">
<label for="message" style="color:#000">Доп.текст:</label>
</td>
<td class="field">
<textarea id="message" name="message" placeholder="Сообщите все, что считаете нужным"></textarea>
</td>
</tr>
<tr>
<td class="title"></td>
<td class="field">
<input type="submit" class="btn btn-green" value="Отправить">
</td>
</tr>
</table>
</form>
<div class="contacts-instruction">
<h3>Заинтересовались обучением на нашей кафедре?</h3>
<p>Заполните короткую форму обратной связи и отправьте нам.</p>
<p>Мы подготовим для вас индивидуальное предложение и выйдем на связь!</p>
<p class="contacts-alert"><strong>Внимание!</strong> Все поля обязательны для заполнения.</p>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container5">
<div class="footer-top">
<div class="footer-address">
<div class="logo">
<img src="img/logotype.png" width="182" height="82" alt="A+">
</div>
<p>197101, г. Санкт-Петербург,<br> пр. Кронверкский, д. 49</p>
</div>
<div class="footer-menu">
<h3>Обучение</h3>
<ul>
<li><a href="#">Расписание</a></li>
<li><a href="#">Предметы</a></li>
<li><a href="#">Практика</a></li>
</ul>
</div>
<div class="footer-menu">
<h3>Выпускники</h3>
<ul>
<li><a href="#">Достижения</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Найти</a></li>
</ul>
</div>
<div class="footer-menu">
<h3>Как поступить</h3>
<ul>
<li><a href="#">На коммерцию</a></li>
<li><a href="#">Целевой набор</a></li>
<li><a href="#">На бюджет</a></li>
</ul>
</div>
<div class="footer-menu">
<h3>Контакты</h3>
<ul>
<li><a href="#">Обратная связь</a></li>
<li><a href="#">Схема проезда</a></li>
<li><a href="#">Телефон/факс</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>`body {
min-width: 1200px;
min-height: 680px;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 24px;
color: #FFFFFF;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif
}
.main-header {
padding-top: 35px;
padding-bottom: 80px;
background-color: #6451d5;
background-image: url(“img/intro.png”);
background-position: center 100%;
background-repeat: no-repeat;
background-size: cover;
}
.container1{
width:1020px;
height: 580px;
margin: 0 auto;
padding: 0 30px;
background:#6653d5 url(…/img/intro.png) no-repeat 95% 100%;
}
.header-top {
height: 82px;
margin-bottom: 93px;
}
.logo {
float: left;
width: 180px;
height: 100px;
}
.logo img {
display: block;
}
.link{
display:inline-block;
text-decoration:none;
padding-bottom:10px
}
.link:after{
content:’’;
display:none;
width:100%;
height:2px;
background-color:#fff
}
.link:hover{
color:#fff;
padding-bottom:8px
}
.main-menu__link{
display:inline-block;
padding:0 10px;
vertical-align:top;
color:#fff;
font-size:18px;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
font-weight:bold;
}
.main-menu__link:nth-child(4){
padding-right:0;
}
.main-menu {
float: right;
width: 700px;
margin-top: 25px;
}
.main-menu ul {
margin-left: 15px;
padding: 0;
list-style: none;
}
.main-menu li {
display: inline-block;
margin-left: 10px;
vertical-align: top;
font-size: 18px;
}
.main-menu li:nth-child(4) {
padding-right:-50px;
}
.main-menu a {
color: #ffffff;
text-decoration: none;
}
.main-menu a:hover {
text-decoration: underline;
}
.main-menu a:active {
text-decoration: none;
opacity: 0.3;
}
.btn {
display: inline-block;
margin-top:20px;
margin-bottom:0px;
padding: 20px;
font-size: 20px;
line-height: 24px;
vertical-align: top;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
cursor: pointer;
outline: none;
border: none;
}
.btn-blue {
background: #35206a;
}
.btn-blue:hover {
background: #35206a;
}
.btn-blue:active {
background: #35206a;
color: #74c39e;
}
.promo {
margin-bottom:0px;
position: relative;
width: 450px;
height: 395px;
}
.promo::after{
content: “”;
position: absolute;
top: -14px;
left: 380px;
width: 653px;
height: 451px;
background-image: url("…/img/bg-promo.png");
background-repeat: no-repeat;
z-index: 1;
}
.promo-title,
.page-title {
margin-bottom: 35px;
font-weight: 700;
font-size:45px;
line-height: 50px;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
}
.promo p {
margin: 0;
margin-bottom: 35px;
color: #beb4f3;
font-size: 18px;
line-height: 24px;
width:310px;
margin-bottom:50px;
line-height:1.66667;
font-weight:400;
font-family:Tahoma,Fira Sans,Arial,sans-serif;
}
.promo .btn {
margin-top: 12px;
margin-bottom:0px;
width: 260px;
}
.breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
.breadcrumbs li {
position: relative;
display: inline-block;
margin-right: 50px;
color: #000000;
vertical-align: top;
text-transform: uppercase;
font-size: 12px;
line-height: 24px;
}
.breadcrumbs li::after {
content: “”;
position: absolute;
top: 10px;
right: -35px;
width: 69px;
height: 63px;
background-image: url("…/img/ico-nav-arrow.png");
background-repeat: no-repeat;
}
.breadcrumbs li:last-child {
margin-right: 0;
}
.breadcrumbs li:last-child::after {
content: none;
}
.breadcrumbs a {
color: #000000;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs a:active {
text-decoration: underline;
opacity: 0.3;
}
.features1{
height:185px;
padding-top: 50px;
padding-bottom: 55px;
background-color:#EFEFEF;
}
.container2{
width:1020px;
height:187px;
margin: 0 auto;
padding: 0 30px;
}
.features-item {
position: relative;
float: left;
width: 320px;
height:187px;
margin-right: 30px;
}
.features-item:last-child {
margin-right: 0;
}
.features-text {
margin-top: -20px;
color: #404040;
font-size: 18px;
line-height: 24px;
text-align: center;
font-family:Tahoma,Fira Sans,Arial,sans-serif;
}
.features1{
padding-top:50px;
padding-bottom:45px;
background-color:#f0f0f0;
}
.features-icon{
position: absolute;
width: 100px;
height: 88px;
margin-left: 35%;
float:left;
}
.features-icon-schedule{
background:#f0f0f0 url(…/img/icon__features_learn.png) no-repeat 50% 0;
}
.features-icon-practice{
background:#f0f0f0 url(…/img/icon__features_practice.png) no-repeat 50% 0;
}
.features-icon-work{
background:#f0f0f0 url(…/img/icon__features_job.png) no-repeat 50% 0;
}
.features-title{
min-height:50px;
margin-top:90px;
font-size:22px;
text-align: center;
color: #000;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
}
.features2{
height:398px;
padding-top: 30px;
padding-bottom: 80px;
background-color: #fff;
}
.container3{
width:1080px;
height: 388px;
margin: 0 auto;
margin-top: 20px;
margin-left: 100px;
padding: 0 0;
}
.top-section{
position: relative;
margin-left: 30px;
height: 50px;
width: 1020px;
margin-bottom: 10px;
}
.learn-types-table {
padding-left: 10px;
margin-left: 30px;
width: 1020px;
margin-top: 6px;
float: left;
border-collapse: collapse;
}
.learn-types-title{
float:left;
padding-top: 5px;
margin-bottom:55px;
}
.headings{
margin-top:-5px;
font-size:45px;
line-height:1.1111;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
color: #000;
}
.learn-types-table .table-heading{
height: 30%;
padding:20px 30px;
font-size:18px;
line-height:2;
font-family:Tahoma,Fira Sans,Arial,sans-serif;
text-align:left;
color:#404040;
background-color:#f0f0f0;
border:3px solid #b3b3b3;
}
.learn-types-table .table-data{
padding: 23px 25px;
font-size:22px;
vertical-align: top;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
border:3px solid #b3b3b3;
color: #000;
}
.learn-types-table .table-data_last{
width:54%;
padding-top: 24px;
padding-left:34px;
font-size:18px;
line-height:1.5;
font-family:Trebuchet MS,Fira Sans,Arial,sans-serif;
}
.feedback {
padding-top: 85px;
padding-bottom: 80px;
}
.feedback .container {
position: relative;
}
.feedback-title,
.contacts-title {
margin: 0;
margin-bottom: 65px;
font-size: 40px;
line-height: 48px;
}
.feedback-all {
position: absolute;
top: 8px;
right: 0;
padding-right: 68px;
background-image: url(“img/dots.png”);
background-position: center right;
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 15px;
line-height: 24px;
}
.feedback-all:hover {
color: #00a666;
}
.feedback-all:active {
opacity: 0.3;
}
.feedback-item::after {
display: table;
clear: both;
content: “”;
}
.feedback-author {
position: relative;
float: left;
width: 130px;
padding-left: 170px;
}
.feedback-author img {
position: absolute;
top: 0;
left: 0;
width: 133px;
height: 133px;
border-radius: 50%;
}
.feedback-author h3 {
margin: 0;
margin-bottom: 25px;
text-transform: uppercase;
font-size: 18px;
line-height: 24px;
}
.feedback-author p {
margin: 0;
color: #404040;
}
.feedback-content {
position: relative;
float: right;
width: 640px;
margin: 0;
}
.feedback-content::before,
.feedback-content::after {
content: “”;
position: absolute;
width: 26px;
height: 20px;
background-repeat: no-repeat;
}
.feedback-content::before {
top: -10px;
left: -35px;
background-image: url(“img/quote-open.png”);
}
.feedback-content::after {
right: -20px;
bottom: -10px;
background-image: url(“img/quote-close.png”);
}
.feedback-content h3 {
margin: 0;
text-transform: uppercase;
font-size: 18px;
line-height: 24px;
}
.feedback-content p {
margin: 0;
color: #404040;
}
.contacts {
padding-top: 50px;
padding-bottom: 60px;
background-color: #efefef;
}
.container4{
color:black;
width:1020px;
height: 479px;
margin: 0 auto;
padding: 0 30px;
}
.contacts-title{
height: 50px;
}
.contacts-form {
float: left;
width: 640px;
height: 360px;
}
.contacts-form td {
padding-bottom: 10px;
}
.contacts-form .title {
width: 90px;
padding-right: 20px;
vertical-align: top;
text-align: right;
font-weight: 700;
font-size: 18px;
line-height: 54px;
}
.contacts-form .field {
width: 470px;
}
.contacts-form input[type=“text”],
.contacts-form textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 10px 23px;
font-weight: 400;
font-size: 18px;
font-family: Arial, sans-serif;
line-height: 24px;
outline: none;
border: 2px solid #b2b2b2;
border-radius: 2px;
}
.contacts-form input[type=“text”]:hover,
.contacts-form textarea:hover {
border: 2px solid #7f7f7f;
}
.contacts-form input[type=“text”]:focus,
.contacts-form textarea:focus {
border: 2px solid #00b770;
}
.contacts-form textarea {
min-height: 105px;
resize: none;
}
.contacts-form .btn {
background-color:#352979;
width: 100%;
border-radius: 3px;
}
.contacts-instruction {
float: right;
width: 300px;
padding-left: 0px;
}
.contacts-instruction h3 {
margin: 0;
margin-bottom: 25px;
font-size: 25px;
line-height: 24px;
}
.contacts-instruction p {
margin: 0;
margin-bottom: 25px;
color: #404040;
font-size: 18px;
line-height: 24px;
}
.contacts-instruction .contacts-alert {
margin-top: 42px;
}
.contacts-instruction .contacts-alert {
margin-bottom: 0;
}
.contacts-alert strong {
color: #000000;
}
.inner-content {
margin-top: 85px;
margin-bottom: 75px;
}
.inner-content h2,
.inner-content h3 {
margin-top: 48px;
margin-bottom: 24px;
text-transform: uppercase;
font-weight: 600;
font-size: 24px;
line-height: 48px;
}
.inner-content p {
margin: 24px 0;
color: #404040;
font-size: 16px;
line-height: 24px;
}
.inner-content a {
color: #3366cc;
}
.inner-content a:hover {
color: #00a666;
}
.inner-content a:active {
color: #00a666;
opacity: 0.3;
}
.inner-content hr {
margin: 55px 0;
border: none;
border-bottom: 1px solid #d3d2d2;
}
.inner-content blockquote {
margin: 24px 0;
padding-left: 35px;
border-left: 2px solid #00b770;
color: #000000;
font-style: italic;
font-size: 16px;
line-height: 24px;
}
.inner-content table {
width: 100%;
border-collapse: collapse;
}
.inner-content td {
padding: 10px 19px;
border: 1px solid #d3d2d2;
color: #404040;
font-size: 18px;
line-height: 24px;
}
.inner-content thead td {
background: #efefef;
font-weight: 600;
}
.padded-content {
position: relative;
padding-left: 340px;
}
.padded-content .padded-title {
position: absolute;
left: 0;
max-width: 300px;
margin-top: 0;
}
.custom-list-1 {
margin: 0;
padding: 0;
list-style: none;
}
.custom-list-1 li {
position: relative;
margin-bottom: 24px;
padding-left: 35px;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 24px;
}
.custom-list-1 li::before {
content: “”;
position: absolute;
top: 10px;
left: 0;
width: 27px;
border-bottom: 2px solid #00b770;
}
.main-footer {
padding-top: 65px;
padding-left:100px;
padding-right:100px;
padding-bottom: 75px;
background-color:#252044;
color: #ffffff;
font-size: 18px;
line-height: 24px;
}
.container5 {
width:1020px;
height: 234px;
padding: 0 30px;
}
.footer-top{
width: 1020px;
height:234px;
}
.footer-address {
float: left;
width: 300px;
margin-right: 40px;
}
.footer-address .logo {
float: none;
}
.footer-address p {
margin: 0;
margin-top: 60px;
}
.footer-menu {
float: left;
width: 180px;
height: 210px;
margin-top: 25px;
}
.footer-menu:last-child {
float: right;
width: 135px;
}
.footer-menu h3 {
margin: 0;
margin-bottom: 35px;
font-weight: 400;
font-size: 18px;
line-height: 24px;
}
.footer-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer-menu li {
margin-bottom: 24px;
}
.footer-menu a {
color: #9b92cb;
text-decoration: none;
font-size: 18px;
line-height: 24px;
}
.footer-menu a:hover {
text-decoration: underline;
}
.footer-menu a:active {
text-decoration: none;
opacity: 0.3;
}
.footer-bottom {
margin-top: 45px;
}
.copyright {
float: left;
width: 300px;
margin-right: 40px;
}
.footer-social-promo {
float: left;
width: 420px;
}
.footer-social {
float: right;
width: 170px;
text-align: right;
font-size: 0;
}
.social-btn {
display: inline-block;
margin-left: 25px;
vertical-align: middle;
}
.social-btn-vk {
width: 36px;
height: 24px;
background-image: url(“img/ico-vk.png”);
background-repeat: no-repeat;
}
.social-btn-vk:hover {
background-image: url(“img/ico-vk-active.png”);
}
.social-btn-fb {
width: 23px;
height: 35px;
background-image: url(“img/ico-fb.png”);
background-repeat: no-repeat;
}
.social-btn-fb:hover {
background-image: url(“img/ico-fb-active.png”);
}
.social-btn-tw {
width: 36px;
height: 30px;
background-image: url(“img/ico-tw.png”);
background-repeat: no-repeat;
}
.social-btn-tw:hover {
background-image: url(“img/ico-tw-active.png”);
}
Разобралось) Спасибо за подсказку, что шрифт надо сменить) Теперь из 12 сделано 8 пунктов)
