1

Как расположить 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>

3
  • 1
    Код покажите пожалуйста
    – aquaprogit
    24 ноя 2018 в 15:03
  • @SeeSharp ага, а вдруг Вы украдёте его? )))
    – UModeL
    24 ноя 2018 в 16:22
  • 2
    @UModeL если бы не увидел что вы не тот человек который задал вопрос, не сдержался бы
    – aquaprogit
    24 ноя 2018 в 17:22

1 ответ 1

4

Такой вариант устроит?

.block {
  width: 100%;
}

.image {
  display: inline-block;
  float: left;
  width: calc(100% / 3);
  position: relative;
}

.image img {
  display: block;
  width: 100%;
  height: 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;
}
<div class="block">
  <div class="image">
    <img src="https://bipbap.ru/wp-content/uploads/2017/08/1_small.jpg">
    <div class="text">
      <div class="line-1">line 1</div>
      <div class="line-2">line 2</div>
    </div>
  </div>

  <div class="image">
    <img src="https://pbs.twimg.com/profile_images/793021684064419840/RjEjM6z5.jpg">
    <div class="text">
      <div class="line-1">line 1</div>
      <div class="line-2">line 2</div>
    </div>
  </div>

  <div class="image">
    <img src="https://dreem-pics.com/uploads/posts/2017-10/1508077709_0_small.png">
    <div class="text">
      <div class="line-1">line 1</div>
      <div class="line-2">line 2</div>
    </div>
  </div>
</div>

5
  • 1
    Кек, обажаю когда минусят за правильный ответ..
    – De.Minov
    24 ноя 2018 в 15:20
  • 2
    Это я постарался.... Считаю, что не стоит отвечать на подобные вопросы... Ни примера верстки... Ни желания отвечать на комменты... Просто, оставил заказ, кто-нить да ответит...
    – Air
    24 ноя 2018 в 15:32
  • 1
    Air, это мой ответ - моё желание ему помочь. Может - не может, его дело. Моё помочь. А по поводу оценок, давно заметил, многие пропускают этот момент.
    – De.Minov
    24 ноя 2018 в 16:33
  • 1
    Я добавил код. Прошу прощения, что сразу не добавил. Это моя первая практика, так что пока не совсем всё полностью понимаю в плане вёрстки. 24 ноя 2018 в 16:39
  • @CbIPoK2513 display:block... Че-т не хардкорно... В истинном CSS все должно быть криво. Даешь display:flex:) 24 ноя 2018 в 17:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.