Sessão Heróica Estilo 02 - Comp. Interago

Sessão para website com texto, missão, visão e valores e imagem de ilustração

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<section class="py-5 iSessionHero2">

<div class="container">
  <div class="row">
  
<!-- Column First -->

    <div class="col-lg-7 col-12">
      <div class="sessionInfo">
        <h1>
          Sobre nossa empresa
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        </p>
        <!-- List with Styled Info -->
        <ul>
          <li>
            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon feather-target.svg" width="50" height="50" alt="Ícone Alvo Missão" loading="lazy" />
            <div class="dsc">
                <p>
                  <strong>Missão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
                    <li>
            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-flag.svg" width="50" height="50" alt="Ícone Bandeira Visão" loading="lazy" />
            <div class="dsc">
                <p>
                 ...

CSS

body {
  height: 3000px;
  background-color: #000;
  margin: 0px;
  font-family: 'Futura Bk BT';
}

/* CSS SOBRE SESSÃO HERÓICA */

.iSessionHero2 {
  background-color: #163d4f;
  color: #fff;
}

.iSessionHero2 h1 {
    font-size: 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
}

.iSessionHero2 h1:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 100%;
    background-color: #00ADEF;
    position: absolute;
    left: -20px;
}

.iSessionHero2 ul {
  display: flex;
  gap: 20px;
}

.iSessionHero2 ul li {
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    background-color: #225166;
    box-shadow: 10px 10px 20px #00000014;
}

.iSessionHero2 ul li img {
  filter: brightness(0) invert(1);
}

.iSessionHero2 .sessionImg {
  height: 100%;
}

.iSessionHero2 .sessionImg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-shadow: 10px 20px 40px #00000029;
}

.iSessionHero2 .dsc p {
  font-size: 14px;
}

.iSessionHero2 .dsc p strong {
  font-size: 16px;
}

/* MOBILE SECTION CORRECTION */

@media (max-width: 992px) {
  .iSessionHero2 .col-12:nth-child(1) {
    order: 2;
  }
  .iSessionHero2 .col-12:nth-child(1) {
    order: 1;
  }
  .iSessionHero2 h1 {
    font-size: 20px;
  }
  .iSessionHero2 ul {
    gap: 20px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  .iSessionHero2 ul li {
    white-space: normal;
    margin-bottom: 15px;
    scroll-snap-align: center;
  }
  .iSessionHero2 .dsc {
    width: 250px;
  }
   
    /* width */
  .iSessionHero2 ul::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  /* Track */
  .iSessionHero2 ul::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  .iSessionHero2 ul::-webkit-scrollbar-thumb {
    background: #888;
  }

  /* Handle on hover */
  .iSessionHero2...