Newsletter - SEH.html
última modificação
27/02/2025 15h44
Newsletter - SEH.html
— 12 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UFOB Segurança no Elemento Humano</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* background-color: #ffffff; */
}
/* Container externo */
.outer-container {
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(#723d8c, #f7f7f7);
box-sizing: border-box;
}
/* Container interno com gradiente simulando sombra */
.container {
/* width: 100%; */
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #ffffff;
border-radius: 5px;
border: 2px solid #dcdcdc;
}
.contador h1 {
width: 100%;
padding: 1px;
top: -5px;
left: 900px;
color: #f7f7f7;
font-size: 12px;
}
/* Estilo para a imagem de capa */
.header {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: auto; /* Permite que a altura se ajuste proporcionalmente */
}
.header img {
width: 100%; /* A imagem ocupa 100% da largura do container */
height: 100%; /* Mantém a proporção da imagem */
border-radius: 5px 5px 0 0;
}
.header h1 {
position: absolute;
bottom: 10%; /* Ajusta o texto 10% acima da borda inferior */
left: 50%; /* Centraliza horizontalmente */
transform: translateX(-50%);
font-style: italic;
color: #c7cdfd;
font-size: 12px;
margin: 0;
text-shadow: 1px 1px 4px #000; /* Adiciona contraste ao texto */
}
.content {
padding: 20px;
}
.news-item {
margin-bottom: 20px;
}
.news-item img {
width: 100%;
border-radius: 5px;
}
.news-item h3 {
font-size: 18px;
color: #333333;
margin: 10px 0 5px;
}
.news-item h4 {
text-align: center;
font-size: 20px;
color: #333333;
margin: 20px;
}
.news-item p {
text-align: justify;
font-size: 16px;
color: #666666;
line-height: 1.5;
}
.news-item a{
text-decoration: none;
}
/* Itens menores */
.small-news {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.small-news img {
width: 30%;
max-width: 100%;
height: 30%;
border-radius: 5px;
margin-right: 15px;
}
.small-news a {
text-decoration: none;
}
.small-news h4 {
font-size: 16px;
color: #333333;
margin: 0 0 5px;
}
.small-news p {
font-size: 14px;
color: #666666;
margin: 0;
}
.note {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.note a {
text-decoration: none;
}
.note img {
width: 10%;
height: 10%;
border-radius: 5px;
margin-right: 20px;
}
.note h4 {
font-size: 16px;
color: #333333;
margin: 0 0 5px;
}
.note p {
font-size: 14px;
color: #666666;
margin: 0;
}
.button-container {
text-align: right;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #723d8c;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.footer {
background-image: url('https://ufob.edu.br/newsletter/arquivos/campanhas/baseseh.png');
background-size: cover;
background-position: center;
height: 100px;
text-align: center;
color: #ffffff;
padding: 10px 0;
border-radius: 0 0 5px 5px;
}
.social-icons {
margin-top: 60px;
}
.social-icons a {
display: inline-block;
margin: 0 10px;
}
.social-icons img {
width: 30px;
height: 30px;
border-radius: 50%;
transition: transform 0.3s ease;
}
.social-icons a:hover img {
transform: scale(1.1);
}
@media screen and (max-width: 820px) {
.outer-container {
max-width: 100%;
}
.contador {
max-width: 80%;
}
.container {
max-width: 90%;
}
.small-news, .note {
display: block;
flex-direction: column; /* Empilha os elementos */
text-align: left; /* Centraliza o texto */
}
.small-news h4 {
margin: 10px 0 5px;
}
.small-news img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
margin: auto;
}
.note img {
display: block;
width: 30%;
height: 30%;
margin: 0 auto;
}
}
</style>
</head>
<body>
<!-- Container externo -->
<div class="outer-container">
<div class="contador">
<h1>NEWSLETTER SEH - Nº 1</h1>
</div>
<!-- Container interno com gradiente para sombra -->
<div class="container">
<div class="header">
<img src="https://ufob.edu.br/newsletter/arquivos/campanhas/topseh.png" alt="Topo do Ensino">
</div>
<div class="content">
<hr>
<!-- Notícia 1 -->
<div class="news-item">
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informes/configuracoes-de-privacidade-em-redes-sociais" target="_blank">
<img src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informes/configuracoes-de-privacidade-em-redes-sociais/e-mail-01-configuracoes-de-privacidade-em-redes-sociais.jpg/@@images/f4022e4f-e594-4baf-b2f8-a573f0f87d4f.jpeg" alt="Imagem da Notícia 1">
<h4>Configurações de Privacidade em Redes Sociais</h4>
<p>Você sabia que suas informações pessoais podem estar mais expostas do que você imagina nas redes sociais? Com o aumento da conectividade, é essencial estar atento às configurações de privacidade para garantir que seus dados pessoais estejam protegidos...</p>
</a>
</div>
<hr>
<!-- Itens menores -->
<div class="small-news">
<img src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/redes_sociais/como-evitar-exposicao-excessiva-de-informacoes/e-mail-02-como-evitar-exposicao-excessiva-de-informacoes.jpg/@@images/1dff9989-973c-46b3-811a-83420a8b9c53.jpeg" alt="Imagem da Notícia 1">
<div>
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/redes_sociais/como-evitar-exposicao-excessiva-de-informacoes" target="_blank">
<h4>Evite a Exposição Excessiva nas Redes Sociais – Cuide das Suas Informações</h4>
<p>Você já parou para pensar sobre as informações que compartilha nas redes sociais? Embora a conectividade seja desejável, é importante ter cuidado para não expor dados demais. Aqui estão algumas práticas recomendadas para proteger sua privacidade online...</p>
</a>
</div>
</div>
<div class="small-news">
<img src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/redes_sociais/reconhecimento-de-golpes-e-fraudes-em-redes-sociais/e-mail-03-reconhecimento-de-golpes-e-fraudes-em-redes-sociais.jpg/@@images/4628d9c1-dfd6-4686-9292-5723d3c89b31.jpeg" alt="Notícia 1">
<div>
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/redes_sociais/reconhecimento-de-golpes-e-fraudes-em-redes-sociais" target="_blank">
<h4>Reconhecimento de Golpes e Fraudes em Redes Sociais</h4>
<p>Golpes e fraudes nas redes sociais estão se tornando cada vez mais sofisticados. Para proteger suas informações pessoais e acadêmicas, é essencial saber como identificar possíveis fraudes. Veja como se proteger...</p>
</a>
</div>
</a>
</div>
<div class="small-news">
<img src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informes/cuidados-com-perfis-falsos/e-mail-04-cuidados-com-perfis-falsos.jpg/@@images/734e9a1f-f511-4e8d-b638-42e07d4f502e.jpeg" alt="Notícia 2">
<div>
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informes/cuidados-com-perfis-falsos" target="_blank">
<h4>Cuidados com Perfis Falsos</h4>
<p>Perfis falsos são uma ameaça crescente nas redes sociais. Eles podem ser usados para obter informações pessoais ou enganar você. Aqui estão algumas dicas para evitar cair em golpes...</p>
</a>
</div>
</div>
<!-- <div class="small-news">
<img src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/prograd/informes/ufob-abre-portas-para-intercambio-academico-nacional-no-semestre-2025.2/2719ae7c-b740-4b4a-9eef-b160d917df2d-1.png/@@images/db1efc30-c1a9-41e9-a607-be52b1913540.png" alt="Notícia 3">
<div>
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/prograd/informes/ufob-abre-portas-para-intercambio-academico-nacional-no-semestre-2025.2" target="_blank">
<h4>Programa de Mobilidade Acadêmica Nacional disponibiliza oportunidades para estudantes</h4>
<p>O Programa de Mobilidade Acadêmica Nacional UFOB está com edital aberto para estudantes da UFOB que desejam cursar um ou dois semestres de sua graduação noutra Instituição federal de Ensino Superior brasileira no semestre 2025.2.</p>
</a>
</div>
</div> -->
<hr>
<!-- <div class = "note">
<img src="https://ufob.edu.br/newsletter/arquivos/gestao-de-pessoas/megafone.png" alt="Notícia 4">
<div>
<a href="https://ufob.edu.br/progep" target="_blank">
<h4>ATENÇÃO!</h4>
<p>O pagamento da folha do próximo mês está previsto para o dia 5 de março, quarta-feira de cinzas. Conforme a Resolução CMN nº 4.880/2020, os feriados e pontos facultativos afetam o processamento bancário. Fique atento. Caso haja alteração na data do pagamento, informaremos pelos canais oficiais.
</p>
</a>
</div>
</div> -->
<!-- Botão alinhado à direita -->
<div class="button-container">
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informes" class="button">Leia Mais Notícias</a>
</div>
</div>
<!-- Rodapé com ícones de redes sociais -->
<div class="footer">
</div>
</div>
</div>
</body>
</html>
Todo o conteúdo deste site está publicado sob a licença Creative Commons Atribuição-SemDerivações 3.0 Não Adaptada.