Mudanças entre as edições de "Widget:Teste2"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="changelog-container">
<div class="news-card">
<!-- Card Evento Temporário: Fist of Love -->
<div class="news-image-container">
<div class="changelog-card">
<img src="URL_DA_IMAGEM" class="news-image">
  <div class="changelog-content">
    <div class="changelog-title">Evento Temporário</div>
    <div class="changelog-sub">Fist of Love: 11 a 24 de abril</div>
    <div class="changelog-date">09/04/2025</div>
  </div>
  <div class="changelog-icon">
    <a href="LINK_DO_EVENTO_FIST_OF_LOVE" target="_blank">
      <img src="URL_DO_ICONE_EVENTO">
    </a>
  </div>
</div>
</div>
 
<div class="news-info">
<!-- Card Informativos: Ranqueada, Records e Ajustes -->
<div class="news-meta">TESTE 01.04.2025</div>
<div class="changelog-card">
<h2 class="news-title">TESTE</h2>
  <div class="changelog-content">
<p class="news-desc">
    <div class="changelog-title">INFORMATIVOS</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum nibh lorem. Aenean pharetra ex et
    <div class="changelog-sub">Ranqueada, Records e Ajustes</div>
eros luctus congue. Pellentesque neque tellus, interdum non volutpat vitae, vulputate eget eros.
    <div class="changelog-date">09/04/2025</div>
</p>
  </div>
  <div class="changelog-icon">
    <a href="LINK_DOS_INFORMATIVOS" target="_blank">
      <img src="URL_DO_ICONE_INFORMATIVOS">
    </a>
  </div>
</div>
</div>
</div>
</div>


<style>
<style>
.changelog-container {
.news-card {
  display: flex;
width: 100%;
  flex-direction: column;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 16px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
}
.changelog-card {
 
  display: flex;
.news-image-container {
  justify-content: space-between;
width: 100%;
  align-items: center;
height: 180px;
  background: #fff;
overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
}
.changelog-content {
 
  display: flex;
.news-image {
  flex-direction: column;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.changelog-title {
 
  font-size: 110%;
.news-info {
  font-weight: bold;
padding: 10px 14px;
  color: #333;
  margin-bottom: 4px;
}
}
.changelog-sub {
 
  font-size: 90%;
.news-meta {
  color: #666;
font-size: 90%;
  margin-bottom: 8px;
color: #888;
margin-bottom: 4px;
}
}
.changelog-date {
 
  font-size: 90%;
.news-title {
  color: #999;
font-size: 1em;
color: #333;
margin: 4px 0;
font-weight: bold;
}
}
.changelog-icon img {
 
  height: 60px;
.news-desc {
  width: auto;
font-size: 0.9em;
  border-radius: 50%;
color: #555;
line-height: 1.4;
margin: 6px 0 0 0;
}
}
</style>
</style>

Edição das 22h53min de 12 de abril de 2025

<img src="URL_DA_IMAGEM" class="news-image">

TESTE 01.04.2025

TESTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum nibh lorem. Aenean pharetra ex et eros luctus congue. Pellentesque neque tellus, interdum non volutpat vitae, vulputate eget eros.

<style> .news-card { width: 100%; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 16px; overflow: hidden; background: #fff; box-sizing: border-box; }

.news-image-container { width: 100%; height: 180px; overflow: hidden; }

.news-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-info { padding: 10px 14px; }

.news-meta { font-size: 90%; color: #888; margin-bottom: 4px; }

.news-title { font-size: 1em; color: #333; margin: 4px 0; font-weight: bold; }

.news-desc { font-size: 0.9em; color: #555; line-height: 1.4; margin: 6px 0 0 0; } </style>