Listagem de Notícias Otimizada para Experiência do Usuário

by francisco_negrao

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<body>

  <div class="container">

    <div class="highlights">

      <div class="label">
      
        <h1>
          Destaques da Únicos
        </h1>
        
      </div>
      
        <div class="row">
        
         <div class="col-lg-4 col-6">
           
            <div class="highLightBox">
              <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/6/mc/Empreendimento%20-%20Residencial%20Giulia//UNICOS_GIULIA_FACHADA_F2" />
              <h3>
                Lançamento empreendimento Residencial Giulia
              </h3>
              <p class="articleDsc">
                O Residencial Giulia é um novo empreendimento vertical da Únicos. Apartamentos para comprar em São José do Rio Preto perto da Unilago, Aeroporto e mais.
              </p>
              <p class="dateInfo">
                Em 04 de março de 2022 às 11h30 - Atualizado em 20/03/2022 às 15h30
              </p>
              <p class="authorInfo">
                Únicos Construtora e Urbanismo
              </p>
              <p class="articleTag">
                #lançamentos
              </p>
            </div>
           
         </div> <!--4-->
         
         <div class="col-lg-4 col-6">
           
            <div class="highLightBox">
              <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/6/mc/Empreendimento%20-%20Residencial%20Giulia//UNICOS_GIULIA_FACHADA_F2" />
              <h3>
                Lançamento empreendimento Residencial Giulia
              </h3>
              <p class="articleDsc">
                O Residencial Giulia é um novo empreendimento vertical da Únicos. Apartamentos para comprar em São José do Rio Preto perto da Unilago, Aeroporto e mais.
              </p>
              <p class="dateInfo">
                Em...

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
}

.highlights .row .col-6 {
  width: 48%;
}

@media (min-width: 992px) {

.highlights .row .col-lg-4 {
  width: 31%;
}

}

/* width */
.highlights .row::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */
.highlights .row::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.highlights .row::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.highlights .row::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.highlights .row {
    overflow-x: auto;
    display: flex;
    padding-bottom: 15px;
    flex-wrap: nowrap;
}

.highLightBox img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.highLightBox h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
}

.highLightBox .articleDsc {
    font-weight: 400;
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.highLightBox .dateInfo {
  font-size: 13px;
  color: #777;
}

.highLightBox .authorInfo {
  font-weight: 500;
  color: #2386c7;
  font-size: 16px;
  margin: 0px;
}

.highLightBox .articleTag {
  font-weight: 500;
  color: #2386c7;
  font-size: 14px;
  margin: 0px;
}

.label {
    margin-bottom: 30px;
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
    margin-top: 30px;
    position: relative;
}

.label:after {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    background-color: #2386c7;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 3px;
}

.label h1 {
  font-size: 22px;
  margin: 0px 0px 0px 10px;
}

.articleBox {
  display: flex;
  gap: 15px;
  padding-block: 15px;
  border-bottom: solid 1px #eee;
}

.articleBox .articleDsc {
  font-weight:...