Как правильно выставить отступы (Вопрос от новичка)

rustamXx · February 10, 2021

подскажите что не так? отступы ставлю как на макете, а текст прижимается к картинке

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="asecs/css/style.css">
<title>Five Stars Room</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<header>
<div class="container">
<div class="top-bar">
<div class="header-inner">
<div class="top-logo" >Logo</div>

<nav class="nav">
<a class="link-nav" href="#">Home</a>
<a class="link-nav" href="#">About</a>
<a class="link-nav" href="#">Team</a>
<a class="link-nav" href="#">Portfollo</a>
<a class="link-nav" href="#">Contact</a>

</nav>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<h1 class="intro-title">We Build Awesome Wireframe</h1>
<h2 class="top-title">A Template by Your Company</h2>

</div>
</div>
</header>

body{
margin: 0;
font-family: Pt Sans;

font-size: 15px;
line-height: 1.6;
color: #333;
}

html{
box-sizing: border-box;
}
*,
*:before,
*:after{
box-sizing: inherit;
}

h1, h2, h3, h4, h5 ,h6{
margin: 0;
}

/* header */
header{
height: 100vh;
}
.container{
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.top-bar{
height: 75px;
background-color: #2c3e50;
}

.banner{
width: 100%;
height: calc(100% - 75px);
background: url(../imgs/1.jpg) top no-repeat;
-webkid-background-size: cover;
background-size: cover;
}

/* header-inner */
.header-inner{
width: 100%;
max-width: 1170px;
margin: 0 auto;
height: 75px;

display: flex;
justify-content: space-between;
align-items: center;
}

.top-logo{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}

.nav{
font-size: 15px;
}
.link-nav{
display: inline-block;
vertical-align: top;

margin: 0 10px;
text-decoration: none;
color: #7e95ae;
transition: 0.2s color;
}

.link-nav:hover{
color: #fff;
}
/* title */
.intro-title{
font-size: 45px;
font-weight: 100;
color: #fff;
text-align: center;
padding-top: 57px;
}
.top-title{
font-size: 25px;
color: #fff;
text-align: center;
padding-top: 37px;
}
/* banner */

Sign In

Как правильно выставить отступы (Вопрос от новичка)

Question

rustamXx

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information