<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="asseett/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800&display=swap" rel="stylesheet">
</head>
<body>
<header class="header" >
<div class="container">
<div class="heading clearfix">
<img src="asseett/logo.png" alt="Shabcreation" class="logo">
<nav>
<ul class="main-menu">
<li class="selected"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="titles">
<h1>
A FULL SCALE
<span>DIGITAL AGENCY</span>
</h1>
</div>
<div class="item">
We WILL CRAFT A BEAUTIFUL AND USEFUL FUNCTIONAL EXPERIENCE
</div>
<img src="asseett/line.png" alt="line" class="line">
</div>
</header>
<section class="about">
<div class="container">
<div class="block">
<h2>ABOUT SHABCREATION</h2>
<p class=>
Shabcreation is a Digital Creative Agency. We create joyful digital<br>
experiences and unique visual identities that tickle the brain,<br>
please the eyes and connect the hearts of brands to the
<br>
hearts of their consumers.
</p>
<a class="learn" href="#">Learn More</a>
</div>
</div>
</section>
<section class="our">
<div class="container">
<div class="block-our">
<h2> OUR SERVICES</h2>
<p>
Cresol is a Digital Creative Agency. We create joyful digital<br>
experiences and unique visual identities
</p>
<ul class="top-menu clearfix">
<li><img src="asseett/first.png">
<p class="text">APP DEVELOPMENT</p></li>
<li><img src="asseett/item-first.png"><p class="text">WEB DELELOPMENT</p></li>
<li><img src="asseett/item-photo.png">
<p class="text">QA TESTING</p></li>
</ul>
</div>
</div>
</section>
<section class="Contact">
<div class="ra-first clearfix">
<h2>CONTACT US</h2>
<form>
<input type="text" placeholder="Your name" class="input">
<br>
<input type="text" placeholder="Subject" class="input">
<textarea rows="8" cols="40" placeholder="Description" class="input"></textarea>
<a href="#">Submit</a>
</form>
</div>
<div class="photo">
<div class="container">
<div class="ra">
<img src="asseett/icon.png">
<img src="asseett/mapp.png">
<h2>INDORE, India</h2>
<hr>
<p>
8933 Country Club Road<br>
Batavia, OH 45103
</p>
<a>
+91 810 9817 897
</a>
</div>
</div>
</div>
</section>
</body>
</html>body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
padding: 0;
margin: 0;
}
.clearfix:after {
content:'';
display: table;
width: 100%;
clear: both;
}
.header {
background: #242629 url('../sl.png') no-repeat center top/cover;
margin-bottom: 48px;
}
.container {
width: 1172px;
margin: 0 auto;
}
div, p, input, button, form {
box-sizing: border-box;
}
.logo {
margin-top: 34px;
float: left;
}
nav {
float: right;
display: block;
margin-top: 42px;
}
.main-menu {
padding: 0;
margin: 0;
display: block;
}
.main-menu li {
float: left;
display: block;
font-weight: bold;
margin-right: 54px;
}
.main-menu a {
color: white;
text-decoration: none;
}
ul.main-menu li.selected a {
color: #fb2274;
}
h1 {
font-size: 100px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
margin: 0;
margin-top: 264px;
}
span {
color: #fb2274;
padding: 0;
}
.item {
text-align: center;
color: white;
padding: 0;
}
.line {
display: block;
margin: 0 auto;
margin-top: 222px;
margin-bottom: 48px;
}
/* section 2 */
.block {
width: 914px;
margin: 0 auto;
}
h2 {
color: #444;
font-size: 48px;
margin-bottom: 64px;
text-align: center;
}
p {
color: #b9b9b9;
font-size: 28px;
margin-bottom: 48px;
text-align: center;
}
.learn {
color: #fb2274;
font-size: 24px;
border: 2px solid #fb2274;
text-decoration: none;
display: block;
width: 230px;
padding: 22px 0;
text-align: center;
margin: 0 auto;
margin-bottom: 100px;
}
/* section 3 */
.our {
background: #fafafa;
}
.block-our {
}
h2 {
color: #444444;
font-size: 48px;
margin: 0;
margin-bottom: 46px;
}
.text {
color: #444444;
font-size: 24px;
font-weight: bold;
background: white;
margin: 0;
padding: 22px 0;
margin-bottom: 68px;
}
.top-menu li {
float: left;
margin-right: 30px;
display: block;
margin-top: 88px;
}
.top-menu img {
width: 347px;
height: 358px;
}
/* section 4 */
.photo {
background: url('../photo.png') no-repeat center top/cover;
height: 400px;
width: 672px;
margin-top: -18px;
}
.item-block {
border: 2px solid #000;
height: 224px;
width: 362px;
}
.ra {
padding: 0;
margin: 0;
border: 2px solid white;
background: white;
width: 366px;
height: 224px;
}
.ra h2 {
margin: 0;
font-size: 36px;
font-weight: lighter;
color: #444444;
}
hr {
width: 148px;
float: left;
}
.ra p {
color: #c2c2c2;
}
.ra a {
color: #fb2274;
}
.ra-first {
display: list-item;
float: right;
}
.ra-first h2 {
float: left;
font-size: 48px;
font-weight: bold;
margin-top: 98px;
margin-bottom: 72px;
text-align: center;
}
form {
}
.input {
float: left;
padding: 12px 0 10px 11px;
}
.ra-first a {
border: 2px solid #fb2274;
text-decoration: none;
font-size: 24px;
color: #fb2274;
width: 696px;
padding: 16px 0;
text-align: center;
}
<br>, есть случаи, когда какой-то девиз, лозунг, что-то ещё должны переноситься на определенном слове, обычный же текст оставляй как есть, ты же потом будешь адаптировать сайт под телефоны и планшеты, переставлять <br>запаришься. Лучше поставь max-width, этого хватит.
Простой
Простой
Простой
