Laboratoria · ErikaSuesca · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022
diff --git a/package.json b/package.json
diff --git a/src/firebase.js b/src/firebase.js
@@ -0,0 +1,19 @@
+// Import the functions you need from the SDKs you need
+import {initializeApp} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"
+import {getAuth } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js"
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyCxLhAk9jOlsC43X5vqcFhw-eBCbrELaI4",
+  authDomain: "newme-13925.firebaseapp.com",
+  projectId: "newme-13925",
+  storageBucket: "newme-13925.appspot.com",
+  messagingSenderId: "214920308604",
+  appId: "1:214920308604:web:ebebebccc31d42002be6f9"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
diff --git a/src/formularioUno.html b/src/formularioUno.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NewMe</title>
+</head>
+
+<body>
+    <main>
+        <section>
+            <div>
+                <img src="img/logoSandra.png" alt="logo de la aplicación NewMe">
+            </div>
+            <div>
+                <form>
+                    <div>
+                        <input type="email" name="emailUser" class="emailUser" id="emailUserId">
+                        <input type="password" name="passwordUser" class="emailUser" id="passwordUserId">
+                    </div>
+                    <div class="containerCat">
+                        <img src="img/gato.png" alt="gato negro decorativo">
+                        <input type="submit" name="btn_singUp" class="btn_singUp" id="btn_singUpId">
+                    </div>
+                    <div class="containerSpan">
+                        <span class="option">Or Sing Up With</span>
+                    </div>
+                    <div>
+                        <input type="button" name="withGoogle" class="btn_google" id="btn_googleId">
+                        <p> You don't have an account? <a href="">SING UP</a></p>
+                    </div>
+                </form>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/src/home.js b/src/home.js
@@ -0,0 +1,36 @@
+export const home = () => {
+const $sectionHome = document.createElement('section'),
+$divLogoContainer = document.createElement('div'),
+$figureLogo = document.createElement('figure'),
+$imgLogo = document.createElement('img'),
+$divWelcomeContainer = document.createElement('div'),
+$h1Slogan = document.createElement('h1'),
+$imgCat = document.createElement('img'),
+$divBtnClickHere = document.createElement('div'),
+$inputBtnClickHere = document.createElement('input');
+
+$sectionHome.classList.add('home'),
+$divLogoContainer.classList.add('c_logo','logo_container'),
+$figureLogo.classList.add('logo'),
+$divWelcomeContainer.classList.add('welcome','logo_container'),
+$inputBtnClickHere.classList.add('btn_click'),
+
+$imgLogo.setAttribute('src','img/logoSandra.png')
+$imgLogo.setAttribute('alt', 'logo de la aplicacion')
+$h1Slogan.textContent = 'I could you can!'
+$imgCat.setAttribute('src', 'img/gato.png')
+$imgCat.setAttribute('alt', 'gato negro decorativo')
+$inputBtnClickHere.setAttribute('type','button')
+$inputBtnClickHere.setAttribute('id','btn_click')
+$inputBtnClickHere.setAttribute('value','CLICK HERE')
+
+$sectionHome.appendChild($divLogoContainer).appendChild($figureLogo).appendChild($imgLogo)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($h1Slogan)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($imgCat)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($divBtnClickHere).appendChild($inputBtnClickHere)
+
+return $sectionHome;
+};
+
+
+
diff --git a/src/img/Vector 4.png b/src/img/Vector 4.png
diff --git a/src/img/Vector 5.png b/src/img/Vector 5.png
diff --git a/src/img/Vector 6.png b/src/img/Vector 6.png
diff --git a/src/img/candado.png b/src/img/candado.png
diff --git a/src/img/gato.png b/src/img/gato.png
diff --git a/src/img/loading.png b/src/img/loading.png
diff --git a/src/img/logoSandra.png b/src/img/logoSandra.png
diff --git a/src/img/niña.png b/src/img/niña.png
diff --git a/src/img/pngegg (11).png b/src/img/pngegg (11).png
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,19 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <link rel="icon" href="#">
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap" rel="stylesheet">
+  <title>NewMe</title>
 </head>
 <body>
+<main class="containerMain" id="containerMain">
+</main>
+
+
+
+
+
   <script type="module" src="main.js"></script>
 </body>
 </html>
diff --git a/src/login.js b/src/login.js
@@ -0,0 +1,34 @@
+  export const login = () => {
+    const $section = document.createElement("section"),
+  $divLogo = document.createElement("div"),
+  $imgLogo = document.createElement("img"),
+  $divContainerForm = document.createElement("div"),
+  $divForm = document.createElement("form"),
+  $divInput = document.createElement("div"),
+  $inputEmail = document.createElement("input"),
+  $inputPassword = document.createElement("input"),
+  $divContainerCat = document.createElement("div"),
+  $imgCat = document.createElement("img"),
+  $inputSingUp = document.createElement("input"),
+  $divContainerSpan = document.createElement("div"),
+  $spanOption = document.createElement("span"),
+  $divContainerRegister = document.createElement("div"),
+  $inputBtnGoogle = document.createElement("input"),
+  $pSingUp = document.createElement("p"),
+  $aSingUp = document.createElement("a");
+
+  $section.appendChild($divLogo).appendChild($imgLogo)
+  $section.appendChild($divContainerForm).appendChild($divForm)
+  $divForm.appendChild($divInput).appendChild($inputEmail)
+  $divForm.appendChild($divInput).appendChild($inputPassword)
+  $divForm.appendChild($divContainerCat).appendChild($imgCat)
+  $divForm.appendChild($divContainerCat).appendChild($inputSingUp)
+  $divForm.appendChild($divContainerSpan).appendChild($spanOption)
+  $divForm.appendChild($divContainerRegister).appendChild($inputBtnGoogle)
+  $divForm.appendChild($divContainerRegister).appendChild($pSingUp).appendChild($aSingUp)
+
+
+  console.log($section);
+  };
+
+
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,21 @@
 // Este es el punto de entrada de tu aplicacion
 
 import { myFunction } from './lib/index.js';
+import {login} from './login.js';
+import {home} from './home.js'
+
+login();
+console.log(home());
+
+
+
+window.addEventListener('DOMContentLoaded',() =>{
+    const main = document.getElementById('containerMain')
+    main.appendChild(home())
+    main.classList.add('containerMain')
+})
+
+
+//myFunction();
+
 
-myFunction();
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,149 @@
+:root{
+    --colorOrange: #FF9F00;
+    --colorTurquois: #03A7BB;
+    --colorDarkGrey: #C4C4C4;
+    --colorBlueLight:#A9D2F0;
+    --colorOlive:#C5D2B0;
+    --colorWhite:#FFF;
+    --colorBlack:#000000;
+    --colorGreen:#6ED788;
+    --colorForm: #546E85;
+    /*---------- colors-----------------*/
+    --fFamilyOleo:  'Oleo Script', cursive;
+    /*-------------tipos de letras-------------*/
+}
+html{
+    box-sizing: border-box;
+    font-size: 16px;
+}
+*,
+*::before,
+*::after{
+    box-sizing: inherit;
+}
+body{
+    margin: 0;
+    background-color: var(--colorTurquois);
+}
+img {
+    max-width: 100%;
+}
+.home{
+    margin-top: 1rem;
+}
+.logo{
+    padding: 2.2rem 2.2rem 0;
+    margin: 0;
+}
+.welcome{
+    padding: 3rem 3.6rem 0;
+    text-align: center;
+}
+.welcome h1{
+    font-family: var(--fFamilyOleo);
+    margin: 0;
+    font-size: 3.2rem;
+    line-height: 1;
+    color: var(--colorWhite);
+    padding: 0 0.5rem;
+    margin-bottom: 3rem;
+}
+.welcome img{
+    max-width: 4.5rem;
+    margin-bottom: -0.5rem;
+}
+.btn_click{
+    background: none;
+    width: 11rem;
+    border-radius: 1.4rem;
+    border: thick solid var(--colorOrange);
+    height: 3.6rem;
+    color: var(--colorWhite);
+    font-weight: bold;
+}
+@media  screen and ((min-width: 500px)) {
+main{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+figure{
+    position: relative;
+}
+
+figure::after{
+    position: absolute;
+    content:  "";
+    background-image: url("img/Vector\ 4.png");
+    display: block;
+    width: 349px;
+    height: 372px;
+    top: -29vh;
+    left: -10vw;
+}
+
+figure::before{
+    position: absolute;
+    content: "";
+    background-image: url(img/Vector\ 5.png);
+    background-repeat: no-repeat;
+    display: block;
+    width: 349px;
+    height: 372px;
+    top: -20vh;
+    right: -50vw;
+}
+
+/* .bg-manchitas {
+    background-image: url("img/Vector\ 4.png");
+    background-repeat: no-repeat;
+    background-size:  20%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.bg-manchitas::after{
+    content: "";
+    background-image: url("img/Vector\ 5.png");
+    background-repeat: no-repeat;
+    background-size:  20%;
+    position: fixed;
+    top: 0;
+    right: -80%;
+    width: 100%;
+    height: 100%;
+}
+.bg-manchitas::before{
+    content: "";
+    background-image: url("img/Vector\ 6.png");
+    background-repeat: no-repeat;
+    background-size: 25%;
+    background-position: bottom center;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    top: 0;
+    left: 15%;
+} */
+.home{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.home .logo_container{
+    width: 50%;
+}
+.c_logo {
+    text-align: end;
+}
+.c_logo img {
+    width: 75%;
+}
+.welcome{
+    padding: 0 14rem 0 0;
+}
+}
+
diff --git a/src/validation.js b/src/validation.js