Scribd
Upload
17 views13 pages

Gente

The document outlines the creation of a responsive website for a university network aimed at students, featuring a scoring system, login, registration, and team sections. It includes a simple yet attractive HTML structure with various sections like navigation, hero, features, team, and authentication. The design emphasizes user engagement through a clean layout and interactive elements.

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
17 views13 pages

Gente

The document outlines the creation of a responsive website for a university network aimed at students, featuring a scoring system, login, registration, and team sections. It includes a simple yet attractive HTML structure with various sections like navigation, hero, features, team, and authentication. The design emphasizes user engagement through a clean layout and interactive elements.

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/ 13

Vou criar um site responsivo para uma rede universitária focada em estudantes, com

um sistema de pontuação, login, cadastro e seção de equipe. Vou desenvolver um HTML


simples mas atraente que você possa usar como ponto de partida.

```

<!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ção de Equipe */
.team {
padding: 80px 0;
background-color: #f5f7fa;
}

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

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

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

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

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

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

.team-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 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;
}

/* 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);
}

.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;
}
}
</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="#equipe">Equipe</a></li>
<li><a href="#entrar">Entrar</a></li>
<li><a href="#cadastro" class="btn">Cadastre-se</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>

<!-- Equipe -->


<section class="team" id="equipe">
<div class="container">
<h2 class="section-title">Nossa Equipe</h2>
<div class="team-grid">
<div class="team-card">
<img src="/api/placeholder/300/300" alt="Foto de Ana Silva"
class="team-img">
<div class="team-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="team-card">
<img src="/api/placeholder/300/300" alt="Foto de Carlos Mendes"
class="team-img">
<div class="team-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="team-card">
<img src="/api/placeholder/300/300" alt="Foto de Marina Costa"
class="team-img">
<div class="team-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="team-card">
<img src="/api/placeholder/300/300" alt="Foto de Rafael
Oliveira" class="team-img">
<div class="team-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>

<!-- 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>
</div>
</div>
</div>
</section>

<!-- Footer -->


<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>University Network</h3>
<p>Conectando estudantes e valorizando o conhecimento acadêmico
de forma inovadora.</p>
</div>
<div class="footer-column">
<h3>Links Rápidos</h3>
<ul class="footer-links">
<li><a href="#inicio">Início</a></li>
<li><a href="#recursos">Recursos</a></li>
<li><a href="#equipe">Equipe</a></li>
<li><a href="#entrar">Entrar</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contato</h3>
<ul class="footer-links">
<li>[email protected]</li>
<li>+55 (11) 99999-9999</li>
<li>São Paulo, SP - Brasil</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 University Network. Todos os direitos
reservados.</p>
</div>
</div>
</footer>

<script>
// Menu mobile toggle
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');

// Animação do ícone do menu


const bars = document.querySelectorAll('.bar');
bars.forEach(bar => {
bar.classList.toggle('change');
});
});

// Fechar menu ao clicar em um link


document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});

// Smooth scroll para links âncora


document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));

if (target) {
window.scrollTo({
top: target.offsetTop - 70,
behavior: 'smooth'
});
}
});
});

// Formulários
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');

loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

// Simulação de login
alert(`Login efetuado com sucesso! E-mail: ${email}`);
// Aqui você adicionaria a lógica real de login
});

registerForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('reg-email').value;
const university = document.getElementById('university').value;

// Simulação de cadastro
alert(`Cadastro realizado com sucesso! Bem-vindo(a), ${name}!`);
// Aqui você adicionaria a lógica real de cadastro
});
</script>
</body>
</html>
```

Este site responsivo para a University Network inclui:

1. **Design moderno e responsivo** - Adaptado para todos os dispositivos, com menu


mobile e layout fluido
2. **Seções principais**:
- Banner de destaque com chamada para ação
- Recursos da plataforma (sistema de pontuação, comunidade, recursos
educacionais)
- Cards da equipe com fotos e redes sociais
- Formulários de login e cadastro
- Rodapé com informações de contato

3. **Funcionalidades simples**:
- Menu responsivo que se transforma em menu hambúrguer em dispositivos móveis
- Smooth scroll para navegação interna
- Simulação de envio de formulários
- Animações suaves nos cards e interações

Você pode complementar o site adicionando:


- Um sistema de backend real para processar os formulários
- Um dashboard para os estudantes verem suas pontuações
- Mais páginas internas para os recursos mencionados

O código está pronto para uso e pode ser facilmente expandido conforme suas
necessidades!

You might also like