0

Не получается центрировать информацию страницу хочу, что бы выглядело как в примере. Заранее прошу прощения за такой нубский вопрос, я только учусь. Если будут еще советы по улучшению кода и адаптивной верстке буду рад их прочитать.

Пример

* {
  margin: 0; 
  padding: 0;
}
body {  
  background-color: #f2f2f2;
  font-family: "Futura PT", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* для корректного отображения текста на всех экранах*/
  -webkit-overflow-scrolling: touch;
  /*для нормального скроллинга*/
}
.header-top {
   height:40px;
    background: #ffffff;
    line-height:40px;    
}    
nav {
  display:flex;
  border-bottom:1px solid #ccc;
  background-color: #ffffff;
  width: 100%;
  height: 50%;  
}
nav .nav-title {
  color:#686868;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 17px;
  margin-left: 68px; 
  margin-right: 70px;
  margin-top: 22px;
}
nav .navigation {
  list-style: none;
  display:flex;
  color: gray;
  flex-grow:1;
}
nav .navigation li {
   text-align: center;
   font-size: 16px
   /*странно, но нижняя тень работает только так, если поставить ; она будет отображаться некорректно*/   
   margin-bottom: 11px;
   margin-top: 25px;
         
}

nav .navigation li.selectable:hover {
box-shadow:0 -2px 0 0 #1c76bc inset;
}

nav .navigation li.left {
    flex-grow:1;
    text-align:right;
    margin-right: 100px;
}
/* Подписаться на розсылку*/

nav .navigation a{
  color: #686868;
  text-decoration: none;
  text-align: center;
  padding: 25px 19px;  
}


/* настройка кнопок*/
/*кнопки без адаптивного дизайна, потом доделаю*/

main{
  display: flex;
  flex-direction: column;
  width: 90%;
}

main .top-slide{
  background: url(https://www.stihi.ru/photos/malenkajaskazka.jpg);
  width: 1240px;
  height: 376px;
  margin-top: 5%;
  margin-left: 5%; 
  margin-right: 5%;
  margin-bottom: 5%;
  display: block;
  vertical-align: middle;
}

.box-white{
  background-color: #ffffff;
  width: 292px;
  height: 292px;  
  position: absolute;
  margin-top: 42px;
  margin-left: 860px; 
  margin-right: 86px;
  margin-bottom: 42px;
}

.first-p{
  width: 262px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 300;
  position: absolute;
  margin-top: 18px;
  margin-right: 16px;  
  margin-bottom: 243px;
  margin-left: 14px; 
}

.cool-p{
  width: 262px;
  height: 59px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  margin-top: 48px;   
  margin-right: 15px;
  margin-bottom: 185px;
  margin-left: 15px;
}
.third-p{
  width: 262px;
  height: 86px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 16px;
  font-weight: 300;
  position: absolute;
  margin-top: 119px;   
  margin-right: 15px;
  margin-bottom: 87px;
  margin-left: 15px;
}
.read-more-p a{  
  width: 95px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  margin-top: 253px;   
  margin-right: 51px;
  margin-bottom: 2px;
  margin-left: 146px;
}
.read-more-p img{
  position: absolute;
  margin-top: 257px;   
  margin-right: 31px;
  margin-bottom: 23px;
  margin-left: 247px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>shtooooo</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<header>
		<div class="header-top">
    	Header top
		</div>
	</header>

		<nav>
  			<div class="nav-title">Блог</div>
  			<ul class="navigation">
    			<li class="selectable"><a href="#">Для бізнесу</a></li>
    			<li class="selectable"><a href="#">Для людей</a></li>
    			<li class="left"><a href="#">Підписатися на розсилку</a></li>
  			</ul>
		</nav>
		
	<main>
		<section class="top-slide">
			<section class="box-white">
				<p class="first-p">Головне</p>
				<p class="cool-p">Тут буде також дуже крутий заголовок</p>
				<p class="third-p">Integer quis interdum libero. Praesent et ante et dolor tincidunt semper. Nulla id nibh vel metus molesti</p>
				<p class="read-more-p"><a href="#">Читати далі</a><img src="img/arrow.png" alt="arrow"></p>				
			</section>
		</section>	

		<div class="lust-news and search">
			<p class="lno">Останні новини</p>			
		</div>


	</main>



	<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
	<script src="script.js"></script>
</body>
</html>

2
  • 1
    используйте <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    – soledar10
    31 июл 2018 в 15:10
  • Благодарю, помогло.
    – Nulliza
    2 авг 2018 в 8:14

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.