other changes

Claraescobar123 · Aug 10, 2020 · 3f0ab02 · 3f0ab02
2 parents 6cb880b + 12d0f56
commit 3f0ab02
Show file tree

Hide file tree

Showing 18 changed files with 367 additions and 163 deletions.
diff --git a/src/css/background/home.png b/src/css/background/home.png
diff --git a/src/css/background/recoveraccaunt.png b/src/css/background/recoveraccaunt.png
diff --git a/src/css/background/thanksaccount.png b/src/css/background/thanksaccount.png
diff --git a/src/css/createAccount.css b/src/css/createAccount.css
@@ -1,70 +1,45 @@
-/*SECCIÓN CREAR CUENTA*/
+.accountOne{
+  height: 100%;
+  display: flex;
+  padding: 0 20px;
+}
 
-#iconoOne{
-    width: 50%;
-    height: 30%;
+  #createAccount{
     margin: auto;
-    margin-top: 80%;
-
+    width: 300px;
+    height: 400px;
+    color:white;
+    font-family: 'Comfortaa', cursive;
   }
-  #createAccount{
-      width:300px;
-      height: 400px;
-      color:white;
-      font-size: 12px;
-      display: flex;
-      margin: auto;
-      justify-content: center;
-      flex-direction: column;
-      font-family: 'Comfortaa', cursive;
+
+  #account{
+    margin: auto;
+    width: 200px;
+    height: 300px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+    flex-direction: column;
   }
-  .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{
+      display:block;
       background: black;
       color: white;
       border-bottom: 1px solid white ;
+      border-radius: 0px;
+      text-align: left;
   }
-  @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 (min-width:768px){
+    #account{
+    width: 300px;
+    padding: 0;
   }
-
-  @media screen and (max-width:425px){
-    #createAccount{
-      width:300px;
-      height: 400px;
-      color:white;
-      font-size: 9px;
+    .controls{
+      width: 300px;
     }
-    #iconoOne{
-      margin-top: 50%;
-  }
   }
-
diff --git a/src/css/home.css b/src/css/home.css
@@ -0,0 +1,28 @@
+.home{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url(background/home.png);
+  background-size: cover;
+  padding: 30px;
+}
+
+.welcome{
+  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  font-family: 'Anton', sans-serif;
+  text-align: center;
+  max-width: 300px;
+  height: 300px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 3px solid #FFFFFF;
+  padding: 10px;
+}
+
+@media (min-width: 740px) {
+  .welcome{
+      font-size: 1.5em;
+  }
+}
diff --git a/src/css/login.css b/src/css/login.css
@@ -0,0 +1,90 @@
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#login{
+  height: 450px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.input-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+}
+
+#login .logo{
+    max-width: 50%;
+    display:inline-block;
+}
+
+.input-container p{
+    font-size: 12px;
+    margin-top:10px;
+    font-family: 'Comfortaa';
+    padding: 15px;
+
+}
+
+.createAccount p {
+    color: white;
+    margin: 0px;
+    text-align: center;
+    font-family: 'Comfortaa';
+    font-size: 12px;
+}
+
+.createAccount .google {
+
+    margin-top: 10px;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+
+}
+
+.link {
+    color: #06B8C7;
+    font-family: Comfortaa;
+    font-size: 12px;
+
+}
+
+
+/*Tablet--------------------*/
+@media screen and (min-width: 768px) {
+
+#login .logo{
+    width: 30%;
+}
+#login .username   {
+        margin-top: 10px;
+
+      }
+
+}
+
+/* Desktop---------------------- */
+ @media screen and (min-width: 1127px) {
+   #login{
+     height: 550px;
+   }
+
+    #login .username   {
+            margin-top: 10px;
+            font-size: 15px;
+          }
+
+          #login .input-container p{
+              font-size: 15px;
+                      }
+  }
diff --git a/src/css/recover.css b/src/css/recover.css
@@ -0,0 +1,32 @@
+.recover{
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-image: url(background/recoveraccaunt.png);
+  background-size: cover;
+  background-position: center;
+  padding: 30px;
+}
+
+.cont{
+  text-align: center;
+  display: flex;
+  width: 400px;
+  height: 400px;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+h2{
+  font-family: 'Comfortaa';
+  font-size: 1.2em;
+}
+
+.recover p{
+  font-family: 'Source Sans Pro';
+  font-size: 1em;
+  display: none;
+}
diff --git a/src/css/thanksAccount.css b/src/css/thanksAccount.css
@@ -1,79 +1,27 @@
-/*SECCIÓN GRACIAS CUENTA*/
 #thanku {
-    background-image: url("../img/fondovhs.png");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: 100vw 100vh;
-    }
+height: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+background-image: url("background/thanksaccount.png");
+background-size:cover;
+}
+
 #thankAccount{
     background: rgb(0,0,0, 0.6);
-    width:300px;
+    max-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;
-    }
+    align-self: center;
+    width: 50%;
 }
-@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/img/google.png b/src/img/google.png
diff --git a/src/img/icon.png b/src/img/icon.png
diff --git a/src/index.html b/src/index.html
@@ -5,23 +5,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>HELIVISUEL</title>
+  <link rel="stylesheet" href="/style.css">
+  <title>Helivisuel</title>
 </head>
-  <body>
+<body>
   <header id="header" >
     <nav>
 
     </nav>
   </header>
   <main id="root"></main>
-  <footer>
-    &copy;2020, Todos los derechos reservados - |D.D.C| - HELIVISUEL
+  <footer id="footer">
+    <p> &copy; Todos los derechos reservados - |D.D.C|  -  HELIVISUEL   </p>
   </footer>
-<!-- The core Firebase JS SDK is always required and must be listed first -->
+  <!-- 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 -->
+https://firebase.google.com/docs/web/setup#available-libraries -->
 <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
 
 <script>
@@ -41,7 +42,6 @@
   console.log(proy.name);
   firebase.analytics();
 </script>
-<script type="module" src="main.js"></script>
+  <script type="module" src="main.js"></script>
 </body>
-
-</html>
+</html>