diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..6261e8b
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,379 @@
+@import url('https://fonts.googleapis.com/css?family=Teko|Roboto');
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: #111111;
+}
+
+h2 {
+    
+}
+
+p {
+    font-family: 'Roboto';
+}
+
+/* Menu */
+
+.scrollsuave {
+
+}
+
+.atletica {
+    font-family: "Teko";
+    font-size: 2.15em;
+    color: #fff !important;
+    text-transform: uppercase;
+}
+
+.atletica p {
+    font-size: 0.70rem;
+    margin-left: 75px;
+    transform: translateY(-20px);
+    position: absolute;
+}
+
+.mamute {
+    height: 70px;
+    width: 70px;
+}
+
+.menu-principal {
+    background-color: #870006;
+}
+
+@media (min-width: 991px) {
+    .menu-principal {
+        height: 90px;
+    }
+}
+
+.menu-principal ul > li > a {
+    font-family: "Open Sans";
+    font-weight: 700;
+    color: #fff;
+    text-transform: uppercase;
+}
+
+.menu-principal ul > li > a:hover {
+    color: #000;
+}
+
+
+.menu-principal .navbar-toggler {
+    border: 2px solid #fff !important;
+    color: #fff !important;
+}
+
+.navbar-toggler-icon {
+    background-image: url('../img/icone-menu.png') !important;
+}
+
+
+/* Barra de Pesquisa e Icones de Redes Socias */
+
+.redes-sociais-pesquisa {
+    display: flex;
+    align-items: center;
+    background-color: #000;
+    height: 50px;
+}
+
+.linha-redes-sociais-pesquisa {
+    display: flex;
+    justify-content: space-between;
+}
+
+.icones-redes-socias-topo > a {
+    font-size: 20px;
+    color: #fff;
+    padding-right: 12px;
+}
+
+.icones-redes-socias-topo > a:hover {
+    color: #870006;
+    border: none;
+    transition: 0.3s;
+}
+
+.icone-pesquisa-topo > button {
+    font-size: 20px;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+}
+
+.icone-pesquisa-topo > button:hover {
+    color: #870006;
+    border: none;
+    transition: 0.3s;
+    cursor: pointer;
+}
+
+#barra-pesquisa {
+    padding: 30px 0;
+    background-color: #870006;
+    height: 100px;
+    paddin-bottom: 30px;
+}
+
+.formulario-pesquisa-topo button {
+    background-color: #000;
+    color: #fff;
+}
+
+.input-formulario-pesquisa-topo:focus {
+    box-shadow: none;
+    border: none;
+}
+
+.input-formulario-pesquisa-topo::placeholder {
+    font-family: "Open Sans" !important;
+    font-weight: 300;
+}
+
+@media (max-width: 768px) {
+    .col-pesquisa-mob {
+        padding: 3px;
+    }
+}
+
+/*Main*/
+
+.separador {
+    content: '';
+    display: block;
+    height: 1px;
+    width: 100%;
+    background: rgb(135,0,6);
+    margin: 20px auto;
+
+}
+
+.box-intro {
+    background-color: rgba(0,0,0,0.7);
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.noticias {
+   background-image: url('../img/intro.jpg');
+   background-repeat: no-repeat;
+   background-size: cover;
+   background-position: center;
+   background-attachment: fixed;   
+}
+
+.assine hr {
+    padding: 10px;
+    height: 0;
+}
+
+.assine {
+    padding-top: 10px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.assine p {
+    max-width: 500px;
+}
+
+.assine a {
+    margin-top: 20px;
+    padding: 10px;
+    border: 1px solid #fff;
+    border-radius: 6px;
+    color: #fff !important;
+    cursor: pointer;
+    text-decoration: none;
+    text-transform: uppercase; 
+}
+
+.intro {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    color: #fff;
+    display: grid;
+    grid-template:
+    "welcome rules notas"
+    ;
+    grid-gap: 10px;
+}
+
+.welcome {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: flex-start;
+    margin: 20px;
+    grid-area: 'welcome';
+}
+
+.rules {
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    justify-content: flex-start;
+    grid-area: 'welcome';
+}
+
+.notas {
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    justify-content: flex-start;
+    grid-area: 'welcome';
+}
+
+@media (max-width: 1065px) {
+    .intro {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.rules ul li {
+    margin: 0px;
+    list-style: none;
+    padding: 0px;
+}
+
+.assine a:hover {
+    background: rgb(135,0,6);
+}
+
+.eventos {
+   color: #fff;
+}
+
+.eventos::after {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 100%;
+    background: rgb(135,0,6);
+    margin: 20px auto;
+    margin-bottom: 60px;
+}
+
+.eventos::before {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 100%;
+    background: rgb(135,0,6);
+    margin: 20px auto;
+}
+
+.cardevent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: baseline;
+    text-align: justify;
+    border: 1px solid #fff;
+    background: transparent;
+    padding: 10px; 
+    margin: 20px;
+    color: white;
+    max-width: 300px;
+}
+
+.cardevent a {
+    font-size: 1.25em;
+}
+
+.cardevent img {
+    height: 250px;
+    width: 270px;
+}
+
+.time {
+    background-image: url('../img/time.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+}
+
+.time img {
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+}
+
+.time-p {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 70px;
+}
+
+.time h2 {
+    margin-top: 10px;
+    font-size: 2.25em;
+}
+/*Footer*/
+
+footer{
+    background-color: #870006;
+    color: white;
+}
+
+footer a{
+    color: #fff;
+}
+
+footer a:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+.copy {
+    padding: 10px;
+    margin-top: 30px;
+    background: #000;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.25em;
+}
+
+.copy a:hover {
+    color: #870006;
+}
+
+.csocial a{
+    margin: 5px;
+    font-size: 1.55em;
+}
+
+@media (max-width: 900px) {
+    .copy {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/assets/img/icone-menu.png b/assets/img/icone-menu.png
new file mode 100644
index 0000000..686755d
Binary files /dev/null and b/assets/img/icone-menu.png differ
diff --git a/assets/img/intro.jpg b/assets/img/intro.jpg
new file mode 100644
index 0000000..569f58b
Binary files /dev/null and b/assets/img/intro.jpg differ
diff --git a/assets/img/mamute.png b/assets/img/mamute.png
new file mode 100644
index 0000000..0248b97
Binary files /dev/null and b/assets/img/mamute.png differ
diff --git a/assets/img/time.jpg b/assets/img/time.jpg
new file mode 100644
index 0000000..c1865ca
Binary files /dev/null and b/assets/img/time.jpg differ
diff --git a/assets/img/user.svg b/assets/img/user.svg
new file mode 100644
index 0000000..5b13d36
--- /dev/null
+++ b/assets/img/user.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 53 53" style="enable-background:new 0 0 53 53;" xml:space="preserve">
+<path style="fill:#E7ECED;" d="M18.613,41.552l-7.907,4.313c-0.464,0.253-0.881,0.564-1.269,0.903C14.047,50.655,19.998,53,26.5,53
+	c6.454,0,12.367-2.31,16.964-6.144c-0.424-0.358-0.884-0.68-1.394-0.934l-8.467-4.233c-1.094-0.547-1.785-1.665-1.785-2.888v-3.322
+	c0.238-0.271,0.51-0.619,0.801-1.03c1.154-1.63,2.027-3.423,2.632-5.304c1.086-0.335,1.886-1.338,1.886-2.53v-3.546
+	c0-0.78-0.347-1.477-0.886-1.965v-5.126c0,0,1.053-7.977-9.75-7.977s-9.75,7.977-9.75,7.977v5.126
+	c-0.54,0.488-0.886,1.185-0.886,1.965v3.546c0,0.934,0.491,1.756,1.226,2.231c0.886,3.857,3.206,6.633,3.206,6.633v3.24
+	C20.296,39.899,19.65,40.986,18.613,41.552z"/>
+<g>
+	<path style="fill:#556080;" d="M26.953,0.004C12.32-0.246,0.254,11.414,0.004,26.047C-0.138,34.344,3.56,41.801,9.448,46.76
+		c0.385-0.336,0.798-0.644,1.257-0.894l7.907-4.313c1.037-0.566,1.683-1.653,1.683-2.835v-3.24c0,0-2.321-2.776-3.206-6.633
+		c-0.734-0.475-1.226-1.296-1.226-2.231v-3.546c0-0.78,0.347-1.477,0.886-1.965v-5.126c0,0-1.053-7.977,9.75-7.977
+		s9.75,7.977,9.75,7.977v5.126c0.54,0.488,0.886,1.185,0.886,1.965v3.546c0,1.192-0.8,2.195-1.886,2.53
+		c-0.605,1.881-1.478,3.674-2.632,5.304c-0.291,0.411-0.563,0.759-0.801,1.03V38.8c0,1.223,0.691,2.342,1.785,2.888l8.467,4.233
+		c0.508,0.254,0.967,0.575,1.39,0.932c5.71-4.762,9.399-11.882,9.536-19.9C53.246,12.32,41.587,0.254,26.953,0.004z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..36eff22
--- /dev/null
+++ b/index.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="pt-br">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <!-- Shortcut icon -->
+    <link rel="Shortcut icon" href="assets/img/mamute.png">
+    <!-- Google Fonts -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800">
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!-- Local CSS -->
+    <link rel="stylesheet" href="assets/css/main.css">
+
+    <title>Atlética-TQ</title>
+</head>
+
+<body>
+    <header class="cabecalho-principal">
+        <nav class="navbar navbar-expand-lg menu-principal">
+            <div class="container">
+                <a class="navbar-brand atletica" title="Atlética Fatec Taquaritinga" href="#">
+                    <img class="mamute" src="assets/img/mamute.png" alt="Logo Atlética Fatec Taquaritinga">
+                    Atlética
+                    <p>Mamutes Fatecanos</p>
+                </a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-principal">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="menu-principal">
+                    <ul class="navbar-nav ml-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Inicio</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#eventos">Eventos</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#time">Time</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#contato">Contato</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <nav class="redes-sociais-pesquisa">
+            <div class="container">
+                <div class="linha-redes-sociais-pesquisa">
+                    <div class="icones-redes-socias-topo ml-1">
+                        <a href="https://www.facebook.com/chamanomamute/"><i class="fa fa-facebook"></i></a>
+                        <a href="#"><i class="fa fa-instagram"></i></a>
+                    </div>
+
+                    <div class="icone-pesquisa-topo">
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#barra-pesquisa" aria-expanded="false" aria-controls="barra-pesquisa">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <div class="collapse" id="barra-pesquisa">
+            <div class="formulario-pesquisa">
+                <div class="container">
+                    <form class="formulario-pesquisa-topo" action="">
+                        <div class="row align-items-center">
+                            <div class="col-10 col-pesquisa-mob">
+                                <input class="form-control input-formulario-pesquisa-topo" type="text" placeholder="O que você está procurando?">
+                            </div>
+                            <div class="col-2 col-pesquisa-mob">
+                                <button class="btn btn-lg" type="submit">
+                                    <i class="fa fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </form>               
+                </div>
+            </div>
+        </div>
+    </header>
+    <main>
+    <section>
+        <div class="noticias">
+            <div class="box-intro">
+                <div class="assine">
+                    <hr>
+                    <h2>SEJA UM FATECANO</h2>
+                    <p>Ainda não é um mamute fatecano ?</p>
+                    <p>Entre agora para o nosso time, conheça a melhor faculdade de tecnologia da região.
+                    </p>
+                    <a href="http://201.55.32.21:8001/">Ver mais</a>
+                    <hr>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="intro container">
+        <div class="welcome">
+            <h2>Bem vindo !</h2>
+            <hr class="separador">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+        <div class="rules">
+            <h2>Regras</h2>
+            <hr class="separador">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+        </div>
+        <div class="notas">
+            <h2>Notas</h2>
+            <hr class="separador">
+            Nenhuma nota disponível, por enquanto.
+        </div>
+    </section>
+    <section class="eventos container" id="eventos">
+        <h2>Eventos</h2>
+        <p>Nada, por enquanto...</p>
+    </section>
+    <section class="eventos container">
+        <h2>Notícias</h2>
+        <p>Nada, por enquanto...</p>
+    </section>
+    <section class="time" id="time">
+    <div class="box-intro">
+        <div class="time-p">
+            <img src="assets/img/user.svg" alt="membro da equipe">
+            <h2>Nome</h2>
+            <p>Cargo</p>
+        </div>
+        <div class="time-p">
+           <img src="assets/img/user.svg" alt="membro da equipe">
+             <h2>Nome</h2>
+            <p>Cargo</p>
+        </div>
+        <div class="time-p">
+            <img src="assets/img/user.svg" alt="membro da equipe">
+             <h2>Nome</h2>
+            <p>Cargo</p>
+        </div>
+        <div class="time-p">
+            <img src="assets/img/user.svg" alt="membro da equipe">
+             <h2>Nome</h2>
+            <p>Cargo</p>
+        </div>
+    </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="page-footer font-small indigo footer-color" id="contato">
+        <!-- Footer Links -->
+        <div class="container text-center text-md-left">
+
+            <!-- Grid row -->
+            <div class="row">
+
+                <!-- Grid column -->
+                <div class="col-md-3 mx-auto">
+
+                    <!-- Links -->
+                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contato</h5>
+
+                    <ul class="list-unstyled mb-4">
+                        <li>
+                            <p>Telefone:<br>
+                                (13)1337-1337</p>
+                            <hr>
+                        </li>
+                        <li>
+                            <p>E-mail:<br>
+                                teste.testante@tester.teste
+                            </p>
+                        </li>
+                    </ul>
+
+                </div>
+                <!-- Grid column -->
+
+                <hr class="clearfix w-100 d-md-none">
+
+                <!-- Grid column -->
+                <div class="col-md-3 mx-auto">
+
+                    <!-- Links -->
+                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Sobre</h5>
+
+                    <ul class="list-unstyled">
+                        <li>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                            tempor incididunt ut labore et dolore magna aliqua.
+                            </p>
+                        </li>
+
+                    </ul>
+
+                </div>
+                <!-- Grid column -->
+
+                <hr class="clearfix w-100 d-md-none">
+
+                <!-- Grid column -->
+                <div class="col-md-3 mx-auto">
+
+                    <!-- Links -->
+                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Onde estamos</h5>
+
+                    <ul class="list-unstyled">
+                        <li>
+                            <p>
+                                Av. Dr. Flávio Henrique Lemos, 585 - Portal Itamaracá, Taquaritinga - SP,
+                                15900-000
+                            </p>
+                            <hr>
+                        </li>
+                        <li>
+                            <a href="https://www.openstreetmap.org/way/303846200">Ver no mapa</a>
+                        </li>
+                    </ul>
+
+                </div>
+                <!-- Grid column -->
+
+                <hr class="clearfix w-100 d-md-none">
+
+
+
+            </div>
+            <!-- Grid row -->
+
+        </div>
+        <!-- Footer Links -->
+
+        <!-- Copyright -->
+        <section class="copy">
+            <div>
+                © 2019 Copyright: Atlética-TQ
+            </div>
+            <div class="csocial">
+                <a href="https://www.facebook.com/chamanomamute/"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-instagram"></i></a>
+            </div>
+            <div>
+                <span>Desenvolvido por:</span><a href="http://201.55.32.21:8001/nefe/"> NEFE</a>
+            </div>
+        </section>
+        <!-- Copyright -->
+
+    </footer>
+<!-- Footer --> 
+    <!-- Footer -->  
+  
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+    <script>
+
+     //scrollSpy function
+    function scrollSpy() {
+      var sections = ['eventos', 'time', 'contato'];
+      var current;
+      for (var i = 0; i < sections.length; i++) {
+        if ( $('#'+sections[i]).offset().top <= $(window).scrollTop() ) {
+          current = sections[i];
+        }
+      }
+      $("a[href='#"+current+"']").addClass('active');
+      $("a").not("a[href='#"+current+"']").removeClass('active');      
+    }
+    // smooth scrolling navigation
+    $("a").click( function() {
+      var target = $(this).attr("href");
+      $("body, html").animate({
+        scrollTop: $(target).offset().top
+      }, 1000);
+      return false;
+    });
+    //scrollSpy call
+    $(document).ready( function() {
+      scrollSpy();
+    });
+    $(window).scroll( function() {
+      scrollSpy();
+    });
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file