Partials and layout

aanamarr · Dec 3, 2024 · 2748b0c · 2748b0c
1 parent ddd8db5
commit 2748b0c
Show file tree

Hide file tree

Showing 25 changed files with 67 additions and 57 deletions.
diff --git a/public/images/cover.jpeg → public/images/1.png b/public/images/cover.jpeg → public/images/1.png
diff --git a/public/images/lpbts-mod05-img01-desk.png → public/images/2.png b/public/images/lpbts-mod05-img01-desk.png → public/images/2.png
diff --git a/public/images/lpbts-mod05-img04-mob.png → public/images/3.png b/public/images/lpbts-mod05-img04-mob.png → public/images/3.png
diff --git a/public/images/lpbts-mod05-img03-mob.png → public/images/4.png b/public/images/lpbts-mod05-img03-mob.png → public/images/4.png
diff --git a/public/images/ico-arrow.png b/public/images/ico-arrow.png
diff --git a/public/images/ico-menu.png b/public/images/ico-menu.png
diff --git a/public/images/ico-scroll-down.png b/public/images/ico-scroll-down.png
diff --git a/public/images/[email protected] b/public/images/[email protected]
diff --git a/src/index.html b/src/index.html
@@ -1,26 +1,28 @@
 <!DOCTYPE html>
 <html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Adalab Web Starter Kit</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="./scss/main.scss" />
-    <link rel="stylesheet" href="./scss/core/_reset.scss" />
-  </head>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Adalab Web Starter Kit</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./scss/main.scss" />
+</head>
 
-  <body>
+<body>
 
-    <load src="./partials/header.html"/>
+  <load src="./partials/header.html"/>
 
-    <main>
-      <load src="./partials/posts.html"/>
-      <load src="./partials/autor.html"/>
+  <main>
 
-    </main>
+    <load src="./partials/section1.html"/>
+    <load src="./partials/section2.html"/>
+    <load src="./partials/section3.html"/>
 
-    <load src="./partials/footer.html"/>
+  </main>
+
+  <load src="./partials/footer.html"/>
 
     <script src="./js/main.js"></script>
-  </body>
+</body>
+
 </html>
diff --git a/src/partials/article.html b/src/partials/article.html
@@ -0,0 +1,4 @@
+<article>
+    <img src="{=$images}" alt="">
+    <h3>{=$title}</h3>
+</article>
diff --git a/src/partials/autor.html b/src/partials/autor.html
diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -1,5 +1,5 @@
 <footer>
-    <button><img src="" alt=""></button>
+    <button><img src="./images/ico-arrow.png" alt=""></button>
     <nav>
         <ul>
             <a href="">ZAPATILLAS</a>

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,4 +1,3 @@
-<header>
-    <img src="/public/images/lpbts-mod05-img01-desk.png" alt="logo">
-    <h1>LOGO</h1>
+<header class="header">
+    <img src="./images/ico-menu.png" alt="ico-menu">
 </header>
diff --git a/src/partials/posts.html b/src/partials/posts.html
diff --git a/src/partials/section1.html b/src/partials/section1.html
@@ -0,0 +1,9 @@
+<section>
+    <article>
+        <h1>comienzos compartidos</h1>
+        <p>Todo lo que necesitan para volver al cole con ilusión</p>
+    </article>
+    <div>
+        <button><img src="./images/ico-scroll-down.png" alt=""></button>
+    </div>
+</section>
diff --git a/src/partials/section2.html b/src/partials/section2.html
@@ -0,0 +1,10 @@
+<section>
+    <article>
+        <h2>HISTORIAS, MODA Y ROPA DEPORTIVA</h2>
+        <h3>TU TIENDA DE DEPORTE</h3>
+        <div>
+            <p>El deporte nos mantiene en forma. Nos mantiene alerta. Nuestra ropa deportiva para hombre y mujer te ofrece las últimas tecnologías, a la altura de tu rendimiento, para que superes tu mejor marca personal.</p>
+        </div>
+    </article>
+    <button>Comprar</button>
+</section>
diff --git a/src/partials/section3.html b/src/partials/section3.html
@@ -0,0 +1,16 @@
+<section>
+    <article>
+        <div>
+            <h3>¡Prepáralos con tus marcas favoritas!</h3>
+            <h2>VUELTA AL COLE</h2>
+        </div>
+        <div>
+            <load src="/partials/article.html" images="/images/2.png" title="Mochila"/>
+            <load src="/partials/article.html" images="/images/3.png" title="Deporte"/>
+            <load src="/partials/article.html" images="/images/4.png" title="Bolsas"/>
+        </div>
+    </article>
+
+    <button>Empezar ahora</button>
+
+</section>
diff --git a/src/scss/core/_reset.scss b/src/scss/core/_reset.scss
@@ -1,10 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root{
-  font-family:'Courier New', Courier, monospace;
-  font-size:0;
-}

diff --git a/src/scss/core/_variables.scss b/src/scss/core/_variables.scss
@@ -1,6 +1 @@
-// fonts
-$font-main: 'Roboto', sans-serif;
 
-// colors
-$color-bg: #f3f4f5;
-$color-secondary: #999;
diff --git a/src/scss/layout/_autor.scss b/src/scss/layout/_autor.scss
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
@@ -0,0 +1,3 @@
+.header{
+    background-color: green;
+}
diff --git a/src/scss/layout/_article.scss → src/scss/layout/_section1.scss b/src/scss/layout/_article.scss → src/scss/layout/_section1.scss
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,6 +1,4 @@
 @import 'core/variables';
 @import 'core/reset';
 @import 'layout/header';
-@import 'layout/footer';
-@import 'layout/article';
-@import 'layout/autor';
+@import 'layout/section1';
diff --git a/vite.config.js b/vite.config.js
@@ -56,6 +56,9 @@ export default defineConfig({
   },
   server: {
     open: "/index.html",
+    watch:{
+      usePolling:true
+    }
   },
   plugins: [
     injectHTML(),