Как расположить 3 изображения в один ряд и добавить текст поверх них так же, как показано на макете?
body {
font-family: 'Krub', sans-serif;
padding: 0;
margin: 0;
}
h2 {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 37px;
}
header {
background: url(./images/img1.png) no-repeat center top / cover;
height: 1200px;
}
nav,
.menu {
display: flex;
flex-direction: row;
justify-content: center;
}
.menu li {
display: block;
margin-top: 41px;
margin-right: 48px;
font-size: 18px;
}
.menu li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.titles-first {
font-size: 90px;
color: white;
text-align: center;
margin-top: 220px;
}
.titles p {
font-size: 20px;
text-align: center;
color: white;
line-height: 2;
}
.button {
background-color: #cd8586;
color: white;
border-radius: 30px;
display: block;
width: 170px;
padding: 17px 0;
margin: 102px auto;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 3px;
}
.block {
width: 100%;
}
.image {
display: inline-block;
float: left;
width: calc(100% / 3);
position: relative;
}
.image img {
display: block;
width: 100%;
}
.image .text {
display: block;
position: absolute;
left: 5%;
right: 5%;
bottom: 15%;
text-align: center;
background: rgba(0, 0, 0, .45);
}
.image .text .line-1 {
color: #fff;
font-size: 120%;
font-weight: bold;
}
.image .text .line-2 {
color: #aaa;
}
footer {
background-color: #fff;
height: 325px;
}
li {
list-style-type: none;
}
.settings li a {
text-decoration: none;
line-height: 2;
font-style: italic;
}
.settings-2 li a {
text-decoration: none;
line-height: 2;
font-style: italic;
}
.settings-3 li a {
text-decoration: none;
line-height: 2;
font-style: italic;
}
.settings {
margin-top: 55px;
margin-left: 198px;
display: inline-block;
float: left;
}
.settings-2 {
margin-top: 55px;
margin-left: 198px;
display: inline-block;
float: left;
}
.settings-3 {
margin-top: 55px;
margin-left: 198px;
display: inline-block;
float: left;
}
.black {
box-sizing: border-box;
background-color: black;
color: grey;
height: 97px;
text-align: center;
padding-top: 42px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Страница для вёрстки</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Krub:400,700" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#links">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<div class="titles">
<div class="titles-first">
Web Design
</div>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris <br> condimentum , ut fermentum massa justo sit amet <br> erat a ante venenatis dapibus posuere velit </p>
</div>
</div>
<a class="button" href="#">Really?</a>
</header>
<div class="block">
<div class="image">
<img src="./images/img2.png">
<div class="text">
<div class="line-1">amet condimentum</div>
<div class="line-2">dolor</div>
</div>
</div>
<div class="image">
<img src="./images/img3.png">
<div class="text">
<div class="line-1">Lorem Cursus</div>
<div class="line-2">Ligula</div>
</div>
</div>
<div class="image">
<img src="./images/img4.png">
<div class="text">
<div class="line-1">Condimentum Ultricies</div>
<div class="line-2">Consectetur</div>
</div>
</div>
</div>
<footer>
<div class="info">
<div class="settings">
<h2 id="links">Follow us</h2>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
</div>
<div class="info-2">
<div class="settings-2">
<h2>Get to know us</h2>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Developers</a></li>
</ul>
</div>
</div>
<div class="info-3">
<div class="settings-3">
<h2>Locations</h2>
<ul>
<li><a href="#">Detroit</a></li>
<li><a href="#">London</a></li>
<li><a href="#">Florida</a></li>
<li><a href="#">Las-Vegas</a></li>
<li><a href="#">California</a></li>
</ul>
</div>
</div>
</footer>
<div class="black">
Copyright © 2016 @samiralley
</div>
</body>
</html>