Mudanças entre as edições de "Widget:Teste2"
| Linha 1: | Linha 1: | ||
<div class="notice-item"> | <div class="notice-item"> | ||
<div class="notice-content"> | <div class="notice-content"> | ||
< | <a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a> | ||
<div class="notice-date">21.04.2025</div> | |||
<div class="notice-date"> | <p class="notice-desc"> | ||
< | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
</p> | |||
< | |||
</div> | </div> | ||
<img src="URL_DO_ICONE" class="notice-icon"> | |||
</div> | </div> | ||
<div class="notice-item"> | <div class="notice-item"> | ||
<div class="notice-content"> | <div class="notice-content"> | ||
< | <a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a> | ||
<div class="notice-date">21.04.2025</div> | |||
<div class="notice-date"> | <p class="notice-desc"> | ||
< | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
</p> | |||
< | |||
</div> | </div> | ||
<img src="URL_DO_ICONE" class="notice-icon"> | |||
</div> | </div> | ||
<div class="notice-item"> | <div class="notice-item"> | ||
<div class="notice-content"> | <div class="notice-content"> | ||
< | <a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a> | ||
<div class="notice-date">21.04.2025</div> | |||
<div class="notice-date"> | <p class="notice-desc"> | ||
</div> | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
< | </p> | ||
</ | |||
</div> | </div> | ||
<img src="URL_DO_ICONE" class="notice-icon"> | |||
</div> | </div> | ||
<style> | <style> | ||
.notice-item { | .notice-item { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
border-left: 5px solid #f5b700; | border-left: 5px solid #f5b700; | ||
padding: 8px; | |||
margin-bottom: 10px; | margin-bottom: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.notice-content { | .notice-content { | ||
flex: 1; | flex: 1; | ||
margin-right: | margin-right: 8px; | ||
} | } | ||
.notice- | .notice-title { | ||
font-size: 1em; | font-size: 1em; | ||
font-weight: bold; | font-weight: bold; | ||
color: #333; | color: #333; | ||
margin: 0 | text-decoration: none; | ||
display: block; | |||
margin: 0; | |||
} | |||
.notice-title:hover { | |||
text-decoration: underline; | |||
} | } | ||
.notice- | .notice-date { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: # | color: #888; | ||
margin: | margin: 4px 0; | ||
} | } | ||
.notice- | .notice-desc { | ||
font-size: 0. | font-size: 0.9em; | ||
color: # | color: #555; | ||
line-height: 1.3; | |||
margin: 0; | margin: 0; | ||
} | } | ||
.notice-icon | .notice-icon { | ||
width: | width: 32px; | ||
height: | height: 32px; | ||
flex-shrink: 0; | |||
} | } | ||
</style> | </style> | ||
Edição das 04h57min de 13 de abril de 2025
<a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="URL_DO_ICONE" class="notice-icon">
<a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="URL_DO_ICONE" class="notice-icon">
<a href="LINK_INFORMATIVOS" class="notice-title">Informativos</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="URL_DO_ICONE" class="notice-icon">
<style> .notice-item { display: flex; align-items: center; border-left: 5px solid #f5b700; padding: 8px; margin-bottom: 10px; box-sizing: border-box; }
.notice-content { flex: 1; margin-right: 8px; }
.notice-title { font-size: 1em; font-weight: bold; color: #333; text-decoration: none; display: block; margin: 0; }
.notice-title:hover { text-decoration: underline; }
.notice-date { font-size: 0.9em; color: #888; margin: 4px 0; }
.notice-desc { font-size: 0.9em; color: #555; line-height: 1.3; margin: 0; }
.notice-icon { width: 32px; height: 32px; flex-shrink: 0; } </style>