HTML CSS урок 10.2
8мин - не могу поменять header{
background-color: (для мобильного), все делаю как в видеоуроке НО -не получается
над скинуть html и css чтобы было видно классы и синтаксис..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>kinomonster</title> <meta name="description" content="Киномонстер-это портал о кино"> <meta name="keyworld" content="фильмы, фильмы онлайн, hd" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="icon" type="text/css" href="img/favicon.png"> </head> <body> <div class="main"> <div class="header"> <div class="logo"> <div class="logotext"> <h1><a href="/">КиноМонстр</a></h1> <h2>Кино-наша страсть!</h2> </div> </div> <div class="menubar"> <ul class="menu"> <li class="selected"><a href="#">Главная</a></li> <li><a href="#">Фильмы</a></li> <li><a href="#">Сериалы</a></li> <li><a href="#">Рейтинги фильмов</a> </li> <li><a href="#">Контакты</a></li> </ul> </div> </div> <div class="site_content"> <div class="sidebar_container"> <div class="sidebar"> <h2>Поиск</h2> <form method="post" action="#" id="search_form"> <input type="search" name="search_field" placeholder="ваш запрос" /><!--кнопка запроса--> <input type="submit" class="button" value="найти" /><!--кнопка найти--> </form> </div> <div class="sidebar"> <h2>Вход</h2> <form method="post" action="#" id="login"> <input type="text" name="login_field" placeholder="логин" /><!--кнопка запроса--> <input type="password" name="password_field" placeholder="пароль" /><!--кнопка запроса--> <input type="submit" class="button" value="вход" /><!--кнопка вход--> <div class="lables_passreg_text"> <span><a href="#">забыли пароль?</a></span> | <span><a href="#">регистрация</a></span> </div> </form> </div> <div class="sidebar"> <h2>Новости</h2> <span>26.02.2020</span> <p>мы запустили раcширенный поиск.</p> <a href="#">читать</a> </div> <div class="sidebar"> <h2>Рейтинг фильмов</h2> <form method="post" action="#" id="login"> <ul> <li><a href="#">Интерсталлер</a><span class="rating">8.1</span></li> <li><a href="#">Матрица</a><span class="rating">7,6</span></li> <li><a href="#">Безумный Макс</a><span class="rating">7,4</span></li> <li><a href="#">Облачный атлас</a><span class="rating">6,8</span></li> </ul> </form> </div> </div> <!--починаємо писати контент зліва в site_content--> <div class="content"> <h1>Новые фильмы</h1> <div class="films_block"> <a href="#"><img src="img/matrix.png" alt=""></a> <a href="#"><img src="img/max.png" alt=""></a> <a href="#"><img src="img/inter.png" alt=""></a> <a href="#"><img src="img/cloud.png" alt=""></a> </div> <h1>Новые сериалы</h1> <div class="films_block"> <a href="#"><img src="img/dead.png" alt=""></a> <a href="#"><img src="img/silicon.png" alt=""></a> <a href="#"><img src="img/breakingbad.png" alt=""></a> <a href="#"><img src="img/xfiles.png" alt=""></a> </div> <div class="post"> <hr><!--лінія суцільна під картинками--> <h2><a href="#">Как снимали Интерсталлер</a></h2> <div class="post_content"> <p>асто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура. Генератор текста онлайн позволит задать необходимое количество слов, из которых будут сформировано указанное Вами число абзацев. Правда, смысл сгенерированный текст иметь не будет, но ведь этого нам и не требуется! Данный генератор случайного текста также предоставляет возможность выбрать стиль: классическая проза, бизнес, юмор и многие другие темы, что позволит более реалистично и уместно преподнести созданный текст. Создайте свой литературный шедевр в один клик! </p> </div> <p><a href="#">читать</a></p> <hr><!--лінія суцільна під картинками(текстом)--> <h2><a href="#">Актер Том Хенкс поделился впечатлениями о фестивале<a></h2> <div class="post_content"> <p> Данный генератор случайного текста также предоставляет возможность выбрать стиль: классическая проза, бизнес, юмор и многие другие темы, что позволит более реалистично и уместно преподнести созданный текст. Создайте свой литературный шедевр в один клик! </p> </div> <p><a href="#">читать</a></p> </div> </div> <!--кінець контенту зліва--> </div> <div class="footer"> <p> <a href="#">Главная</a> | <a href="#">Фильмы</a> | <a href="#">Сериалы</a> | <a href="#">Рейтинг фильмов</a> | <a href="#">Контакты</a> | </p> <p>wh-db.com 2020</p> </div> </div> </body> </html>
*{
margin: 0px;/*удаляє маленькі відступи по краям сайта від екрана*/
padding: 0px;
}
/*строка 8-17 пишеться тоді як пропишеться 110-136*/
input[type="text"], input[type="password"], input[ type="search"] {
color:#5d5d5d;
width: 60%;
padding: 8px;
}
input, textarea{ /*пропаде рамка навколо (ваш запрос) під ПОИСКОМ, те що прописано в HTML рядок 40*/
outline: none;
border: none;
border: 1px solid #f2f2f2;
}
.header{
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin:0px 0px;
min-width: 900px;
}
.main, .logo, .menubar, .site_content, .footer{
margin-left: auto;
margin-right: auto;
}
.logo{
width: 880px;
padding-bottom: 40px;
border: 2px solid white;
}
.logo h1, .logo h2 {
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logotext h1, .logotext h1 a, .logo text h1 a:hover{
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
border: 1px solid lime;
}
.logotext h2{
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
border: 1px solid black;
}
.menubar{
width: 900px;
height: 46px;
border: 4px solid tomato;
}
ul.menu{
width: 820px;
height: 27px;
border: 2px solid orange;
float:right;/*рамку ul.menu вирівняло справа*/
}
ul.menu li{
width: 140px;
height: 20px;
border: 2px solid blue;
float: left;/*помістили список в одну лінію*/
padding: 0 0 0 9px;
list-style: none;/*означає, що ні кружечків ні квадратиків перед словами не буде*/
margin: 1px 2px 0px 0px;
}
ul.menu li a{
font:normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 5px 28 px;
color: #fff;
text-decoration: none; /*без нижнього підчеркування*/
}
ul.menu li.selected a{
color: #aeb002;/*главная підсічується другим кольором*/
}
ul.menu li a:hover{
color: #e4ec04;
}
/*site content*/
.site_content{
width: 910px;
/*height:950px;*//*ставити для рамки потім убрати*/
border: 2px solid yellow;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_container{
width: 224px;
/*height:550px;*//*спочатку поставив 550 щоб бачити границы, потім треба удалити щоб не вилізало за межі границі*/
border: 2px solid blue;
float:right;
}
.sidebar{
width: 200px;
/*height:170px;*//*удалити цей рядок, якщо не удалити то будуть
всі однакової висоти рамки */
border: 1px solid yellowgreen;
border-radius: 5%;
background-color: #f9f9f9;
float: right;
padding: 5%
margin: 0 0 16px 0;
}
.button{
padding: 8px;
background-color: white;
cursor: pointer;/*показує пальчик при наведенні на кнопку*/
}
h1, h2{/*126-131 краще писати на початку style- тобто це стиль для всіх h1.h2*/
font: normal 170% 'century gothic, arial;
margin:0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2{
font-size: 140%;
}
.sidebar h2{
color: #136cb2;
}
.lables_passreg_text{
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%
}
/*строку 148-151 треба прописувати на початку style
(тобто для всіх- a, a:hover*/
a, a:hover{
outline: none;
text-decoration: underline;
color: #aeb002;
}
/*1)тепер поставимо стилі для всієї сторінки і параграфів*/
/*2) треба прописувати на початку style*/
body{
font-size: 1.2em;
background-color: #fff;/**white*/
color: #555;
}
p{
padding: 0 0 20px 0;
line-height: 1.7em;
}
.sidebar ul{
margin: 0px;
}
.sidebar li{
list-style: none;/*не буде ні квадратиків ні кружечків*/
margin: 0px;
}
.sidebar .rating{
float: right;
}
/*ці стилі також треба писати на початку style*/
ul{
margin: 2px 0px 22px 17px;
border: 1px solid brown;
}
ul li{
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
border: 1px solid grey;
}
.footer{
width: 100%;
height: 100%;/*висота до жовтої рамки тоді 100%*/
background-color: darkslateblue;
padding: 28px 0 5px 0;
text-align: center;
color: #a8aa94;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.footer a{
color: #a8aa94;
text-decoration: none;
}
.footer a:hover{
color: white;
text-decoration:none;
}
.footer{
padding:8px 0 10px 0;
}
.films_block{
margin-bottom: 5%;
}
/*пишемо контент(PAINT) і переміщаємо вище foteer (логіка)*/
.content{
text-align: left;
width: 660px;
/*height: 650px;*//*удаляємо цей запис після наповнення
всередині рамки(бо текст вилізе за рамку)*/
border: 2px solid brown;
padding: 0 0 0 5px;
float: left;
}
.content a{
text-decoration: none;
}
/*прописуємо радіус для картинок в HTML рядок 80-83*/
.films_block img{
border: 5px solid grey;
border-radius: 5px;
width: 22%;
}
hr{
border: 1px solid grey;
}
.post .post_content{
font-size: 0.8em;
color: black;
}
/*початок для сторынки show*/
.info_film_page{
margin-top: 2%;
margin-bottom: 4%;
}
.info_film_page .label{
font-size: 1.2em;
}
.info_film_page .value{
font-size: 1em;
color: #49945a;
margin-right: 3%;
}
/*те що прописано в html 92-96 (тут 255-263)*/
.description_film{
margin-bottom: 15%;
border: 4px solid red;
}
.description_film img{
float: left;
margin-right: 2%;
border-radius:5px;
;border: 5px solid grey
}
/*стиль для отзывов*/
.reviews{
border: 3px solid green;
margin-bottom: 4%;/*відстань від зеленої до коричневої нижньої рамки*/
font-size: 0.9em;
}
.review_name{
background-color: darkslateblue;
color: white;
margin-left: 0px;
padding: 1%;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
.review_text{
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2%;
}
/*написання відгуків по фільму в html 126-133*/
.send{
margin-bottom: 4%;
}
.send input[type="text"], textarea{
border: 1px solid blue;
margin-bottom: 2%;
}
.send input[type="text"]{
width: 96%;/*ширина там де (ваше имя)*/
}
.send textarea{
width: 624px;/*там де писати відгук*/
height: 200px;
}
.send input[type="submit"]{/*кнопка*/
background-color: #7268ad;
padding: 3%;
color: white;
border-radius: 5px;
}
/*contacts*/
h1, h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 80%;
}
/*films*/
/*див в html строка з 77-ї*/
.info_film{
margin-bottom: 2%;/*відстань між червоними рамками*/
border: 5px solid red;
background-color: lightgrey;
margin-right: 3%;/*відстань від червоної рамки
до коричневої справа*/
height: 370px;/*висота всіх блоків текст+ картинка однакові*/
}
.info_film img{
float: left;/*картинка зліва, текст обтікає*/
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
border-radius:5px;
border: 5px solid grey;
width: 25%;/*ширина картинки*/
}
.button{
background-color: grey;
padding: 2%;
color: white;
border-radius: 5px;
float: left;
clear: both;
font-size: 0.8em;
margin-top: 5%;
margin-left: 2px;
}
.button a{
color: white;
}
.send{
margin-right: 15%;
cursor: pointer;
}
input{
cursor: pointer;
}
/*лист rating*/
table {
width: 98%;
background: lightgrey; /* Цвет фона таблицы */
border: 3px solid red; /* Рамка вокруг таблицы */
}
tr td {
border: 1px solid green;
padding: 2%;
}
td img{
width: 100px;/*величина картинки в таблиці*/
vertical-align: middle;
}
/*Css MOBILE*/
@media only screen
and(min-device-width: 375px)
and (max-device-width: 667px){
.header {
background-color: red;
min-width: 100%;
height: 20%;
text-align: center;
}
.logo{
width: 100%;
}
.site_content{
width: 100%;
}
}
у вас вот тут ошибка
.sidebar{
width: 200px;
/*height:170px;*//*удалити цей рядок, якщо не удалити то будуть
всі однакової висоти рамки */
border: 1px solid yellowgreen;
border-radius: 5%;
background-color: #f9f9f9;
float: right;
padding: 5% <---- ;
margin: 0 0 16px 0;
}
и вот тут
h1, h2{/*126-131 краще писати на початку style- тобто це стиль для всіх h1.h2*/
font: normal 170% 'century gothic, arial; <--- '
margin:0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
попробуйте так ...
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.header {
background-color: red;
min-width: 100%;
height: 20%;
text-align: center;
}
.logo {
width: 100%;
}
.site_content {
width: 100%;
}
}
