Урок 8.1 HTML/CSS все сместилось

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="description" content="КиноОко-это портал о кино" />
    <meta name="keywords" content="фильмы, фильмы онлайн, hd" />
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

     <div class="main">

        <div class="header">
            <div class="logo">
                <div class="logo_text">
                    <h1><a href="/">КиноMoнстр</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="btn" 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="btn" 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>31.02.2018</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.2 </span></li>
                    <li><a href="#">Безумный Макс</a><span class="rating_sidebar"> 7.5 </span></li>
                    <li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 8.1 </span></li>
                </ul>
            </div>  

        </div>
        
        <div class="content">
        	<h1>Интерстеллер</h1>
            <iframe width="727" height="409" src="https://www.youtube.com/embed/6ybBuTETr3U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </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 2015</p>
</div>

</div>

</body>
</html>

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 1.2em;
	background-color: #fff;
	color: #555;
}

p {
	padding: 0 0 20px 0;
	line-height: 1.7em;
}

input[type="text"], input[type="password"], input[type="search"] {
	color: #5d5d5d;
	width: 60%;
	padding: 8px;
}

input, textarea {
	outline: 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 {
	font-size: 140%
}

a, a:hover {
	outline: none;
	text-decoration: underline;
	color: #aeb002;
}

ul {
	margin: 2px 0 22px 17px;
}

ul li {
	margin: 0 0 6px 0;
	padding: 0 0 4px 5px;
	line-height: 1.5em;
}


.header {
	background-color: darkslateblue;
	height: 177px;
	font-size: 0.8;
	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 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;
}

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 5px 28px;
	color: #fff;
	text-decoration: none;
}

ul.menu li.selected a {
	color: #aeb002;
}

ul.menu li a:hover {
	color: #e4ec04;
}

hr {
	border: solid 1px #f3f3f3;
}


 
.site_content {
width: 880px;
overflow:hidden;
margin: 20px auto 0 auto;
background-color: white;
}

.sidebar_container {
float: right;
width: 224px;
}

.sidebar {
 float: right;
 width: 222px;
 padding: 5%;
 margin: 0 0 16px 0;
 border: solid 1px #f2f2f2;
 border-radius: 5px;
 background-color: #f9f9f9;
}

.btn {
	padding: 8px;
	background-color: white;
	cursor:pointer;
}

.sidebar h2 {
	color: #13136cb2;
}

.lables_passreg_text {
	font-size: 0.7em;
	margin-top: 3%;
	margin-left: 2%;
}

.sidebar ul {
	margin: 0;
}

.sidebar ul li {
	list-style-type: none;
	margin: 0 0 0 0;
}

.siderbar .rating_sidebar {
	float: right;
}


.content {
	text-align: left;
	width: 620px;
	padding: 0 0 0 5px;
	float: left;
}

.content a {
	text-decoration: none;
}

.film_block {
	margin-bottom: 5%;
}

.film_block img {
	border-radius: 5px;
	border: solid 5px #dad7d5;
	width: 22%;
}
.posts .posts_content {
	font-size: 0.8em;
}



.footer {
	width: 100%;
	height: 100%;
	padding: 28px 0 5px 0;
	text-align: center;
	background-color: darkslateblue;
	color: #a8aa94;
	margin-left: 0px;
	margin-right: 0px;
	min-width: 900px; 
}

.footer a {
	color: #a8aa94;
	text-decoration: none;
}

.footer a:hover {
	color: #fff;
	text-decoration: none;
}

.footer p {
	padding: 0 0 10px 0;
}

Вот кину все три ссылки результата потому что у меня нет слов даже что получилось https://pastenow.ru/9261edb1873a63abc8c27e04f1a2599d ,https://pastenow.ru/2410289d15abbc2965af03b8f1b0bf82, https://pastenow.ru/e524cffdf20f3b0bb20967b099c67fe5 Проверял перепроверял даже ответы правильные коды копировал и вставлял

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="description" content="КиноОко-это портал о кино" />
    <meta name="keywords" content="фильмы, фильмы онлайн, hd" />
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

     <div class="main">

        <div class="header">
            <div class="logo">
                <div class="logo_text">
                    <h1><a href="/">КиноMoнстр</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="btn" 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="btn" 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>31.02.2018</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.2 </span></li>
                    <li><a href="#">Безумный Макс</a><span class="rating_sidebar"> 7.5 </span></li>
                    <li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 8.1 </span></li>
                </ul>
            </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/matrix.png"></a>
                 <a href="#"><img src="assets/img/inter.png"></a>
                 <a href="#"><img src="assets/img/cloud.png"></a>

             </div>

               <h1>Новые сериалы</h1>

             <div class="films_block">
             	
                 <a href="#"><img src="assets/img/dead.png"></a>
                 <a href="#"><img src="assets/img/silicon.png"></a>
                 <a href="#"><img src="assets/img/breakigbad.png"></a>
                 <a href="#"><img src="assets/img/xfiles.png"></a>

             </div>


             <div class="posts">
                 
                <hr>
                <h2> <a href="#">Как снимали Интерстеллар</a> </h2>
                <div class="pasts_content">
                    
                    <p>
                        
                      45 лет исполнилось Кристоферу Нолану-одному из самых успешных режиссеров нашего времени, чьи работы одинаковы любимы как взыскательными критиками,так и простыми зритялими. Фильмом изначально занималась студия Paramount. Когда Кристовер Нолан занял место режиссера, студия Warner Bros, которая выпускала его последние фильмы, добилась участия в проекте.


                    </p>
            </div>

            <p><a href="#">читать</a></p>

             </div>

             <div class="posts">

                <hr>
                <h2> <a href="#">Актер Том Хенкс поделился впечатлением о фестивале</a> </h2>
                <div class="pasts_content">

                    <p>
                        16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии Леонардо Ди Каприо, Брэд Пит, Анджелика Джоли, Кейт Бланшет, Хелен Мирен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии-в нашем репортаже.
                    </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 2015</p>
</div>

</div>

</body>
</html>

HTML/CSS 8.1 Страница просмотра фильмов

Rustam Abdullaew

4 years ago

* { margin: 0; padding: 0; } body { font-size: 1.2em; background-color: #fff; color: #555; } p { padding: 0 0 20px 0; line-height: 1.7em; } input[type="text"], input[type="password"], input[type="search"] { color: #5d5d5d; width: 60%; padding: 8px; } input, textarea { outline: 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 { font-size: 140% } a, a:hover { outline: none; text-decoration: underline; color: #aeb002; } ul { margin: 2px 0 22px 17px; } ul li { margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: 1.5em; } .header { background-color: darkslateblue; height: 177px; font-size: 0.8; 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 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; } 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 5px 28px; color: #fff; text-decoration: none; } ul.menu li.selected a { color: #aeb002; } ul.menu li a:hover { color: #e4ec04; } hr { border: solid 1px #f3f3f3; } .site_content { width: 880px; overflow:hidden; margin: 20px auto 0 auto; background-color: white; } .sidebar_container { float: right; width: 224px; } .sidebar { float: right; width: 222px; padding: 5%; margin: 0 0 16px 0; border: solid 1px #f2f2f2; border-radius: 5px; background-color: #f9f9f9; } .btn { padding: 8px; background-color: white; cursor:pointer; } .sidebar h2 { color: #13136cb2; } .lables_passreg_text { font-size: 0.7em; margin-top: 3%; margin-left: 2%; } .sidebar ul { margin: 0; } .sidebar ul li { list-style-type: none; margin: 0 0 0 0; } .siderbar .rating_sidebar { float: right; } .content { text-align: left; width: 620px; padding: 0 0 0 5px; float: left; } .content a { text-decoration: none; } .film_block { margin-bottom: 5%; } .film_block img { border-radius: 5px; border: solid 5px #dad7d5; width: 22%; } .posts .posts_content { font-size: 0.8em; } .footer { width: 100%; height: 100%; padding: 28px 0 5px 0; text-align: center; background-color: darkslateblue; color: #a8aa94; margin-left: 0px; margin-right: 0px; min-width: 900px; } .footer a { color: #a8aa94; text-decoration: none; } .footer a:hover { color: #fff; text-decoration: none; } .footer p { padding: 0 0 10px 0; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="description" content="КиноОко-это портал о кино" /> <meta name="keywords" content="фильмы, фильмы онлайн, hd" /> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <div class="main"> <div class="header"> <div class="logo"> <div class="logo_text"> <h1><a href="/">КиноMoнстр</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="btn" 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="btn" 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>31.02.2018</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.2 </span></li> <li><a href="#">Безумный Макс</a><span class="rating_sidebar"> 7.5 </span></li> <li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 8.1 </span></li> </ul> </div> </div> <div class="content"> <h1>Интерстеллер</h1> <iframe width="727" height="409" src="https://www.youtube.com/embed/6ybBuTETr3U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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 2015</p> </div> </div> </body> </html>

3 ответов