dgleyramos
/
bootcamp-netuno
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Fazendo uma melhor estruturação nas minhas páginas

master
Dgley Ramos 3 years ago
parent
49e7268868
commit
8c448fd648
6 changed files with 355 additions and 59 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      .styles.css.swp
  2. +61
    -31
      extincoes.html
  3. +39
    -19
      index.html
  4. +41
    -9
      outra/index.html
  5. +13
    -0
      script.js
  6. +201
    -0
      styles.css

BIN
.styles.css.swp View File


+ 61
- 31
extincoes.html View File

@ -2,39 +2,69 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>Extinções</title> <title>Extinções</title>
</head> </head>
<body> <body>
<table width="100%" border="1">
<legend>Conheça o TOP 5 animais em extinção!</legend>
<thead>
<tr>
<th width="75%">Animal</th>
<th width="25%">Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tigre-siberiando</td>
<td>360</td>
</tr>
<tr>
<td>Orangotango-de-sumatra</td>
<td>7300</td>
</tr>
<tr>
<td>Iguana Rosa de Galápagos</td>
<td>2000</td>
</tr>
<tr>
<td>Gato-maracajá</td>
<td>4700</td>
</tr>
<tr>
<td>Guaraba</td>
<td>14000</td>
</tr>
</tbody>
</table>
<header class="header">
<div class="container">
<div class="row">
<div class="header__logo">
<a href="/">
<img src="https://dev.netuno.org/images/logo.svg" alt="Logo do Netuno">
</a>
</div>
<ul class="header__list">
<li class="list__item">
<a class="list__item--link" href="./extincoes.html">Extinções</a>
</li>
<li class="list__item">
<a class="list__item--link" href="#">Parques</a>
</li>
</ul>
</div>
</div>
</header>
<main>
<section class="extincoes">
<div class="container">
<div class="row">
<table class="table-animais">
<thead>
<tr>
<th>Animal</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tigre-siberiando</td>
<td>360</td>
</tr>
<tr>
<td>Orangotango-de-sumatra</td>
<td>7300</td>
</tr>
<tr>
<td>Iguana Rosa de Galápagos</td>
<td>2000</td>
</tr>
<tr>
<td>Gato-maracajá</td>
<td>4700</td>
</tr>
<tr>
<td>Guaraba</td>
<td>14000</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<footer class="footer">
<p class="footer__copy">&copy;Todos os direitos reservados!</p>
</footer>
</body> </body>
</html> </html>

+ 39
- 19
index.html View File

@ -9,30 +9,50 @@
<body> <body>
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<h1>Netuno</h1>
</div?
<div class="row">
<div class="header__logo">
<img src="https://dev.netuno.org/images/logo.svg" alt="Logo do Netuno">
</div>
<ul class="header__list">
<li class="list__item">
<a class="list__item--link" href="./extincoes.html">Extinções</a>
</li>
<li class="list__item">
<a class="list__item--link" href="#">Parques</a>
</li>
</ul>
</div>
</div>
</header> </header>
<main> <main>
<h2>Aprenda a desenvolver suas habilidades</h2>
<p>Página destinada a desenvolvimento de atividade proposta na aula de HTML</p>
<hr/>
<section class="hero">
<div class="container">
<div class="row">
<div class="hero__content">
<h2>Bem-vindo ao Netuno</h2>
<p>Aqui você encontra cursos e formações que irão te levar ao próximo nível.</p>
</div>
<div class="hero__form">
<p>Se inscreva na nossa newsletter e fique por dentro de tudo!</p>
<form class="newsletter">
<label class="input-group">
<input id="email" type="email" placeholder="Digite seu e-mail"/>
</label>
<input class="form__btn" type="submit" id="btn-submit" value="Inscreva-se"/>
</form>
</div>
</div>
</div>
</section>
<h3>Deseja se inscrever nos proximos cursos?</h3>
<form method="post">
<label style="display: block; margin-bottom: 10px;">
Nome:
<input style="height: 25px;" type="text" required/>
</label>
<label style="display: block; margin-bottom: 15px;">
Email:
<input style="height: 25px;" type="email" required/>
</label>
<a href="http://dgleyramos.bootcamp.dev.netuno.org:20180/outra/" style="padding: 10px 8px; background-color: #000; color: #fff; cursor: pointer;">Inscreva-se!</a>
</form>
</main> </main>
<footer style="width: 99%; position: absolute; bottom: 0;">
<p style="text-align: center;">&copy;Todos os direitos reservados!</p>
<footer class="footer">
<p class="footer__copy">&copy;Todos os direitos reservados!</p>
</footer> </footer>
<script src="./script.js"></script>
</body> </body>
</html> </html>

+ 41
- 9
outra/index.html View File

@ -1,20 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/>
<title>Inscrito!</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="../styles.css"/>
<title>Netuno - HTML</title>
</head> </head>
<body> <body>
<header><h1>Netuno</h1><hr/></header>
<header class="header">
<div class="container">
<div class="row">
<div class="header__logo">
<a href="/">
<img src="https://dev.netuno.org/images/logo.svg" alt="Logo do Netuno">
</a>
</div>
<ul class="header__list">
<li class="list__item">
<a class="list__item--link" href="../extincoes.html">Extinções</a>
</li>
<li class="list__item">
<a class="list__item--link" href="#">Parques</a>
</li>
</ul>
</div>
</div>
</header>
<main> <main>
<h2>Inscrito!</h2>
<p>Em breve entraremos em contato, assim que aparecer novas vagas!</p>
<a href="./../">Voltar...</a>
</main>
<section class="boas-vindas">
<div class="container">
<div class="row">
<div class="content">
<h2>Parabéns!!</h2>
<p>Seja bem-vindo ao NETUNO, estamos muito feliz de ter você aqui!</p>
<p>Vamos lhe manter informado sobre o mercado de tecnologia e sobre novos cursos e formações, espero ter você conosco em breve!</p>
</div>
</div>
</div>
</section>
<footer style="width: 99%; position: absolute; bottom: 0;">
<p style="text-align: center;">&copy;Todos os direitos reservados!</p>
</main>
<footer class="footer">
<p class="footer__copy">&copy;Todos os direitos reservados!</p>
</footer> </footer>
<script src="./script.js"></script>
</body> </body>
</html> </html>

+ 13
- 0
script.js View File

@ -0,0 +1,13 @@
const email = document.getElementById("email");
const btnSubmit = document.getElementById("btn-submit");
btnSubmit.addEventListener('click', function(e){
e.preventDefault()
if(email.value === ""){
alert("Para se inscrever na nossa newsletter é preciso informar seu e-mail!")
}else{
window.location.pathname = "/outra/"
email.value = ""
}
})

+ 201
- 0
styles.css View File

@ -1,6 +1,207 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Poppins:wght@700&display=swap');
/*Variaveis*/
:root{
--primary-color: #101026;
--secundary-color: #1d1d2e;
--text-color: #fff;
--border-color: #fff;
--btn-primary: #fff;
--btn-hover-color: #1d1d2e;
--fira-code: 'Fira Code', monospace;
--poppins: 'Poppins', sans-serif;
}
/*Reset*/
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
text-decoration: none;
list-style: none;
}
img{
width: 100%;
}
body{
background-color: var(--secundary-color);
color: var(--text-color);
height: 100vh;
font-family: var(--fira-code)
}
::selection{
background-color: var(--text-color);
color: var(--primary-color)
}
/*Classes auxiliares*/
.container{
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
.row{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/*Página de extinções*/
.table-animais{
width: 100%;
}
.table-animais > thead{
background-color: #fff;
color: #101026;
}
.table-animais > thead > tr > th{
border: 1px solid var(--pramary-color);
padding: 2px 8px;
} }
.table-animais > tbody > tr > td{
border: 1px solid #fff;
padding: 2px 8px;
}
/*página inicial*/
main{
height: 80%;
}
/*Header*/
.header{
height:15%;
}
.header > .container > .row{
justify-content: space-between;
}
.header__logo{
width: 25%;
}
.header__list{
width: 50%;
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 10px;
}
.list__item{
padding: 5px 20px;
background-color: var(--btn-primary);
border-radius: 4px;
cursor: pointer;
transition: all 100ms ease-in-out;
}
.list__item--link{
color: #1d1d2e;
transition: all 100ms ease-in-out;
}
.list__item:hover{
transform: translateY(-2px);
background-color: var(--btn-hover-color);
border: 1px solid var(--border-color);
}
.list__item:hover > .list__item--link{
color: var(--text-color);
}
/*Hero*/
.hero{
height: 100%
}
.hero > .container > .row{
justify-content: space-between;
}
.hero__content{
width: 40%;
}
.hero__content h2{
font-family: var(--poppins);
font-size: 45px;
line-height: 45px;
margin-bottom: 10px;
}
.hero__form{
width: 40%;
}
.newsletter{
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
margin-top: 10px;
}
.input-group{
width: 79%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.input-group input{
width: 100%;
height: 100%;
padding-left: 5px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-group input::placeholder{
color: #101026;
}
.input-group input:focus{
outline: none;
}
.form__btn{
width: 20%;
background-color: var(--btn-primary);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
}
.form__btn:hover{
background-color: var(--btn-hover-color);
border: 1px solid var(--border-color);
color: var(--text-color);
}
/*Página de boas vindas*/
.boas-vindas{
height: 100%
}
.boas-vindas > .container > .row > .content{
width: 60%;
text-align: center;
}
.boas-vindas > .container > .row > .content h2{
font-size: 42px;
}
/*footer*/
.footer{
height:5%;
display: flex;
justify-content: center;
align-items: center;
}
.footer__copy{
font-size: 12px;
}

Write Preview
Loading…
Cancel
Save