diff --git a/conf-por-asistir.php b/conf-por-asistir.php
new file mode 100644
index 0000000..60a3f67
--- /dev/null
+++ b/conf-por-asistir.php
@@ -0,0 +1,5 @@
+<?php
+  include 'views/header.php';
+  include 'views/conf-por-asistir.view.php';
+  include 'views/footer.php';
+ ?>
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..41305d3
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,309 @@
+*{
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+  /* user-select: none; */
+}
+
+html{
+  font-size: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  /* box-shadow: inset 0 0 5px grey; */
+  border-radius: 10px;
+  background-color: #D4F0FC;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: red;
+  border-radius: 10px;
+  background-color: #01303F;
+  border-right: 1.3px solid #D4F0FC;
+}
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(1,48,63,0.9);
+  transition: 2s;
+}
+
+/*ESTILOS DEL HERO INICIO*/
+
+.header{
+  height: 95vh;
+  background-image: url(../img/hero.jpg);
+  background-size: cover;
+  background-position: top;
+  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+  position: relative;
+}
+
+.logo-box{
+  position: absolute;
+  top: 4rem;
+  left: 10rem;
+}
+
+.logo{
+  height: 110px;
+  animation: moveInLeft 0.6s ease-in;
+}
+
+.text-box{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.heading-primary{
+ color: #fff;
+ text-transform: uppercase;
+ font-family: 'Share Tech', sans-serif;
+ margin-bottom: 6rem;
+ font-weight: lighter;
+}
+
+.heading-primary-main{
+  display: block;
+  font-size: 70px;
+}
+
+.heading-primary-sub{
+  display: block;
+  font-size: 60px;
+}
+
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translate(-10rem);
+  }
+
+  80%{
+    transform: translate(1rem);
+  }
+
+  100%{
+    opacity: 1;
+    transform: translate(0px);
+  }
+}
+
+/*
+      ANIMACION PARA EL STICKY MENU
+ @keyframes moveInRight {
+  0% {
+    opacity: 0;
+    transform: translate(10rem);
+  }
+
+  80%{
+    transform: translate(-1rem);
+  }
+
+  100%{
+    opacity: 1;
+    transform: translate(0px);
+  }
+} */
+
+@keyframes moveInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+
+  100%{
+    opacity: 1;
+    transform: translate(0px);
+  }
+}
+
+.bot{
+  background-color: #fff;
+  color: #02A9F7;
+  width: 300px;
+  height: 70px;
+  font-size: 20px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+}
+
+.bot:link,
+.bot:visited {
+  text-transform: uppercase;
+  text-decoration: none;
+  padding: 23px 40px;
+  display: inline-block;
+  border-radius: 100px;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.bot:hover{
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+.bot:active{
+  transform: translate(-1px);
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+}
+
+.bot::after{
+  content: "";
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left:0;
+  z-index: -1;
+  transition: all .4s;
+}
+
+.bot::after{
+  background-color: #fff;
+}
+
+.bot:hover::after{
+  transform: scaleX(1.4) scaleY(1.6);
+  opacity: 0;
+}
+
+.bot-animated{
+  animation: moveInBottom .4s ease-out .75s;
+  animation-fill-mode: backwards;
+}
+
+/*ESTILOS DEL HERO FIN*/
+
+
+
+/* ESTILOS DEL LOGIN - REGISTER INICIO */
+.backImg{
+  position: absolute;
+  width: 600px;
+  height: 100vh;
+}
+.logo-flisol{
+  position: absolute;
+  height: 86px;
+  margin-top: 20px;
+}
+
+
+.wrapper{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background-color: #D4F0FC;
+  height: 100vh;
+}
+
+.container{
+  width: 450px;
+  margin: 0px auto;
+  padding-top: 120px;
+  position: absolute;
+}
+
+
+.signup,
+.login{
+  width: 50%;
+  background-color: rgba(0,0,0,0.42);
+  float: left;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  cursor: pointer;
+  text-transform: uppercase;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  color: #fff;
+  font-family: 'Lato', sans-serif;
+}
+
+.signup-form,
+.login-form{
+  background: rgba(0,0,0,0.42);
+  padding: 30px 40px;
+  clear: both;
+  width: 100%;
+  box-sizing: border-box;
+  height: 400px;
+}
+
+.signup-form{
+  height: 420px;
+  position: relative;
+}
+
+.signup-form i, .login-form i{
+  position: absolute;
+  padding-left: 0px;
+  padding-top: 16px;
+  font-size: 30px;
+  color: #fff;
+}
+
+.input{
+  width: 100%;
+  padding: 10px 40px;
+  /* padding-top: 30px; */
+  box-sizing: border-box;
+  margin: 15px 0px;
+  color: #fff;
+  font-size: 14px;
+  border: none;
+  border-bottom: 2px solid #fff;
+  transform: all 0.5s ease;
+  background-color: transparent;
+}
+
+.input::placeholder{
+  color: #fff;
+}
+
+.input:focus{
+  border: none;
+  outline: none;
+  border-bottom: 2px solid #fff;
+}
+
+.btn{
+  width: 100%;
+  font-family: 'Lato', sans-serif;
+  font-size: 17px;
+  background: transparent;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  text-transform: uppercase;
+  color: #fff;
+  font-weight: normal;
+  letter-spacing: 1px;
+  cursor: pointer;
+  margin-top: 15px;
+  margin-bottom: 30px;
+  border: 2px solid #fff;
+  border-radius: 10px;
+}
+
+.btn:hover{
+  transition: 0.4s;
+  background-color: #fff;
+  color: #000;
+}
+
+/* ESTILOS DEL LOGIN - REGISTER FIN */
diff --git a/img/back-log.jpg b/img/back-log.jpg
new file mode 100644
index 0000000..ac3b131
Binary files /dev/null and b/img/back-log.jpg differ
diff --git a/img/flisol.png b/img/flisol.png
new file mode 100644
index 0000000..cf22f01
Binary files /dev/null and b/img/flisol.png differ
diff --git a/img/hero.jpg b/img/hero.jpg
new file mode 100644
index 0000000..a809071
Binary files /dev/null and b/img/hero.jpg differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..aee050e
--- /dev/null
+++ b/index.php
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/style.css">
+    <!-- <link rel="shortcut icon" href="image/png" href="img/favicon.png"> -->
+
+    <title>Flisol 2019</title>
+  </head>
+  <body>
+    <header class="header">
+      <div class="logo-box">
+        <img src="img/flisol.png" alt="Logo" class="logo">
+      </div>
+
+      <div class="text-box">
+        <h1 class="heading-primary">
+          <span class="heading-primary-main">Texto principal</span>
+          <span class="heading-primary-sub">texto secundario</span>
+        </h1>
+
+        <a href="#" class="bot bot-white bot-animated">¡Registrate Gratis!</a>
+      </div>
+    </header>
+  </body>
+</html>
diff --git a/register.php b/register.php
new file mode 100644
index 0000000..9d8e619
--- /dev/null
+++ b/register.php
@@ -0,0 +1,5 @@
+<?php
+include 'views/header.php';
+include 'views/login.view.php';
+include 'views/footer.php';
+ ?>
diff --git a/views/conf-por-asistir.view.php b/views/conf-por-asistir.view.php
new file mode 100644
index 0000000..3800ce9
--- /dev/null
+++ b/views/conf-por-asistir.view.php
@@ -0,0 +1,6 @@
+<body>
+  <div class="contenedor">
+    <h1 class="titulo">Contenido del sitio</h1>
+    <a href="cerrar.php">Cerrar Sesion</a>
+  </div>
+</body>
diff --git a/views/footer.php b/views/footer.php
new file mode 100644
index 0000000..5f85cab
--- /dev/null
+++ b/views/footer.php
@@ -0,0 +1 @@
+</html>
diff --git a/views/header.php b/views/header.php
new file mode 100644
index 0000000..0dd0be7
--- /dev/null
+++ b/views/header.php
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Flisol</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css" type="text/css">
+
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $(".login-form").hide()
+        $(".login").css("background", "none")
+
+        $(".login").click(function(){
+          $(".signup-form").hide()
+          $(".login-form").show()
+          $(".signup").css("background", "none")
+          $(".login").css("background", "rgba(0,0,0,0.42)")
+        })
+
+        $(".signup").click(function(){
+          $(".signup-form").show()
+          $(".login-form").hide()
+          $(".signup").css("background", "rgba(0,0,0,0.42)")
+          $(".login").css("background", "none")
+        })
+
+        $(".btn").click(function(){
+            $(".input").val("")
+        })
+
+      })
+    </script>
+  </head>
diff --git a/views/login.view.php b/views/login.view.php
new file mode 100644
index 0000000..c04755b
--- /dev/null
+++ b/views/login.view.php
@@ -0,0 +1,47 @@
+<body>
+
+  <div class="wrapper">
+
+    <img src="img/back-log.jpg" class="backImg" width="200px" alt="">
+    <img src="img/flisol.png" class="logo-flisol" alt="">
+    <div class="container">
+
+      <div class="signup">Registrate</div>
+      <div class="login">Iniciar Sesión</div>
+
+       <!-- FORMULARIO DE SIGNUP -->
+
+       <form class="signup-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
+
+          <i class="far fa-envelope"></i>
+          <input type="text" placeholder="Direccion de correo" class="input" name="correo"><br />
+
+          <i class="far fa-user-circle"></i>
+          <input type="text" placeholder="Nombre completo" class="input" name="usuario"><br />
+
+          <i class="fas fa-lock"></i>
+          <input type="password" placeholder="Contraseña" class="input" name="password"><br />
+
+          <i class="fas fa-lock"></i>
+          <input type="password" placeholder="Confirmar contraseña" class="input" name="password2"><br />
+
+          <input type="submit" class="btn" value="Registrar">
+       </form>
+
+
+       <!-- FORMULARIO DE LOGIN -->
+       <form class="login-form" action="" method="get" name="login">
+
+          <i class="far fa-envelope"></i>
+          <input type="text" placeholder="Direccion de correo" class="input" name="correo"><br />
+
+          <i class="fas fa-lock"></i>
+          <input type="password" placeholder="Contraseña" class="input" name="password"><br />
+
+          <input type="submit" class="btn" value="Entrar">
+       </form>
+
+    </div>
+  </div>
+  
+</body>