Scribd
Upload
7 views16 pages

Uni

O documento descreve a criação de um site completo para a University Network, que incluirá seções para professores, assistentes e atendimento, além de ser responsivo e visualmente atraente. O código HTML e CSS fornecido detalha a estrutura e o estilo do site, incluindo navegação, seções de recursos, pontuação, equipe e um modal de contato. O design é focado em uma experiência de usuário otimizada, com elementos interativos e responsivos para diferentes dispositivos.

Uploaded by

Liter Lamark 19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views16 pages

Uni

O documento descreve a criação de um site completo para a University Network, que incluirá seções para professores, assistentes e atendimento, além de ser responsivo e visualmente atraente. O código HTML e CSS fornecido detalha a estrutura e o estilo do site, incluindo navegação, seções de recursos, pontuação, equipe e um modal de contato. O design é focado em uma experiência de usuário otimizada, com elementos interativos e responsivos para diferentes dispositivos.

Uploaded by

Liter Lamark 19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

Vou criar um site completo para a University Network, incluindo as novas seções

que você solicitou: professores, assistentes e atendimento. O site será responsivo


e visualmente atraente.

```
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Network - Valorizando Estudantes</title>
<style>
/* Reset e estilos gerais */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}

/* Estilos de Navegação */
nav {
background-color: #2c3e50;
padding: 15px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
color: #fff;
font-size: 24px;
font-weight: bold;
display: flex;
align-items: center;
}

.logo span {
color: #3498db;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin-left: 20px;
}

.nav-links a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
font-weight: 500;
}

.nav-links a:hover {
color: #3498db;
}

.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}

.bar {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.4s;
}

/* Seção Hero */
.hero {
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80,
0.7)), url('/api/placeholder/1200/600') no-repeat center center;
background-size: cover;
padding: 100px 0;
color: white;
text-align: center;
}

.hero h1 {
font-size: 48px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
font-size: 20px;
max-width: 700px;
margin: 0 auto 30px;
}

.btn {
display: inline-block;
padding: 12px 30px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
}

.btn:hover {
background-color: #2980b9;
}

/* Seção Features */
.features {
padding: 80px 0;
background: #fff;
}

.section-title {
text-align: center;
font-size: 36px;
margin-bottom: 60px;
color: #2c3e50;
position: relative;
}

.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: #3498db;
margin: 15px auto 0;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.feature-card {
background: #f9f9f9;
border-radius: 8px;
padding: 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.feature-icon {
background-color: #3498db;
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 30px;
}

.feature-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: #2c3e50;
}

/* Seções de Pessoas (Equipe, Professores, Assistentes) */


.team, .professors, .assistants {
padding: 80px 0;
}

.team {
background-color: #f5f7fa;
}

.professors {
background-color: #fff;
}

.assistants {
background-color: #f5f7fa;
}

.people-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}

.people-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

.people-card:hover {
transform: translateY(-10px);
}

.people-img {
width: 100%;
height: 250px;
object-fit: cover;
}

.people-info {
padding: 20px;
text-align: center;
}

.people-info h3 {
font-size: 20px;
margin-bottom: 5px;
color: #2c3e50;
}

.people-info p {
color: #7f8c8d;
margin-bottom: 15px;
}

.social-links {
display: flex;
justify-content: center;
gap: 15px;
}

.social-link {
color: #3498db;
font-size: 18px;
transition: color 0.3s;
}

.social-link:hover {
color: #2980b9;
}

/* Seção de Atendimento */
.support {
padding: 80px 0;
background-color: #fff;
}

.support-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.support-card {
background: #f5f7fa;
border-radius: 8px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s;
}

.support-card:hover {
transform: translateY(-10px);
}
.support-icon {
font-size: 40px;
color: #3498db;
margin-bottom: 20px;
}

.support-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: #2c3e50;
}

/* Seção Pontuação */
.score-section {
padding: 80px 0;
background: linear-gradient(135deg, #3498db, #2c3e50);
color: white;
text-align: center;
}

.score-section h2 {
color: white;
margin-bottom: 40px;
}

.score-section h2::after {
background: white;
}

.score-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}

.score-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.score-number {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}

.score-card h3 {
font-size: 22px;
margin-bottom: 15px;
}

/* Seção Login/Cadastro */
.auth-section {
padding: 80px 0;
background-color: #fff;
}
.auth-container {
display: flex;
justify-content: space-between;
gap: 40px;
max-width: 900px;
margin: 0 auto;
}

.auth-box {
flex: 1;
background: #f5f7fa;
border-radius: 8px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.auth-box h2 {
text-align: center;
font-size: 24px;
margin-bottom: 25px;
color: #2c3e50;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}

.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}

.form-control:focus {
border-color: #3498db;
outline: none;
}

.btn-block {
display: block;
width: 100%;
margin-top: 10px;
}

/* Footer */
footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 40px 0 20px;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 30px;
}

.footer-column h3 {
font-size: 20px;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}

.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background: #3498db;
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s;
}

.footer-links a:hover {
color: #3498db;
}

.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #34495e;
}

/* Modal de Contato */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
}

.modal-content {
background-color: #fff;
margin: 10% auto;
padding: 30px;
border-radius: 8px;
max-width: 500px;
animation: modalOpen 0.4s;
}

@keyframes modalOpen {
from {opacity: 0; transform: translateY(-50px);}
to {opacity: 1; transform: translateY(0);}
}

.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.close-btn:hover {
color: #333;
}

/* Responsividade */
@media (max-width: 768px) {
.menu-toggle {
display: flex;
}

.nav-links {
position: absolute;
top: 70px;
left: 0;
background: #2c3e50;
width: 100%;
flex-direction: column;
align-items: center;
padding: 20px 0;
transform: translateY(-150%);
transition: transform 0.4s ease;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
z-index: 99;
}

.nav-links.active {
transform: translateY(0);
}

.nav-links li {
margin: 15px 0;
}
.hero h1 {
font-size: 32px;
}

.hero p {
font-size: 18px;
}

.auth-container {
flex-direction: column;
}

.section-title {
font-size: 28px;
}
}

@media (max-width: 500px) {


.hero h1 {
font-size: 26px;
}

.section-title {
font-size: 24px;
}

.score-number {
font-size: 36px;
}
}
</style>
</head>
<body>
<!-- Navegação -->
<nav>
<div class="container nav-container">
<div class="logo">University<span>Network</span></div>
<div class="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul class="nav-links">
<li><a href="#inicio">Início</a></li>
<li><a href="#recursos">Recursos</a></li>
<li><a href="#pontuacao">Pontuação</a></li>
<li><a href="#equipe">Equipe</a></li>
<li><a href="#professores">Professores</a></li>
<li><a href="#assistentes">Assistentes</a></li>
<li><a href="#atendimento">Atendimento</a></li>
<li><a href="#entrar" class="btn">Entrar</a></li>
</ul>
</div>
</nav>

<!-- Seção Hero -->


<section class="hero" id="inicio">
<div class="container">
<h1>Conectando Estudantes, Valorizando Conhecimento</h1>
<p>A University Network é a plataforma que reconhece e premia seu
desempenho acadêmico, conectando você aos melhores recursos e oportunidades.</p>
<a href="#cadastro" class="btn">Comece Agora</a>
</div>
</section>

<!-- Recursos -->


<section class="features" id="recursos">
<div class="container">
<h2 class="section-title">Nossos Recursos</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🏆</div>
<h3>Sistema de Pontuação</h3>
<p>Ganhe pontos por suas conquistas acadêmicas e troque-os por
benefícios exclusivos na plataforma.</p>
</div>
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>Comunidade Ativa</h3>
<p>Conecte-se com outros estudantes, participe de grupos de
estudo e expanda sua rede profissional.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📚</div>
<h3>Recursos Educacionais</h3>
<p>Acesse uma biblioteca completa de materiais de estudo,
tutoriais e cursos exclusivos.</p>
</div>
</div>
</div>
</section>

<!-- Sistema de Pontuação -->


<section class="score-section" id="pontuacao">
<div class="container">
<h2 class="section-title">Valorizamos seu Desempenho</h2>
<div class="score-cards">
<div class="score-card">
<div class="score-number">500</div>
<h3>Pontos por Projeto</h3>
<p>Ganhe pontos ao concluir projetos e atividades
acadêmicas</p>
</div>
<div class="score-card">
<div class="score-number">200</div>
<h3>Pontos por Curso</h3>
<p>Acumule pontos ao completar cursos em nossa plataforma</p>
</div>
<div class="score-card">
<div class="score-number">1000</div>
<h3>Pontos por Semestre</h3>
<p>Recompensas especiais para alunos de destaque no
semestre</p>
</div>
</div>
</div>
</section>
<!-- Equipe -->
<section class="team" id="equipe">
<div class="container">
<h2 class="section-title">Nossa Equipe</h2>
<div class="people-grid">
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Ana Silva"
class="people-img">
<div class="people-info">
<h3>Ana Silva</h3>
<p>Fundadora & CEO</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">💼</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Carlos Mendes"
class="people-img">
<div class="people-info">
<h3>Carlos Mendes</h3>
<p>Diretor de Tecnologia</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">💼</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Marina Costa"
class="people-img">
<div class="people-info">
<h3>Marina Costa</h3>
<p>Coord. Pedagógica</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">💼</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Rafael
Oliveira" class="people-img">
<div class="people-info">
<h3>Rafael Oliveira</h3>
<p>Dev. de Parceiros</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">💼</a>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Professores -->


<section class="professors" id="professores">
<div class="container">
<h2 class="section-title">Nossos Professores</h2>
<div class="people-grid">
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto do Prof. Ricardo
Santos" class="people-img">
<div class="people-info">
<h3>Prof. Ricardo Santos</h3>
<p>Ciência da Computação</p>
<p>PhD em Inteligência Artificial</p>
<div class="social-links">
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">📚</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto da Profa. Lúcia
Ferreira" class="people-img">
<div class="people-info">
<h3>Profa. Lúcia Ferreira</h3>
<p>Engenharia de Software</p>
<p>Mestre em Sistemas Distribuídos</p>
<div class="social-links">
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">📚</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto do Prof. Eduardo
Nunes" class="people-img">
<div class="people-info">
<h3>Prof. Eduardo Nunes</h3>
<p>Desenvolvimento Web</p>
<p>Especialista em UX/UI Design</p>
<div class="social-links">
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">📚</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto da Profa. Mariana
Lima" class="people-img">
<div class="people-info">
<h3>Profa. Mariana Lima</h3>
<p>Ciência de Dados</p>
<p>PhD em Estatística Computacional</p>
<div class="social-links">
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">📚</a>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Assistentes -->


<section class="assistants" id="assistentes">
<div class="container">
<h2 class="section-title">Nossos Assistentes</h2>
<div class="people-grid">
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Pedro Almeida"
class="people-img">
<div class="people-info">
<h3>Pedro Almeida</h3>
<p>Assistente Técnico</p>
<p>Especialista em Suporte Acadêmico</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Juliana Costa"
class="people-img">
<div class="people-info">
<h3>Juliana Costa</h3>
<p>Assistente Administrativa</p>
<p>Responsável por Documentação</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Gustavo
Pereira" class="people-img">
<div class="people-info">
<h3>Gustavo Pereira</h3>
<p>Assistente de Laboratório</p>
<p>Especialista em Equipamentos</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
</div>
</div>
</div>
<div class="people-card">
<img src="/api/placeholder/300/300" alt="Foto de Fernanda
Santos" class="people-img">
<div class="people-info">
<h3>Fernanda Santos</h3>
<p>Assistente de Ensino</p>
<p>Monitora de Programação</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">📧</a>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Atendimento -->


<section class="support" id="atendimento">
<div class="container">
<h2 class="section-title">Canais de Atendimento</h2>
<div class="support-container">
<div class="support-card">
<div class="support-icon">📞</div>
<h3>Telefone</h3>
<p>Atendimento de segunda a sexta, das 8h às 20h</p>
<p>0800 123 4567</p>
<button class="btn" onclick="openModal('phone')">Solicitar
Contato</button>
</div>
<div class="support-card">
<div class="support-icon">💬</div>
<h3>Chat Online</h3>
<p>Disponível 24 horas por dia, 7 dias por semana</p>
<p>Tempo médio de resposta: 5 minutos</p>
<button class="btn" onclick="openModal('chat')">Iniciar
Chat</button>
</div>
<div class="support-card">
<div class="support-icon">📧</div>
<h3>E-mail</h3>
<p>Resposta em até 24 horas úteis</p>
<p>[email protected]</p>
<button class="btn" onclick="openModal('email')">Enviar E-
mail</button>
</div>
</div>
</div>
</section>

<!-- Login/Cadastro -->


<section class="auth-section" id="entrar">
<div class="container">
<div class="auth-container">
<div class="auth-box">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" id="email" class="form-control"
required>
</div>
<div class="form-group">
<label for="password">Senha</label>
<input type="password" id="password" class="form-
control" required>
</div>
<button type="submit" class="btn btn-block">Entrar</button>
</form>
</div>
<div class="auth-box" id="cadastro">
<h2>Cadastro</h2>
<form id="registerForm">
<div class="form-group">
<label for="name">Nome Completo</label>
<input type="text" id="name" class="form-control"
required>
</div>
<div class="form-group">
<label for="reg-email">E-mail</label>
<input type="email" id="reg-email" class="form-control"
required>
</div>
<div class="form-group">
<label for="university">Universidade</label>
<input type="text" id="university" class="form-control"
required>
</div>
<div class="form-group">
<label for="reg-password">Senha</label>
<input type="password" id="reg-password" class="form-
control" required>
</div>
<button type="submit" class="btn
btn-block">Cadastrar</button>
</form>
```

You might also like