How to arrange 3 images in one row and add text on top of them in the same way as shown on the layout?
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> 
