nuevos cambios

Claraescobar123 · Aug 5, 2020 · 6cb880b · 6cb880b
1 parent a505b25
commit 6cb880b
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 122 deletions.
diff --git a/src/css/createAccount.css b/src/css/createAccount.css
@@ -0,0 +1,70 @@
+/*SECCIÓN CREAR CUENTA*/
+
+#iconoOne{
+    width: 50%;
+    height: 30%;
+    margin: auto;
+    margin-top: 80%;
+
+  }
+  #createAccount{
+      width:300px;
+      height: 400px;
+      color:white;
+      font-size: 12px;
+      display: flex;
+      margin: auto;
+      justify-content: center;
+      flex-direction: column;
+      font-family: 'Comfortaa', cursive;
+  }
+  .startButton {
+      color: #fff;
+      height: 30px;
+      line-height: 30px;
+      margin: auto;
+      margin-top: 10% ;
+      margin-left: 30%;
+      border-radius: 10px;
+      background: rgb(39, 131, 206);
+      font-family:'Comfortaa', cursive;
+      /*z-index: -1;*/
+      }
+  .controls{
+      background: black;
+      color: white;
+      border-bottom: 1px solid white ;
+  }
+  @media screen and (max-width:1024px){
+    #createAccount{
+      width:400px;
+      height: 500px;
+      color:white;
+      font-size: 12px;
+    }
+    #iconoOne{
+      margin-top: 140%;
+  }
+  .startButton {
+    margin-left: 35%;
+  }
+  }
+
+  @media screen and (max-width:768px){
+    #iconoOne{
+      margin-top: 50%;
+  }
+  }
+
+  @media screen and (max-width:425px){
+    #createAccount{
+      width:300px;
+      height: 400px;
+      color:white;
+      font-size: 9px;
+    }
+    #iconoOne{
+      margin-top: 50%;
+  }
+  }
+
diff --git a/src/css/thanksAccount.css b/src/css/thanksAccount.css
@@ -0,0 +1,79 @@
+/*SECCIÓN GRACIAS CUENTA*/
+#thanku {
+    background-image: url("../img/fondovhs.png");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: 100vw 100vh;
+    }
+#thankAccount{
+    background: rgb(0,0,0, 0.6);
+    width:300px;
+    height: 400px;
+    color:white;
+    font-size: 15px;
+    font-family:'Comfortaa', cursive;
+    display: flex;
+    margin: auto;
+    margin-top: 8%;
+    text-align: center;
+    justify-content: space-around;
+    flex-direction: column;
+}
+.buttonContinue {
+    color: #fff;
+    width:200px;
+    height: 40px;
+    line-height: 30px;
+    font-size: 15px;
+    border-radius: 5px;
+    background: #06B8C7;
+    font-family:'Comfortaa', cursive;
+    text-align: center;
+    justify-content: center;
+    /*z-index: -1;*/
+    }
+#icono{
+    height: 40%;
+    width: 70%;
+    margin-left: 15%;
+}
+@media only screen and (max-width:1024px){
+    #thankAccount{
+    width:500px;
+    height: 650px;
+    font-size: 18px;
+    margin-top: 25%;
+    }
+    .buttonContinue {
+    width:400px;
+    height: 40px;
+    font-size: 18px;
+    }
+}
+@media only screen and (max-width:768px){
+    #thankAccount{
+    width:300px;
+    height: 450px;
+    font-size: 14px;
+    margin-top: 25%;
+    }
+    .buttonContinue {
+    width:250px;
+    height:40px;
+    font-size: 14px;
+    }
+}
+@media only screen and (max-width:425px){
+
+#thankAccount{
+    width:200px;
+    height: 350px;
+    font-size: 10px;
+    margin-top:25%;
+    }
+.buttonContinue {
+        width:150px;
+        height:40px;
+        font-size: 10px;
+    }
+}
diff --git a/src/index.html b/src/index.html
@@ -7,49 +7,41 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>HELIVISUEL</title>
 </head>
-<body>
-  <!--CREA UNA NUEVA CUENTA-->
-  <div id="account" class="accountOne" style="display: none;">
-    <section id="createAccount">
-      <h1>Crea una nueva Cuenta</h1>
-
-      <h2>Username</h2>
-      <input type="text" id="nameUser" class="controls" placeholder="Nombre de Usuario"/>
-
-      <h2>Email</h2>
-      <input type="text" id="correo" class="controls" placeholder="[email protected]"/>
-
-      <h2>Password</h2>
-      <input type="text" id="contraseña" class="controls" placeholder="*********"/>
-
-      <h2>Birth Date</h2>
-      <input type="text" id="birthday" class="controls" placeholder="27/08/20"/>
-
-      <div id="hi">
-      <button id="buttonOne" class="startButton">REGISTRARSE</button>
-      </div>
-
-    </section>
-  </div>
-
-  <!--GRACIAS-->
-  <div id="thanks" class="thanku" style="display: block;">
-    <section id="thankAccount">
-
-      <img src="img/besticono.png" id="icono">
-      <h1>Gracias por crear una cuenta</h1> 
-
-      <div id="th">
-      <button id="continue" class="buttonContinue">CONTINUAR</button>
-      </div>
-
-    </section>
-  </div>
+  <body>
+  <header id="header" >
+    <nav>
 
+    </nav>
+  </header>
+  <main id="root"></main>
   <footer>
     &copy;2020, Todos los derechos reservados - |D.D.C| - HELIVISUEL
   </footer>
-
-  <script type="module" src="main.js"></script>
+<!-- The core Firebase JS SDK is always required and must be listed first -->
+<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
+
+<!-- TODO: Add SDKs for Firebase products that you want to use
+  https://firebase.google.com/docs/web/setup#available-libraries -->
+<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
+
+<script>
+  // Your web app's Firebase configuration
+  var firebaseConfig = {
+    apiKey: "AIzaSyCmwVGYwXPthsBRzH0hz4SUijhubVfRtNg",
+    authDomain: "social-network-d53d0.firebaseapp.com",
+    databaseURL: "https://social-network-d53d0.firebaseio.com",
+    projectId: "social-network-d53d0",
+    storageBucket: "social-network-d53d0.appspot.com",
+    messagingSenderId: "718332221363",
+    appId: "1:718332221363:web:ac38ad63f0944ab878ddc6",
+    measurementId: "G-7Z7XZEK973"
+  };
+  // Initialize Firebase
+  let proy = firebase.initializeApp(firebaseConfig);
+  console.log(proy.name);
+  firebase.analytics();
+</script>
+<script type="module" src="main.js"></script>
 </body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,13 @@
 // Este es el punto de entrada de tu aplicacion
 
 import { myFunction } from './lib/index.js';
+import otherThank from './views/thankAccount.js';
+import createAccount from './views/createAccount.js';
 
-myFunction();
+header.style.display = 'none';
+const body = window.root;
 
+body.appendChild(otherThank());
+body.appendChild(createAccount());
+console.log(otherThank);
+myFunction();
diff --git a/src/style.css b/src/style.css
@@ -1,86 +1,40 @@
-@import url('https://fonts.googleapis.com/css2?family=Share:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Comfortaa&family=Source+Sans+Pro&display=swap');
+@import "css/createAccount.css";
+@import "css/thanksAccount.css";
 
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Share', cursive;
-    /*background: black;*/
-    }  
-footer {
-    height: 40px;
-    line-height: 20px;
-    font-size: 12px;
-    background: black;
-    border-top:2px solid white;
-    color: white;
-    text-align: center;
-    justify-content: center;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin:auto;
-    z-index: 10;
-    }
-#createAccount{
-    color:white;
-    font-size: 12px;
-    display: flex;
-    margin-left:30%;
-    margin-top:10%;
-    position:absolute;
-    justify-content: center;
-    flex-direction: column;
-}
-.startButton {
-    color: #fff;
-    height: 30px;
-    line-height: 30px;
-    margin-top: 10% ;
-    margin-left: 25%;
-    position: absolute;
-    border-radius: 10px;
-    background: rgb(39, 131, 206);
-    font-family:'Share', cursive;
-    /*z-index: -1;*/
-    }
-.controls{
-    background: black;
-    border-bottom: 1px solid white ;
+body{
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  height: 100vh;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  }
+
+main{
+  height: 100%;
 }
 
-#thankAccount{
-    background: transparent;
-    color:white;
-    font-size: 12px;
-    display: flex;
-    margin-left:25%;
-    margin-top:20%;
-    position:absolute;
-    justify-content: center;
-    flex-direction: column;
+header{
+  height: 50px;
 }
-.buttonContinue {
-    color: #fff;
-    height: 30px;
-    line-height: 30px;
-    margin-top: 10% ;
-    margin-left: 30%;
-    position: absolute;
-    border-radius: 10px;
-    background: rgb(39, 131, 206);
-    font-family:'Share', cursive;
-    /*z-index: -1;*/
-    }
-#icono{
-    height: 50%;
-    width: 70%;
-    margin-left: 15%;
+
+footer{
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  font-family: 'Anton', sans-serif;
+  font-size: 0.7em;
+  background: #000;
+  height: 50px;
+  border-top: 3px solid #FFFFFF;
 }
-body {
-    background: url("img/fondovhs.png");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: 100vw 100vh;
-    }
+
+@media (min-width: 1000px){
+  footer{
+    height: 70px;
+    font-size: 1em;
+  }
+}