diff --git a/.styles.css.swp b/.styles.css.swp
new file mode 100644
index 0000000..f6a38fc
Binary files /dev/null and b/.styles.css.swp differ
diff --git a/extincoes.html b/extincoes.html
index c8f711e..d366a19 100644
--- a/extincoes.html
+++ b/extincoes.html
@@ -2,39 +2,69 @@
 <html>
   <head>
     <meta charset="UTF-8"/>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
     <title>Extinções</title>
   </head>
   <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>
 </html>
diff --git a/index.html b/index.html
index db57ff0..27d3829 100644
--- a/index.html
+++ b/index.html
@@ -9,30 +9,50 @@
 	<body>
 		<header class="header">
 			<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>
+
 		<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>
 
-		<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>
+
+		<script src="./script.js"></script>
 	</body>
 </html>
diff --git a/outra/index.html b/outra/index.html
index 49fc4d7..362be8f 100644
--- a/outra/index.html
+++ b/outra/index.html
@@ -1,20 +1,52 @@
 <!DOCTYPE html>
 <html>
 	<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>
 	<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>
-			<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>
+
+		<script src="./script.js"></script>
 	</body>
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d61b2c9
--- /dev/null
+++ b/script.js
@@ -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 = ""
+  }
+})
diff --git a/styles.css b/styles.css
index 0ee8b19..65fa461 100644
--- a/styles.css
+++ b/styles.css
@@ -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;
 	margin: 0;
 	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;
+}

Animal	Quantidade
Tigre-siberiando	360
Orangotango-de-sumatra	7300
Iguana Rosa de Galápagos	2000
Gato-maracajá	4700
Guaraba	14000