Modelo de Entrega Do Trabalho - VF

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER
ESCOLA SUPERIOR POLITÉCNICA

ANÁLISE E DESENVOLVIMENO DE SISTEMAS
FUNDAMENTOS DA PROGRAMAÇÃO WEB
ATIVIDADE PRÁTICA
JEAN CARLO JOHANN, 4474143
CURITIBA-PR
2024
1. Estrutura de pastas do projeto:
2. Colocar nome dos arquivos (copiar código):

Index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?
family=Inconsolata:wght@200..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700
;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilo.css">
<title>Jean Johann</title>
</head>
<header>
<nav class="menu">
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="portfolio.html">Portfólio</a></li>
<li><a href="pessoal.html">Pessoal</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<body>
<div class="conteudo-inicial">
<div class="avatar">
<img src="imagens/avatar.png" class="avatar" alt="Foto de perfil">
</div>
<article class="texto-inicial">
<h1>Olá!</h1>
1
<h2>Me chamo Jean, tenho 30 anos e estou cursando Análise e
Desenvolvimento de Sistemas na Uninter.
<br><br>Esta página foi criada com o propósito de apresentar de
forma breve os conhecimentos adquiridos em aula, além de compartilhar um pouco
sobre minha vida pessoal e profissional.
<br><br>Espero, com o tempo, aprimorar meus conhecimentos
gradualmente, a fim de melhorar a página e aplicar melhorias que evidenciem
minha evolução.</h2>
</article>
</div>
</body>
<footer>
<div class="rodape">
<br>Página criada apenas para fins educativos!
</div>
</footer>
</html>
portfolio.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<header>
<nav class="menu">
<ul>
</ul>
</nav>
</header>
<body>
<div class="conteudo-xp">
<img src="imagens/manutencao.png" class="avatar">
</div>
<article class="texto-xp">
<h1>Página em desenvolvimento!</h1>
<h2>Ainda não tenho projetos concluídos para exibir, mas estou
ansioso para compartilhar minhas ideias e trabalhos futuros com você.
<br><br>Estou dedicando meu tempo e esforço para criar projetos
que sejam significativos, inovadores e que possam agregar valor as pessoas.
<br><br>Fique atento! Em breve, estarei publicando meus projetos
aqui, e mal posso esperar para compartilhá-los com você. Obrigado por sua
paciência e apoio!</h2>
</article>
</div>
</body>
<footer>
</div>
</footer>
</html>
pessoal.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<header>
<nav class="menu">
<ul>
</ul>
</nav>
</header>
<body>
<div class="conteudo-pessoal">
<img src="imagens/foto-eu.png" class="ft-pessoal">
</div>
<article class="texto-pessoal">
<h1>Um pouco da minha história...</h1>
Meu nome completo é Jean Carlo Johann e nasci em Santo Cristo, uma
cidade no interior do Rio Grande do Sul, no ano de 1993. Fiquei lá até os meus
23 anos, quando me mudei para Garopaba, no litoral sul de Santa Catarina. Ao
longo da vida, experimentei diversas atividades. Iniciei minha trajetória
profissional aos 13 anos, auxiliando meus pais no restaurante da família. Aos
17, ingressei em uma empresa de telecomunicações, onde permaneci por quase 7
anos na assistência técnica. Após deixar esse emprego, mudei-me para o litoral
e por quase 2 anos trabalhei em uma imobiliária, além de realizar trabalhos
temporários em pousadas, hamburguerias, limpeza de piscinas e
jardinagem.<br><br>
Posteriormente, mudei-me para Curitiba, onde resido atualmente. Ao

longo do tempo, transitei de motorista de aplicativos para uma concessionária
de automóveis e, em seguida, para uma empresa de segurança patrimonial.
Atualmente, estou empregado em uma empresa de engenharia rodoviária,
realizando a supervisão de rodovias.<br><br>
Anos atrás, em minha cidade natal, iniciei o curso de

Administração de Empresas, porém desisti. Desde então, não prossegui com meus
estudos formais, optando apenas por pequenos cursos livres, motivado pela
curiosidade e pela busca por novas oportunidades. Recentemente, decidi retomar
os estudos e iniciar o curso de Análise e Desenvolvimento de Sistemas, visando
uma possível volta à área de tecnologia, na qual dei meus primeiros passos
profissionais.
</article>
</div>
</body>
<footer>
</div>
</footer>
</html>
contato.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<header>
<nav class="menu">
<ul>
</ul>
</nav>
</header>
<body>
<div class="contato">
<form action="mailto:nome@email.com.br" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" alt="Digite o seu
nome" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" alt="Digite o seu
e-mail" required>
<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone" alt="Digite o
seu telefone">
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" required></textarea>
<button type="submit">Enviar</button>
</form>
</div>
<div class="redes-sociais">
<a href="https://www.instagram.com/jeanjohann/">
<img src="imagens/Instagram_icon.png" alt="Página do Instagram">
</a>
<a href="https://www.linkedin.com/in/jeanjohann/">
<img src="imagens/linkedin_icon.png" alt="Página do LinkedIn">
</a>
</div>
</body>
<footer>
</div>
</footer>
</html>
estilo.css
body{
margin: 0;
padding: 0;
font-family: "Inconsolata", monospace;
background-color: #efe661;
}
/* CONFIGURAÇÃO DO MENU */
.menu {
background-color: #d4db40;
padding-top: 1%;
font-size: 16px;
background-image: url(imagens/fundo1.png);
}
ul {
display:flex;
justify-content: center;
}
li, a{
list-style: none;
text-decoration: none;
color: rgb(255, 255, 255);
padding: 2%;
font-weight:600;
}
li:hover {
transform: scale(1.2);
transition: 0.1s;
}
/* RODAPÉ */
.rodape {
display: flex;
position:fixed;
bottom:0%;
width: 100%;
font-size: 12px;
height: 5vh;
background-color: #817870;
color: #fff;
}
/* CONFIGURAÇÃO PÁGINA INICIAL */

.conteudo-inicial {
display: flex;
padding-top: 5%;
}
.avatar {
max-width: 250px;
padding: 2%;
}
.texto-inicial {
max-width: 430px;
font-weight:600;
color: #1d1407;
}
h1 {
font-size: 20px;
font-weight: 800;
}
h2 {
font-size: large;
font-weight: 400;
}
/* CONFIGURAÇÃO PÁGINA PORTFÓLIO */

.conteudo-xp {
display: flex;
padding-top: 5%;
}
.texto-xp {
max-width: 430px;
color: #1d1407;
}
/* CONFIGURAÇÃO PÁGINA PESSOAL */

.conteudo-pessoal {
display: flex;
padding-top: 5%;
}
.ft-pessoal {
max-width: 250px;
padding-top: 15%;
}
.texto-pessoal {
max-width: 600px;
color: #1d1407;
}
/* CONFIGURAÇÃO PÁGINA CONTATO */

.contato {
max-width: 650px;
margin: 50px auto;
padding: 20px;
border-radius: 2%;
}
label {
display: block;
padding-top: 15px;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #c2c2c2;
}
textarea {
padding-bottom: 30%;
}
button {
color: #fff;
padding: 10px 50px;
border: none;
cursor: pointer;
}
button:hover {
}
.redes-sociais {
display: flex;
}
img {
max-width: 50px;
padding: 10px;
}
3. Colocar imagem do código em execução (index):
4. Colocar endereço onde publicou o site:

https://jeanjohann.000webhostapp.com/

Modelo de Entrega Do Trabalho - VF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Modelo de Entrega Do Trabalho - VF

Enviado por

Direitos autorais:

Formatos disponíveis

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER

ESCOLA SUPERIOR POLITÉCNICA

JEAN CARLO JOHANN, 4474143

2. Colocar nome dos arquivos (copiar código):

Posteriormente, mudei-me para Curitiba, onde resido atualmente. Ao

Anos atrás, em minha cidade natal, iniciei o curso de

/* CONFIGURAÇÃO PÁGINA INICIAL */

/* CONFIGURAÇÃO PÁGINA PORTFÓLIO */

/* CONFIGURAÇÃO PÁGINA PESSOAL */

/* CONFIGURAÇÃO PÁGINA CONTATO */

4. Colocar endereço onde publicou o site:

Você também pode gostar