0

Хочу поинтересоваться - как сверстать такой вот интересный блок? введите сюда описание изображения

Я так понимаю структуру : Сам блок табов, внутри которого img + блок цитаты, который я пока не совсем в курсе как сверстать и странный слайдер, непонятно что кроме тренера свайпает и какую смысловую нагрузку несет.

Мне нужна помощь конкретно с версткой блока цитат.

Вот мой код на данный момент :

ul{
  list-style-type: none;
}
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 63%;
  margin: 0 auto;
}

.quotes {
  width: 100%;
  height: 250px;
  background-color: #fff;
  -webkit-box-shadow: 0 9px 50px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 9px 50px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 35px 150px 60px 64px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.quotes .tab-buttons {
  position: absolute;
  top: 30%;
  right: -20px;
}
.quotes .tab-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.quotes .tab-content div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.quotes .tab-content div img {
  width: 128px;
  border: 2px solid #e4e4e4;
  border-radius: 50%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-item-align: center;
  align-self: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="quotes">
				
      <ul class="tab-buttons">
        <li>o</li>
        <li>o</li>
        <li>o</li>
        <li>o</li>
        <li>o</li>
      </ul> <!-- //tab-buttons -->

      <div class="tab-content">
        <div>
          <img src="assets/images/tabimage.png" alt="" />
          <blockquote>

          </blockquote>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div> <!-- //tab-content -->

    </div> <!-- //quotes -->
			
			
  </div> <!-- //wrapper -->

JS я напишу без проблем, а вот с версткой самой цитаты я не совсем могу разобраться! прошу помочь.

1 ответ 1

2

В общих чертах:

.container {
  padding: 48px;
  font-size: 12px;
}

.quote {
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 32px 48px;
  background: white;
  min-height: 138px;
}

.quote-content { 
  background: inherit;
  margin: 0 48px 0 138px;
  padding: 0 24px;
  border-left: 1px solid gray;
}

.qoute-photo {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 96px;
  border: 2px solid gray;
  padding: 4px;
  background: inherit;
}

.quote-text {
  position: relative;
  display: block;
  background: inherit;
  margin-bottom: 1em;
}

.quote-text::before,
.quote-text::after {
  content: '"';
  display: block;
  position: absolute;
  text-align: center;
  width: 48px;
  background: inherit;
  font-size: 2em;
}

.quote-text::before {
  top: 0;
  left: -48px;
}

.quote-text::after {
  top: 100%;
  left: 100%;
}

.quote-signature-post {
}
.quote-signature-name {
  color: blue;
  font-weight: bold;
}

.quote-trash {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  top: 100%;
  margin: -35px 48px 0 124px;
}

.qoute-trash-photo {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border: 1px solid gray;
  padding: 2px;
}

.qoute-trash-button {
  background: white;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
.qoute-trash-button,
.qoute-trash-photo,
.qoute-trash-signature {
  margin: 0 12px;
}
<div class="container">
  <div class="quote">
    <img class="qoute-photo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/6f131d22-7974-4793-9db3-2160376b5c72/d9kmnxu-43ae474c-27a1-424c-993c-e2cbb705eb6e.jpg/v1/fill/w_1196,h_668,q_70,strp/guard_by_wlop_d9kmnxu-pre.jpg" alt="">
    
    <div class="quote-content">
      <quoteblock class="quote-text">
        Some text. Many many text. Man man many text.
        Many many text. Many many text. Mny nany tny text.
      </quoteblock>
      
      <div class="quote-signatur">
        <div class="quote-signature-post">Trainer:</div>  
        <div class="quote-signature-name">Laura Harad</div>
      </div>
    </div>
    
    <div class="quote-trash">
      <div class="qoute-trash-button">&gt;</div>
      <img class="qoute-trash-photo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/6f131d22-7974-4793-9db3-2160376b5c72/d9kmnxu-43ae474c-27a1-424c-993c-e2cbb705eb6e.jpg/v1/fill/w_1196,h_668,q_70,strp/guard_by_wlop_d9kmnxu-pre.jpg" alt="">
      <div class="qoute-trash-signature">
        <div class="quote-trash-signature-post">Trainer:</div>  
        <div class="quote-trash-signature-name">Lara Croft</div>
      </div>
      <div class="qoute-trash-button">&gt;</div>
    </div>
    
  </div>
  
  
</div>

1

Ваш ответ

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

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