Scribd
Carregar
31 visualizações10 páginas

PORTFOLICO Js

Enviado por

Adriano Silva
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
31 visualizações10 páginas

PORTFOLICO Js

Enviado por

Adriano Silva
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 10

PORTFOLICO

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Portfólio Pessoal</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav>

<a href="#sobre">Sobre Mim</a>

<a href="#projetos">Projetos</a>

<a href="#hobbies">Hobbies</a>

<a href="#certificacoes">Certificações</a>

<a href="#contato">Contato</a>

<button id="modo-escuro"></button>

</nav>

</header>

<section id="sobre" class="fade-in">

<h1>Olá, eu sou [Seu Nome]!</h1>

<p>Sou estudante apaixonado por desenvolvimento web e estou sempre em busca de


novos desafios.</p>

</section>

<section id="projetos" class="fade-in">


<h2>Meus Projetos</h2>

<div id="carrossel">

<img src="projeto1.jpg" alt="Projeto 1" class="ativo">

<img src="projeto2.jpg" alt="Projeto 2">

<img src="projeto3.jpg" alt="Projeto 3">

</div>

</section>

<section id="hobbies" class="fade-in">

<h2>Meus Hobbies</h2>

<ul>

<li> Tocar guitarra</li>

<li> Jogar videogames</li>

<li> Ler livros de ficção científica</li>

</ul>

</section>

<section id="certificacoes" class="fade-in">

<h2>Certificações</h2>

<ul>

<li> Certificação em HTML e CSS - Plataforma X</li>

<li> Certificação em JavaScript - Plataforma Y</li>

</ul>

</section>

<section id="contato" class="fade-in">

<h2>Entre em Contato</h2>
<form id="form-contato">

<label for="nome">Nome:</label>

<input type="text" id="nome" name="nome" required>

<label for="email">E-mail:</label>

<input type="email" id="email" name="email" required>

<label for="mensagem">Mensagem:</label>

<textarea id="mensagem" name="mensagem" required></textarea>

<button type="submit">Enviar</button>

</form>

</section>

<footer>

<p>&copy; 2024 - Meu Portfólio</p>

</footer>

<script src="script.js"></script>

</body>

</html>
Css (styles.css)

/* Reset e Estilo Base */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

color: #333;

transition: background-color 0.5s, color 0.5s;

header {

background-color: #333;

color: white;

padding: 10px 20px;

display: flex;

justify-content: space-between;

align-items: center;

nav a {

color: white;

margin: 0 15px;
text-decoration: none;

font-weight: bold;

nav a:hover {

color: #ffcc00;

#modo-escuro {

background: none;

border: none;

color: white;

cursor: pointer;

font-size: 20px;

/* Animações */

.fade-in {

opacity: 0;

transform: translateY(20px);

transition: opacity 1s ease, transform 1s ease;

.fade-in.show {

opacity: 1;

transform: translateY(0);

}
/* Carrossel */

#carrossel {

position: relative;

max-width: 600px;

margin: 0 auto;

#carrossel img {

width: 100%;

display: none;

#carrossel img.ativo {

display: block;

footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

position: fixed;

bottom: 0;

width: 100%;

}
@media (max-width: 600px) {

nav {

flex-direction: column;

nav a {

margin: 10px 0;

}
Script.js

// Scroll suave

document.querySelectorAll('nav a').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const targetId = this.getAttribute('href');

document.querySelector(targetId).scrollIntoView({

behavior: 'smooth'

});

});

});

// Validação do formulário

document.getElementById('form-contato').addEventListener('submit', function(e) {

e.preventDefault();

const nome = document.getElementById('nome').value;

const email = document.getElementById('email').value;

const mensagem = document.getElementById('mensagem').value;

if (nome && email && mensagem) {

alert('Mensagem enviada com sucesso!');

this.reset();

} else {

alert('Por favor, preencha todos os campos.');

});
// Modo claro/escuro

const botaoModoEscuro = document.getElementById('modo-escuro');

botaoModoEscuro.addEventListener('click', () => {

document.body.classList.toggle('modo-escuro');

});

// Carrossel de imagens

let indiceAtual = 0;

const imagens = document.querySelectorAll('#carrossel img');

function mostrarProximaImagem() {

imagens[indiceAtual].classList.remove('ativo');

indiceAtual = (indiceAtual + 1) % imagens.length;

imagens[indiceAtual].classList.add('ativo');

setInterval(mostrarProximaImagem, 3000); // Troca de imagem a cada 3 segundos

// Animações de entrada

const secoes = document.querySelectorAll('.fade-in');

window.addEventListener('scroll', () => {

secoes.forEach(secao => {

const posicaoTop = secao.getBoundingClientRect().top;

if (posicaoTop < window.innerHeight - 50) {

secao.classList.add('show');

});

});

Você também pode gostar