Как из этого сделать это? Какие свойства использовать?

Question

Какие свойства нужны чтобы нормально расположить текста?

<section class="service">
        <div class="container">
            <div class="service_title">OUR CAPABILITIES</div>
            <div class="service_line"></div>
            <div class="service_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
            <button class="allservices"><span>ALL SERVICES</span></button>
            <div class="service_card">
                <img src="img/Bitmap.png" alt="bitmap" class="service_img">
                <div class="service_cardtitle">PROJECT AND CONSTRUCTION MANAGEMENT</div>
                <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
                <img src="img/Bitmap2.png" alt="bitmap2" class="service_img">
                <div class="service_cardtitle">STRUCTURE AUDIT AND MAINTENANCE</div>
                <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
                <img src="img/Bitmap3.png" alt="bitmap3" class="service_img">
                <div class="service_cardtitle">FACTORY CONSTRUCTION AND MODELING</div>
                <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
            </div>
        </div>
    </section>

.service {
    min-height: 446px;
    margin-top: 106px;
}

.service_title {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 2.30625px;
    color: #48555B;
}

.service_line {
    display: block;
    width: 50px;
    height: 2px;
    background-color: #00a4e5;
    margin-top: 10px; 
}

.service_text {
    position: absolute;
    width: 405.4px;
    height: 38px;
    left: 353px;
    top: 0px;
    margin: 0 auto;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    letter-spacing: 0.2px;
    color: #48555B;
}

.allservices {
    position: absolute;
    width: 150px;
    height: 40px;
    right: 0px;
    top: 0px;
    background: #00A4E5;
    border: none;
    cursor: pointer;
    outline: none;
}

.allservices span {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.service_card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 295px;
    border: 1px solid #e6e6e6;
    margin-top: 80px;
    padding-left: 28px;
}

.service_cardtitle {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.426667px;
    color: #48555B;
    text-align: left;
}

.service_cardtext {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: 0.1875px;
    color: #48555B;
}

Answer 1

так устроит? я бы конечно от position: absolute по возможности избавился бы, хотя бы для центрального текста

body {
    padding:      0px;
}

.service {
    position:     relative;
    
    border:       2px solid #00a4e5;
}

.service_title {
    font-family:    Open Sans;
    font-style:     normal;
    font-weight:    bold;
    font-size:      18px;
    line-height:    25px;
    letter-spacing: 2.30625px;
    color:          #48555B;
}

.service_line {
    display:          block;
    width:            50px;
    height            2px;
    background-color: #00a4e5;
    margin-top:       10px; 
}

.service_text {
    position:         absolute;
    left:             353px;
    top:              0px;

    width:            405.4px;
    height:           38px;

    margin:           0 auto;
    font-family:      Open Sans;
    font-style:       normal;
    font-weight:      normal;
    font-size:        11px;
    line-height:      19px;
    letter-spacing:   0.2px;
    color:            #48555B;
}

.allservices {
    position:         absolute;
    right:            0px;
    top:              0px;

    width:            150px;
    height:           40px;
    
    background:       #00A4E5;
    border:           none;
    cursor:           pointer;
    outline:          none;
}

.allservices span {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.service_cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.service_card {
    width: calc(100% / 3 - 75px);
    border: 1px solid #e6e6e6;
    margin-top: 80px;
    padding: 30px 28px 30px 28px;
}

.service_card_img {
    display:  block;
    width:    50px;
    height:   50px;
    border:   1px solid #d0d0d0;
    margin-bottom:  20px;
}

.service_cardtitle {
    margin-bottom:  20px;

font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.426667px;
    color: #48555B;
    text-align: left;
}

.service_cardtext {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: 0.1875px;
    color: #48555B;
}

<section class="service">
  <div class="container">
    <div class="service_title">OUR CAPABILITIES</div>
    <div class="service_line"></div>
    <div class="service_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
    <button class="allservices"><span>ALL SERVICES</span></button>
    <div class="service_cards">
      <div class="service_card">    
        <img class="service_card_img" src="img/Bitmap.png" alt="bitmap" class="service_img">
        <div class="service_cardtitle">PROJECT AND CONSTRUCTION MANAGEMENT</div>
        <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
      </div>
      <div class="service_card">
        <img class="service_card_img" src="img/Bitmap2.png" alt="bitmap2" class="service_img">
        <div class="service_cardtitle">STRUCTURE AUDIT AND MAINTENANCE</div>
        <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
      </div>
      <div class="service_card">
        <img class="service_card_img" src="img/Bitmap3.png" alt="bitmap3" class="service_img">
        <div class="service_cardtitle">FACTORY CONSTRUCTION AND MODELING</div>
        <div class="service_cardtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Как из этого сделать это? Какие свойства использовать?

Ответы (1 шт):