|
|
| (38 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| <a href="LINK_DA_PAGINA" class="news-card-link">
| |
| <div class="news-card">
| |
| <div class="news-image-container">
| |
| <img src="URL_DA_IMAGEM" class="news-image">
| |
| </div>
| |
| <div class="news-info">
| |
| <div class="news-header">
| |
| <div class="news-title">Informativos</div>
| |
| <span class="news-date">21.04.2025</span>
| |
| </div>
| |
| <p class="news-desc">
| |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| </p>
| |
| </div>
| |
| </div>
| |
| </a>
| |
|
| |
| <a href="LINK_DA_PAGINA" class="news-card-link">
| |
| <div class="news-card">
| |
| <div class="news-image-container">
| |
| <img src="URL_DA_IMAGEM" class="news-image">
| |
| </div>
| |
| <div class="news-info">
| |
| <div class="news-header">
| |
| <div class="news-title">Informativos</div>
| |
| <span class="news-date">21.04.2025</span>
| |
| </div>
| |
| <p class="news-desc">
| |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| </p>
| |
| </div>
| |
| </div>
| |
| </a>
| |
|
| |
| <a href="LINK_DA_PAGINA" class="news-card-link">
| |
| <div class="news-card">
| |
| <div class="news-image-container">
| |
| <img src="URL_DA_IMAGEM" class="news-image">
| |
| </div>
| |
| <div class="news-info">
| |
| <div class="news-header">
| |
| <div class="news-title">Informativos</div>
| |
| <span class="news-date">21.04.2025</span>
| |
| </div>
| |
| <p class="news-desc">
| |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| </p>
| |
| </div>
| |
| </div>
| |
| </a>
| |
|
| |
| <style> | | <style> |
| .news-card-link {
| | body::before { |
| text-decoration: none;
| | content: ''; |
| color: inherit;
| | position: fixed; |
| display: block;
| | top: 0; |
| max-width: 600px;
| | left: 0; |
| margin: 0 auto;
| | width: 100%; |
| box-sizing: border-box;
| | height: 100vh; |
| }
| | background: url('https://wiki.gla.com.br/images/b/b3/Testefundo.png') no-repeat; |
| | | filter: brightness(0.6); |
| .news-card-link .news-title {
| | |
| text-decoration: underline;
| | background-attachment: fixed; |
| }
| | background-position: center; |
| | | background-repeat: no-repeat; |
| .news-card-link:hover .news-title {
| | background-size: cover; |
| text-decoration: underline;
| | z-index: -1; |
| }
| |
| | |
| .news-card-link .news-date,
| |
| .news-card-link .news-desc {
| |
| text-decoration: none;
| |
| }
| |
| | |
| .news-card {
| |
| border: 1px solid #ddd;
| |
| border-radius: 6px;
| |
| margin-bottom: 16px;
| |
| overflow: hidden;
| |
| background: #fff;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .news-image-container {
| |
| width: 100%; | |
| height: 120px; | |
| overflow: hidden;
| |
| }
| |
| | |
| .news-image { | |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| display: block;
| |
| }
| |
| | |
| .news-info { | |
| padding: 10px 14px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .news-header {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .news-title {
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| color: #333;
| |
| margin: 0;
| |
| }
| |
| | |
| .news-date {
| |
| font-size: 0.9em;
| |
| color: #888;
| |
| margin-left: 10px;
| |
| }
| |
| | |
| .news-desc {
| |
| font-size: 0.9em;
| |
| color: #555;
| |
| line-height: 1.4;
| |
| margin: 0;
| |
| } | | } |
| </style> | | </style> |
