<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="deckription" content="Киномонстр это портал о кино"/>
<meta name="keywords" contett="Фильмы онлайн hd"/>
<link rel="stylesheet" type="text/css" href="assets/CSS/style.css">
</head>
<body>
<div class="main">
<div class="heder">
<div class="logo">
<div class="logo_text">
<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>
<div class="site_content"> <!-- Создаём поиск с полем и кнопкой-->
<div class="sidebar_container">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form"> <!-- тег form, метод через который мы будем
передавать данные в форму, экшен это ссылка на страницу которая должна обработать форму, ай ди-->
<input type="search" name="search_field" placeholder="ваш запрос" /> <!-- импут может иметь разнве типы которые мы задаем словом type Запись name это имя импут чтобы с нее можно было получить данные на страницы обработки. placeholder это подсказка внутри импута У импута нет закрывающего тега, закрываем вот так />-->
<input type="submit" class="btn" value="найти" /> <!-- второй импут это кнопка её тип -"submit" У импута может быть параметр такой как value в этот параметрв импут можно поместить данные у нас значение найти-->
</form>
</div>
<div class="sidebar"><!-- Форма вход-->
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин" />
<input type="pasword" name="pasword_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
<div class="labels_passreg_text">
<span><a href="#">забыли пароль</span> | <span><a href="#">регистрация</a></span>
</div>
</form>
</div>
<div class="sidebar">
<h2>Новости</h2>
<span>29.05.2020</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг</h2>
<ul>
<li><a href="#">Интерстеллер</a><span class="rating_sidebar">8.1</span></li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span></li>
<li><a href="#">Безумный макс</a><span class="rating_sidebar">7.5</span></li>
<li><a href="#">Облачный атлас</a><span class="rating_sidebar">7.1</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<h1>Новые фильмы</h1>
<div class="films_block">
<a href="#"><img src="assets/img/matrix.png"></a>
<a href="#"><img src="assets/img/max.png"></a>
<a href="#"><img src="assets/img/inter.png"></a>
<a href="#"><img src="assets/img/cloud.png"></a>
</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</p>
</div>
</div>
</body>
</html>
* { /* задаем стиль для всех элементов хедер футер параграфы не хотим чтоб были отступы по краям*/
margin: 0;
padding: 0;
}
body {
font-size: 1.2em
background-color:#fff;
color: #555
}
p { /* для всех тегов p стиль*/
padding: 0 0 20px 0
line-height:1.7em;
}
input[type="text"], input[type="pasword"], input[type="search"] {
/* стилизуем стандартные стили всех импутов на наши Рекомендуется делать для всех одинаковых
инпутов или параграфов или еще чего все стили на верху. Стили создаем для конкретных инпутов
type="text" type="pasword" type="search"*/
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input, textarea {
outline: none; /*похож на border только он не влияет на ширину элемента
а border влияет При добавление outline: none; и border: none; мы делаем так что когда ставишь
курсор в поиск, рамка в поле поиск не подсвечивается*/
border: none;
border: solid 1px #f2f2f2;
}
h1, h2 {
font: normal 170% 'century gothic', arial;/*Стиль заголовков
для всей страницы */
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;/*чёрный*/
}
h2 { /*размер заголовка h2 для всей страницы*/
font-size: 140%;
}
a, a:hover { /*стиль ссылок для всей страницы*/
outline: none;
text-decoration: underline;
color: #aeb002;
}
ul { /*стиль для всех ul*/
margin: 2px 0 22px 17px;
}
ul li { /*стиль для всех ul li*/
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
.heder{
background-color: darkslateblue;/*задаем цвет*/
height: 177px; /*задаем высоту див блока*/
font-size: 0.8em; /*задаем размер шрифта*/
margin-left: 0px; /*задаем внешний отступ с лева*/
margin-right: 0px;/*задаем внешний отступ с права*/
min-width: 900px;/*минимальная ширина*/
}
.main, .logo, .menubar, .site_content, .footer/*можно задать сразу несколько классов для них параметры*/{
margin-left: auto;
margin-right: auto;
}
.logo{
width: 880px;
padding-bottom: 40px; /*внутренний отступ снизу от элемента*/
}
.logo h1, .logo h2/* этой записью мы задали заголовкам общий стиль*/{
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1, .logo_text h1 a,/*стиль для ссылки logo_text h1 тег а */ .logo_text h1 a:hover{
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em; /* интервал между символами чем выше значение тем больше интервал*/
text-decoration: none;/*стилизация свойст тега а ссылки обычный текст */
}
.logo_text h2{
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar {
width: 900px;
height: 46px;
}
ul.menu {
float: right;/* float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.*/
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none; /*Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера*/
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block; /*хотим не блочный элемент превратить в блочный*/
height: 20px;
padding: 6px 35px 35px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #aeb002;
}
ul.menu li a:hover { /*a:hover псевдоклас задали изменение цвета при наведении на ссылку*/
color: #e4ec04;
}
.site_content{
width: 880px;
overflow: hidden; /*Свойство overflow управляет отображением содержания блочного элемента,
если оно целиком не помещается и выходит за область заданных размеров.hidden
Отображается только область внутри элемента, остальное будет скрыто.*/
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_container {
float: right; /*Определяет, по какой стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент
выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может
быть на той же линии, что и сам элемент.*/
width: 224px;
}
.sidebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 5px #f2f2f2; /* серый оттенок*//*border- это рамка вокруг дива,solid -это тип рамки сейчас
линия прямая но можно задать и пунктир*/
border-radius: 5px;/* задаем скругления углов рамки*/
background-color: #f9f9f9; /*серый*/
}
.btn {
padding: 8px;
background-color: #f6eee3;
cursor: pointer;/*При наведении мышкой на ссылку курсор меняется на
палец с рукой*/
}
.sidebar h2 {
/*Стиль для правого болка сайтбар*/
color: #136cb2;/*синий*/
}
.labels_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sidebar ul { /*для сайтбара рейтинг*/
margin: 0;
}
.sidebar ul li { /*для сайтбара рейтинг*/
margin: 0;
list-style-type: none;
margin: 0 0 0 0;
}
.sidebar .rating_sidebar {
float: right;
}
.footer {
width: 100%;
height: 100px;
padding: 20px;
text-align: center; /*выравнивание текса футера по центру*/
background-color: darkslateblue;
color: #a8aa94;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.content {
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
.content {
text-decoration: none;
}
.films_block {
margin-bottom: 5%;
}
.films_block img {
border-radius: 5px;
border: solid 5px #dad7d5;
width: 22%;
}
.footer a {
color: #a8aa94;
text-decoration: none;
}
.footer a:hover {
color: #fff;
text-decoration: none;
}
.footer p {
padding: 0 0 10px 0;
}
