У меня 3 проблемы:
- Как сделать отступ между button1 и button2? Margin не работает.
- Элементы класса logo2 не выравниваются по центру.
- Как сделать, чтобы элементы класса item выводились в 2 строки?
Заранее спасибо!
* {
margin: 0;
padding: 0;
color: #4a5666;
font-family: 'Asap', sans-serif;
}
.first {
background-color: #e2e2e2;
height: 100vh;
}
.container {
/*background: gray;*/
margin: 0 auto;
max-width: 1024px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.content {
width: 100%;
display: flex;
justify-content: center;
}
a.button1 {
margin: 10px;
font-size: 25px;
width: 160px;
height: 50px;
background: white;
display: inline-block;
font-weight: 700;
text-decoration: none;
user-select: none;
display: table-cell;
vertical-align: middle;
outline: none;
text-align: center;
}
a.button2 {
margin: 10px;
font-size: 25px;
text-align: center;
width: 160px;
height: 50px;
display: inline-block;
font-weight: 700;
text-decoration: none;
user-select: none;
display: table-cell;
vertical-align: middle;
outline: none;
border: 2px solid;
transition: 0.2s;
}
#id1 {
font-size: 70px;
line-height: 67px;
font-weight: 500
}
#id2 {
font-size: 22px;
line-height: 67px;
font-weight: 500;
color: #4d4d4d;
flex-direction: column;
}
.second {
background-color: white;
height: 100vh;
}
.logo2 {
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px;
text-align: center;
}
#lid1 {
width: 60px;
height: 4px;
opacity: 0.6;
background-color: #212121;
}
#lid2 {
opacity: 0.8;
font-size: 46px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #4d4d4d;
margin-top: 50px;
}
.item {
text-align: center;
margin: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Asap:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<div class="first">
<div class="container">
<div class="content">
<div>
<p id="id1">LUIS OUENRIQUE</p>
<p id="id2">User Expirience/User Interface Expert</p>
<a href="#" class="button1">KNOW MORE</a>
<a href="#" class="button2">HIRE ME</a>
</div>
<div>
<img class="heroIMG" src="hero.png" alt="">
</div>
</div>
</div>
</div>
<div class="second">
<div class="container">
<div class="logo2">
<p id="lid1"></p>
<p id="lid2">SERVICES</p>
</div>
<div class="content">
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
<div class="item">
<img src="fs.png" alt="fs">
<p>User Research</p>
</div>
</div>
</div>
</div>
</body>
</html>