Atividade Prática - Programação Web - JEAN CARLO JOHANN - RU 4474143

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=Inconso-
lata:wght@200..900&fa-
mily=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,90
0&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">
1
<h1>Olá!</h1>
<h2>Me chamo Jean, tenho 30 anos e estou cursando Análise e Desen-
volvimento 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 gradual-
mente, 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 an-
sioso 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 pa-
ciê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 pro-
fissional 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 tem-
porá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. Atual-
mente, 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 profissio-
nais.
</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/

Atividade Prática - Programação Web - JEAN CARLO JOHANN - RU 4474143

Enviado por

Dados do documento

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

Atividade Prática - Programação Web - JEAN CARLO JOHANN - RU 4474143

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 Administra-

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

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

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

4. Colocar endereço onde publicou o site:

Você também pode gostar