Add files via upload

prom97 · Apr 18, 2023 · 51c88ec · 51c88ec
commit 51c88ec
Show file tree

Hide file tree

Showing 17 changed files with 725 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/galeria/pic1.jpg b/img/galeria/pic1.jpg
diff --git a/img/galeria/pic2.jpg b/img/galeria/pic2.jpg
diff --git a/img/galeria/pic3.jpg b/img/galeria/pic3.jpg
diff --git a/img/galeria/pic4.jpg b/img/galeria/pic4.jpg
diff --git a/img/galeria/pic5.jpg b/img/galeria/pic5.jpg
diff --git a/img/galeria/pic6.jpg b/img/galeria/pic6.jpg
diff --git a/img/galeria/pic7.jpg b/img/galeria/pic7.jpg
diff --git a/img/galeria/pic8.jpg b/img/galeria/pic8.jpg
diff --git a/img/icon1.png b/img/icon1.png
diff --git a/img/icon2.png b/img/icon2.png
diff --git a/img/icon3.png b/img/icon3.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/menu.svg b/img/menu.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,306 @@
+<!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">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>nqnFITNESS</title>
+</head>
+
+<body>
+    <button id="returnBtn" onclick="history.back()"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+        </svg>
+    </button>
+
+    <header>
+        <div class="contenedor">
+            <div class="menu">
+                <img src="img/logo.png" alt="logo"> <!-- logo -->
+                <img src="img/menu.svg" alt="menu" class="menu-icon"> <!-- menu responsive -->
+                <nav> <!-- menu -->
+                    <ul>
+                        <li><a href="">Home</a></li>
+                        <li><a href="#classesTitle">Classes</a></li>
+                        <li><a href="#classesTitle">Trainers</a></li>
+                        <li><a href="#contactTitle">Contact</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+        <div class="titular">
+            <h1>START YOUR FREE WORKOUT WITH US</h1>
+            <a href="">JOIN OUR GYM</a>
+        </div>
+    </header>
+
+    <section id="tarjetas">
+        <div class="contenedor">
+            <div class="contenedor-tarjetas">
+                <div class="tarjeta tarjeta-izq">
+                    <img src="img/icon1.png" alt="cardio">
+                    <h3>CARDIO WORKOUTS</h3>
+                    <p>Strengthen your heart and blood vessels. Improve the flow of oxygen throughout your body. Lower
+                        your blood pressure and cholesterol.</p>
+                    <a href="">READ MORE</a>
+                </div>
+                <div class="tarjeta tarjeta-mid">
+                    <img src="img/icon2.png" alt="strenght">
+                    <h3>STRENGHT WORKOUTS</h3>
+                    <p>Strength training exercises work your muscles by applying a resistance against which the muscles
+                        need to exert a force.</p>
+                    <a href="">READ MORE</a>
+                </div>
+                <div class="tarjeta tarjeta-der">
+                    <img src="img/icon3.png" alt="pump">
+                    <h3>PUMP WORKOUTS</h3>
+                    <p>Your muscles swell up during your workout, which is caused from the excessive amount of blood
+                        going into the muscle and filling it up the same way you would fill up a water balloon.</p>
+                    <a href="">READ MORE</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="classes">
+        <div class="contenedor">
+            <h2 id="classesTitle" class="italica">AMAZING CLASSES</h2>
+            <table>
+                <tr>
+                    <th class="italica">DAYS</th>
+                    <th class="italica">MONDAY</th>
+                    <th class="italica">TUESDAY</th>
+                    <th class="italica">WEDNESDAY</th>
+                    <th class="italica">THURSDAY</th>
+                    <th class="italica">FRIDAY</th>
+                </tr>
+                <tr class="fila-fondo-gris">
+                    <td class="italica">9.00 - 10.00</td>
+                    <td></td>
+                    <td></td>
+                    <td>
+                        <p class="negrita">Yoga</p>
+                        <p>Marcos Lombardi</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Zumba</p>
+                        <p>Daniel Smith</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Body Balance</p>
+                        <p>Luciana Valdebenito</p>
+                    </td>
+                </tr>
+                <tr class="fila-fondo-blanco">
+                    <td class="italica">10.00 - 12.00</td>
+                    <td>
+                        <p class="negrita">Yoga Dance</p>
+                        <p>Marcos Lombardi</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Zumba</p>
+                        <p>Lori Valdez</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Body Balance</p>
+                        <p>Lucas Rojo</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Yoga Dance</p>
+                        <p>Teresa Soto</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Zumba</p>
+                        <p>Daniel Smith</p>
+                    </td>
+                </tr>
+                <tr class="fila-fondo-gris">
+                    <td class="italica">15.00 - 16.00</td>
+                    <td></td>
+                    <td>
+                        <p class="negrita">Body Balance</p>
+                        <p>Lucas Rojo</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Yoga Dance</p>
+                        <p>Teresa Soto</p>
+                    </td>
+                    <td>
+                        <p class="negrita">Zumba</p>
+                        <p>Lori Waldez</p>
+                    </td>
+                    <td>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </section>
+
+    <section id="classes-mobile"> <!-- reemplazar tablas por divs, para responsive desing -->
+        <div class="contenedor">
+            <p class="italica">DAYS</p>
+            <p class="italica fila-fondo-gris">MONDAY</p>
+            <p class="italica horario-fondo">10.00 - 12.00</p>
+            <p class="negrita">Yoga Dance</p>
+            <p>Marcos Lombardi</p>
+            <p class="italica fila-fondo-gris">TUESDAY</p>
+            <p class="italica horario-fondo">10.00 - 12.00</p>
+            <p class="negrita">Zumba</p>
+            <p>Lori Valdez</p>
+            <p class="italica horario-fondo">15.00 - 16.00</p>
+            <p class="negrita">Body Balance</p>
+            <p>Lucas Rojo</p>
+            <p class="italica fila-fondo-gris">WEDNESDAY</p>
+            <p class="italica horario-fondo">9.00 - 10.00</p>
+            <p class="negrita">Yoga</p>
+            <p>Marcos Lombardi</p>
+            <p class="italica horario-fondo">10.00 - 12.00</p>
+            <p class="negrita">Body Balance</p>
+            <p>Lucas Rojo</p>
+            <p class="italica horario-fondo">15.00 - 16.00</p>
+            <p class="negrita">Yoga Dance</p>
+            <p>Teresa Soto</p>
+            <p class="italica fila-fondo-gris">THURSDAY</p>
+            <p class="italica horario-fondo">9.00 - 10.00</p>
+            <p class="negrita">Zumba</p>
+            <p>Daniel Smith</p>
+            <p class="italica horario-fondo">10.00 - 12.00</p>
+            <p class="negrita">Yoga Dance</p>
+            <p>Teresa Soto</p>
+            <p class="italica horario-fondo">15.00 - 16.00</p>
+            <p class="negrita">Zumba</p>
+            <p>Lori Waldez</p>
+            <p class="italica fila-fondo-gris">FRIDAY</p>
+            <p class="italica horario-fondo">9.00 - 10.00</p>
+            <p class="negrita">Body Balance</p>
+            <p>Luciana Valdebenito</p>
+            <p class="italica horario-fondo">10.00 - 12.00</p>
+            <p class="negrita">Zumba</p>
+            <p>Daniel Smith</p>
+        </div>
+    </section>
+
+    <section id="galeria">
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic1.jpg" alt="class 1">
+            <div class="oculto">
+                <h4>Class 1</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic2.jpg" alt="class 2">
+            <div class="oculto">
+                <h4>Class 2</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic3.jpg" alt="class 3">
+            <div class="oculto">
+                <h4>Class 3</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic4.jpg" alt="class 4">
+            <div class="oculto">
+                <h4>Class 4</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic5.jpg" alt="class 5">
+            <div class="oculto">
+                <h4>Class 5</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic6.jpg" alt="class 6">
+            <div class="oculto">
+                <h4>Class 6</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic7.jpg" alt="class 7">
+            <div class="oculto">
+                <h4>Class 7</h4>
+            </div>
+        </div>
+        <div class="foto">
+            <img class="img-hover" src="img/galeria/pic8.jpg" alt="class 8">
+            <div class="oculto">
+                <h4>Class 8</h4>
+            </div>
+        </div>
+    </section>
+
+    <div id="pageUp" onclick="scrollUp();"><i class="far fa-caret-square-up"></i></div>
+
+    <section id="contact">
+        <div class="contenedor">
+            <h2 id="contactTitle" class="italica">CONTACT US</h2>
+            <div class="info">
+                <p><i class="fas fa-phone-alt"></i> +54 299 123-4567</p>
+                <p><i class="fas fa-envelope"></i> nqnfitness@example.com</p>
+            </div>
+            <a href="" class="italica">CONTACT</a>
+            <p id="sobre-autor">Web Page created by <span class="resaltar">Pablo Damian Romero</span> | <span
+                    id="year"></span></p>
+        </div>
+    </section>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <!-- codigo jQuery insertado desde la nube (jQuery CDN) (minified)-->
+
+    <script> // Script para invocar funciones
+        $(document).ready(function () { // Define la función que se ejecutará cuando el documento esté listo
+            $('.foto').hover(function () { // llama al elemento div class='foto', para ejecutar una función cuando se pase el mouse por encima (hover)
+                $(this).find('.oculto').fadeIn(); // cuando suceda lo anterior, llama al div class='oculto' y lo muestra (por defecto tiene display: none)
+                // * fadeIn: muestra un elemento con animación en jQuery
+                // * find: busca el elemento (en este caso, this)
+                $(this).find('.img-hover').addClass('agrandar'); // al elemento actual (this) con class='img-hover' le añade la clase 'agrandar' mediante jQuery
+            }, // coma separadora para declarar otra función cuando el documento está listo
+                function () { // Función, cuando saco el mouse sobre la foto
+                    $(this).find('.oculto').fadeOut(); // mismo concepto anterior, pero en lugar de mostrar, oculta el elemento
+                    $(this).find('.img-hover').removeClass('agrandar'); // al elemento actual (this) con class='img-hover' le saca la clase 'agrandar' mediante jQuery
+                })
+
+            /* Animar menu con jQuery */
+            $('.menu-icon').click(function () {
+                $('nav').slideToggle(); // slideToggle = combinacion de slideUp y slideDown
+            })
+        })
+    </script>
+
+    <script>
+        var actualYear = new Date().getFullYear();
+        var elemYear = document.getElementById("year");
+        elemYear.innerHTML = actualYear;
+    </script>
+
+    <!-- show/hide return btn -->
+    <script>
+        var btn = document.getElementById("returnBtn");
+        if (window.history.length > 1) {
+            btn.classList.remove("d-none");
+            btn.classList.add("d-show");
+        } else {
+            btn.classList.add("d-none");
+            btn.classList.remove("d-show");
+        }
+    </script>
+
+    <script src="js/script.js"></script>
+</body>
+
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,18 @@
+/* Funciones para subir al principio de una página */
+function scrollUp(){
+    var $currentScroll = document.documentElement.scrollTop; // Obtiene el número de pixels desplazados
+    if($currentScroll > 0){
+        window.requestAnimationFrame(scrollUp); // window.requestAnimationFrame informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.
+        window.scrollTo(0, $currentScroll - ($currentScroll / 15)); // Velocidad de scroll
+    }
+}
+
+var $button = document.getElementById('pageUp');
+window.onscroll = function(){
+    var $scroll = document.documentElement.scrollTop;
+    if($scroll > 500){
+        $button.style.transform = 'scale(1)';
+       }else{
+           $button.style.transform = 'scale(0)';
+       }
+   }