Почему у Подвала (footer'а) не применяется цвет background-color?
135
17 ноября 2019, 15:50
html {
line-height: 1.5;
}
/* Grid */
.container {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.row {}
.row:after {
clear: both;
/* Очистить обтекание */
content: "";
display: table;
}
.col-4 {
width: 360px;
margin-right: 30px;
float: left;
}
.col-4:last-child {
margin-right: 0px;
}
/* header */
body {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.5;
}
a {
text-decoration: none;
/* Цвет ссылки */
color: white;
text-align: center;
}
li {
list-style-type: none;
}
.logo {
margin-left: 2%;
width: 80px;
height: 80px;
}
.header {
background: black;
background-position: center;
color: white;
/*Цвет и размер текста в Шапке */
font-size: 25px;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
}
.menu {
display: flex;
align-items: center;
margin-left: 50px;
}
.menu li {
margin-left: 50px;
font-size: 100%;
margin-right: 50px;
}
.menu li a {
color: #fff;
padding: 12px 0;
}
.menu li a:hover {
color: #f1f0f5;
border-top: 0.05em solid #f1f0f5;
/* При наведении */
border-bottom: 0.05em solid #f1f0f5;
}
/* Контент */
.content {
padding-top: 30px;
padding-bottom: 100px;
overflow: hidden;
}
.itemcont {
margin-bottom: 20px;
}
.title {
font-size: 46px;
margin-bottom: 60px;
text-align: center;
}
.itemimage {
margin-bottom: 17px;
}
.itemtitle {
font-size: 24px;
line-height: normal;
/* Высота строчки */
margin-bottom: 5px;
}
.itemabus {
font-size: 16px;
line-height: 1.5;
}
.itemtitle a {
color: black;
}
.itemtitle a:hover {
color: #4a98ff;
border-bottom: 0.05em solid #4a98ff;
}
.buttons {
font-size: 16px;
margin-left: 5px;
padding-left: 5px;
color: #443200;
display: flex;
background: #f6c20c;
width: 90px;
height: 23px;
border-radius: 20px;
}
.buttons:hover {
font-size: 16px;
margin-left: 5px;
padding-left: 5px;
color: #443200;
display: flex;
background: #f3d05f;
width: 90px;
border-radius: 5px;
}
/* Подвал */
.footer {
background-color: green;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Достопримечательности NY</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="diz.css">
<link rel="shortcut icon" type="images/png" href="images/faviconec.jpg">
<!-- Шрифты -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,500,900&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- ШАПКА -->
<div class="header">
<img src="images/Logotip.png" width="80" height="80" alt="Project" class="logo">
<nav class="nav">
<ul class="menu">
<li class="glav">
<a href="index.html">Главная</a>
</li>
<li class="about">
<a href="aboutus.html">О Нас</a>
</li>
<li class="donat">
<a href="donate.html">Поддержать</a>
</li>
<li class="calln">
<a href="#">+8 (800) 555-35-35</a>
</li>
<li class="enter">
<a href="#">Войти</a>
</li>
</ul>
</nav>
</div>
<!-- Контент блок -->
<div class="content">
<div class="container">
<div class="title">
Достопримечательности Нью-Йорка
</div>
<div class="row">
<!-- Парк -->
<div class="col-4">
<div class="itemcont">
<div class="itemimage">
<img src="images/CPark1.jpg" alt="Centralp">
</div>
<div class="itemtitle">
<a class="maket" href="#">Central Park</a>
</div>
<div class="itemabus">
<p>Один из крупнейших парков в США<br> и в мире. Длина парка составляет 4 километра, ширина 800 метров,а<br> общая площадь 3,41 километра².</p>
</div>
</div>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/place/%D0%A6%D0%B5%D0%BD%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D0%B0%D1%80%D0%BA/@40.782567,-73.9657698,3a,75y,204.14h,93.2t/data=!3m7!1e1!3m5!1se6KmzTJa4SkIs6T6JxwWBA!2e0!6s%2F%2Fgeo0.ggpht.com%2Fcbk%3Fpanoid%3De6KmzTJa4SkIs6T6JxwWBA%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D211%26h%3D120%26yaw%3D46.528496%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x89c2589a018531e3:0xb9df1f7387a94119!8m2!3d40.7828647!4d-73.9653551"
target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
<!-- Таймс Сквер -->
<div class="col-4">
<div class="itemimage">
<img src="images/TimeS1.jpg" alt="Time">
</div>
<div class="itemtitle">
<a class="maket" href="#">Times Square</a>
</div>
<div class="itemabus">
<p>Таймс-Сквер одно из самых знаменитых <br>посещаемых достопримечательностей мира, привлекающей около 50 миллионов посетителей ежегодно.</p>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/place/%D0%A2%D0%B5%D0%B0%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BA%D0%B2-%D0%BB,+%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA,+%D0%A1%D0%A8%D0%90/@40.758555,-73.9855,3a,75y,357.7h,115.09t/data=!3m8!1e1!3m6!1sAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI!2e10!3e11!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI%3Dw203-h100-k-no-pi0-ya279.71542-ro-0-fo100!7i5376!8i2688!4m5!3m4!1s0x89c25855b8fb3083:0xa0f9aef176042a5c!8m2!3d40.759011!4d-73.9844722?hl=ru-RU"
target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
</div>
<!-- Бруклинский Мост -->
<div class="col-4">
<div class="itemcont">
<div class="itemimage">
<img src="images/Bridge1.jpg" alt="Brbridge">
</div>
<div class="itemtitle">
<a class="maket" href="#">Brooklyn Bridge</a>
</div>
<div class="itemabus">
<p>Это старейший висячий мост в США,<br> его длина достигает 1825 метров, а<br> ширина моста равна 26 метрам,<br>количество полос на мосту 6.</p>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/@40.7062836,-73.9969898,3a,75y,46.05h,88.11t/data=!3m7!1e1!3m5!1swDee2NIIP2JFj_KGZABeOw!2e0!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3DwDee2NIIP2JFj_KGZABeOw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D96%26h%3D64%26yaw%3D318.29254%26pitch%3D0%26thumbfov%3D100!7i16384!8i8192"
target="-blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Подвал -->
<div class="<footer>">
<div class="container">
<div class="row">
<div class="col-4">
<p class="footername">
Владислав<br> ©2019 Cайт
</p>
</div>
<div class="col-4">
<p class="social">Социальные Сети:</p>
<p class="socialicons">
<a class="ceti" href="#" target="_blank">
<i class="fab fa-vk"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-steam"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</p>
</div>
<div class="col-4">
<div>
<a class="contact" href="#" target="_blank">СВЯЗАТЬСЯ СО МНОЙ</a>
</div>
<!— КНОПКА СВСМН —>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>Answer 1
html {
line-height: 1.5;
}
/* Grid */
.container {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.row {}
.row:after {
clear: both;
/* Очистить обтекание */
content: "";
display: table;
}
.col-4 {
width: 360px;
margin-right: 30px;
float: left;
}
.col-4:last-child {
margin-right: 0px;
}
/* header */
body {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.5;
}
a {
text-decoration: none;
/* Цвет ссылки */
color: white;
text-align: center;
}
li {
list-style-type: none;
}
.logo {
margin-left: 2%;
width: 80px;
height: 80px;
}
.header {
background: black;
background-position: center;
color: white;
/*Цвет и размер текста в Шапке */
font-size: 25px;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
}
.menu {
display: flex;
align-items: center;
margin-left: 50px;
}
.menu li {
margin-left: 50px;
font-size: 100%;
margin-right: 50px;
}
.menu li a {
color: #fff;
padding: 12px 0;
}
.menu li a:hover {
color: #f1f0f5;
border-top: 0.05em solid #f1f0f5;
/* При наведении */
border-bottom: 0.05em solid #f1f0f5;
}
/* Контент */
.content {
padding-top: 30px;
padding-bottom: 100px;
overflow: hidden;
}
.itemcont {
margin-bottom: 20px;
}
.title {
font-size: 46px;
margin-bottom: 60px;
text-align: center;
}
.itemimage {
margin-bottom: 17px;
}
.itemtitle {
font-size: 24px;
line-height: normal;
/* Высота строчки */
margin-bottom: 5px;
}
.itemabus {
font-size: 16px;
line-height: 1.5;
}
.itemtitle a {
color: black;
}
.itemtitle a:hover {
color: #4a98ff;
border-bottom: 0.05em solid #4a98ff;
}
.buttons {
font-size: 16px;
margin-left: 5px;
padding-left: 5px;
color: #443200;
display: flex;
background: #f6c20c;
width: 90px;
height: 23px;
border-radius: 20px;
}
.buttons:hover {
font-size: 16px;
margin-left: 5px;
padding-left: 5px;
color: #443200;
display: flex;
background: #f3d05f;
width: 90px;
border-radius: 5px;
}
/* Подвал */
.footer {
background-color: green;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Достопримечательности NY</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="diz.css">
<link rel="shortcut icon" type="images/png" href="images/faviconec.jpg">
<!-- Шрифты -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,500,900&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- ШАПКА -->
<div class="header">
<img src="images/Logotip.png" width="80" height="80" alt="Project" class="logo">
<nav class="nav">
<ul class="menu">
<li class="glav">
<a href="index.html">Главная</a>
</li>
<li class="about">
<a href="aboutus.html">О Нас</a>
</li>
<li class="donat">
<a href="donate.html">Поддержать</a>
</li>
<li class="calln">
<a href="#">+8 (800) 555-35-35</a>
</li>
<li class="enter">
<a href="#">Войти</a>
</li>
</ul>
</nav>
</div>
<!-- Контент блок -->
<div class="content">
<div class="container">
<div class="title">
Достопримечательности Нью-Йорка
</div>
<div class="row">
<!-- Парк -->
<div class="col-4">
<div class="itemcont">
<div class="itemimage">
<img src="images/CPark1.jpg" alt="Centralp">
</div>
<div class="itemtitle">
<a class="maket" href="#">Central Park</a>
</div>
<div class="itemabus">
<p>Один из крупнейших парков в США<br> и в мире. Длина парка составляет 4 километра, ширина 800 метров,а<br> общая площадь 3,41 километра².</p>
</div>
</div>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/place/%D0%A6%D0%B5%D0%BD%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D0%B0%D1%80%D0%BA/@40.782567,-73.9657698,3a,75y,204.14h,93.2t/data=!3m7!1e1!3m5!1se6KmzTJa4SkIs6T6JxwWBA!2e0!6s%2F%2Fgeo0.ggpht.com%2Fcbk%3Fpanoid%3De6KmzTJa4SkIs6T6JxwWBA%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D211%26h%3D120%26yaw%3D46.528496%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x89c2589a018531e3:0xb9df1f7387a94119!8m2!3d40.7828647!4d-73.9653551"
target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
<!-- Таймс Сквер -->
<div class="col-4">
<div class="itemimage">
<img src="images/TimeS1.jpg" alt="Time">
</div>
<div class="itemtitle">
<a class="maket" href="#">Times Square</a>
</div>
<div class="itemabus">
<p>Таймс-Сквер одно из самых знаменитых <br>посещаемых достопримечательностей мира, привлекающей около 50 миллионов посетителей ежегодно.</p>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/place/%D0%A2%D0%B5%D0%B0%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BA%D0%B2-%D0%BB,+%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA,+%D0%A1%D0%A8%D0%90/@40.758555,-73.9855,3a,75y,357.7h,115.09t/data=!3m8!1e1!3m6!1sAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI!2e10!3e11!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI%3Dw203-h100-k-no-pi0-ya279.71542-ro-0-fo100!7i5376!8i2688!4m5!3m4!1s0x89c25855b8fb3083:0xa0f9aef176042a5c!8m2!3d40.759011!4d-73.9844722?hl=ru-RU"
target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
</div>
<!-- Бруклинский Мост -->
<div class="col-4">
<div class="itemcont">
<div class="itemimage">
<img src="images/Bridge1.jpg" alt="Brbridge">
</div>
<div class="itemtitle">
<a class="maket" href="#">Brooklyn Bridge</a>
</div>
<div class="itemabus">
<p>Это старейший висячий мост в США,<br> его длина достигает 1825 метров, а<br> ширина моста равна 26 метрам,<br>количество полос на мосту 6.</p>
<div class="button">
<a class="buttons" href="https://www.google.com/maps/@40.7062836,-73.9969898,3a,75y,46.05h,88.11t/data=!3m7!1e1!3m5!1swDee2NIIP2JFj_KGZABeOw!2e0!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3DwDee2NIIP2JFj_KGZABeOw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D96%26h%3D64%26yaw%3D318.29254%26pitch%3D0%26thumbfov%3D100!7i16384!8i8192"
target="-blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Подвал -->
<div class="footer"> <!-- Здесь у вас была опечатка -->
<div class="container">
<div class="row">
<div class="col-4">
<p class="footername">
Владислав<br> ©2019 Cайт
</p>
</div>
<div class="col-4">
<p class="social">Социальные Сети:</p>
<p class="socialicons">
<a class="ceti" href="#" target="_blank">
<i class="fab fa-vk"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-steam"></i>
</a>
<a class="ceti" href="#" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</p>
</div>
<div class="col-4">
<div>
<a class="contact" href="#" target="_blank">СВЯЗАТЬСЯ СО МНОЙ</a>
</div>
<!— КНОПКА СВСМН —>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>footer
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46859 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30320 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22981 visits
- Как через css изменить цвет png изображения? 10194 visits
- Blob video url download 9810 visits
- Php curl запрос через прокси с авторизацией 9070 visits
- Работа с captcha vk api 7989 visits
© "hostciti.net" 19.5.2024 | 00:26