Inicio Explorar Axuda
Rexistro Iniciar sesión
AldrickChavarria
/
Chieltik
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

Primer commit

EmilianoChavarria hai 1 ano
achega
ef5099139e
Modificáronse 8 ficheiros con 380 adicións e 0 borrados
Dividir vista Mostrar estatísticas de Diff
  1. BIN=BIN
      assets/img/heart.png
  2. BIN=BIN
      assets/img/img1Slider.jpg
  3. BIN=BIN
      assets/img/img2Slider.png
  4. BIN=BIN
      assets/img/img3Slider.jpg
  5. BIN=BIN
      assets/img/logo.png
  6. 89 0
      index.html
  7. 25 0
      main.js
  8. 266 0
      styles.css

BIN=BIN
assets/img/heart.png
Ver ficheiro


BIN=BIN
assets/img/img1Slider.jpg
Ver ficheiro


BIN=BIN
assets/img/img2Slider.png
Ver ficheiro


BIN=BIN
assets/img/img3Slider.jpg
Ver ficheiro


BIN=BIN
assets/img/logo.png
Ver ficheiro


+ 89 - 0
index.html
Ver ficheiro 

@@ -0,0 +1,89 @@
 
+<!DOCTYPE html>
 
+<html lang="es">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Navbar Responsive</title>
 
+    <link rel="stylesheet" href="styles.css">
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
+
 
+</head>
 
+
 
+<body>
 
+    <nav class="navbar">
 
+        <div class="navbar-left">
 
+            <img src="./assets/img/logo.png" alt="Logo" class="logo">
 
+            <div class="textC">
 
+                <img src="./assets/img/heart.png" alt="">
 
+                <span>Se voluntario</span>
 
+            </div>
 
+        </div>
 
+        <div class="navbar-center">
 
+            <ul class="nav-links">
 
+                <li><a href="#">Inicio</a></li>
 
+                <li><a href="#">Quienes Somos</a></li>
 
+                <li><a href="#">Que hacemos</a></li>
 
+                <li><a href="#">Informes</a></li>
 
+                <li><a href="#">Historias</a></li>
 
+                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
 
+            </ul>
 
+        </div>
 
+        <div class="navbar-right">
 
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
 
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
 
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
 
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
 
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
 
+        </div>
 
+        <div class="hamburger">
 
+            <span></span>
 
+            <span></span>
 
+            <span></span>
 
+        </div>
 
+    </nav>
 
+
 
+    <div class="mobile-menu">
 
+        <ul>
 
+            <li><a href="#">Inicio</a></li>
 
+            <li><a href="#">Quienes Somos</a></li>
 
+            <li><a href="#">Que hacemos</a></li>
 
+            <li><a href="#">Informes</a></li>
 
+            <li><a href="#">Historias</a></li>
 
+        </ul>
 
+
 
+        <div class="icons">
 
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
 
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
 
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
 
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
 
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
 
+        </div>
 
+    </div>
 
+
 
+    <!-- Esto es de la navbar
 
+    ------------------------------------------------ -->
 
+
 
+    <!-- Carrusel -->
 
+    <section class="slider">
 
+        <div class="slider-container">
 
+            <div class="slide">
 
+                <img src="./assets/img/img1Slider.jpg" alt="Slide 1">
 
+            </div>
 
+            <div class="slide">
 
+                <img src="./assets/img/img2Slider.png" alt="Slide 2">
 
+            </div>
 
+            <div class="slide">
 
+                <img src="./assets/img/img3Slider.jpg" alt="Slide 3">
 
+            </div>
 
+        </div>
 
+        <button class="btn prev" onclick="moveSlide(-1)"><i class="fa-solid fa-arrow-left"></i></button>
 
+        <button class="btn next" onclick="moveSlide(1)"><i class="fa-solid fa-arrow-right"></i></button>
 
+    </section>
 
+
 
+
 
+    <script src="main.js"></script>
 
+</body>
 
+
 
+</html>

+ 25 - 0
main.js
Ver ficheiro 

@@ -0,0 +1,25 @@
 
+const hamburger = document.querySelector('.hamburger');
 
+const mobileMenu = document.querySelector('.mobile-menu');
 
+
 
+hamburger.addEventListener('click', () => {
 
+    mobileMenu.classList.toggle('active');
 
+});
 
+
 
+// ----------------del carrusel ----------------
 
+let index = 0;
 
+
 
+function showSlide(n) {
 
+    const slides = document.querySelectorAll('.slide');
 
+    if (n >= slides.length) index = 0;
 
+    if (n < 0) index = slides.length - 1;
 
+    
+    const newTransformValue = -index * 100 + '%';
 
+    document.querySelector('.slider-container').style.transform = `translateX(${newTransformValue})`;
 
+}
 
+
 
+function moveSlide(step) {
 
+    showSlide(index += step);
 
+}
 
+
 
+showSlide(index)
 
+setInterval(() => moveSlide(1), 8000);

+ 266 - 0
styles.css
Ver ficheiro 

@@ -0,0 +1,266 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+
 
+body {
 
+    font-family: 'Quicksand', sans-serif;
 
+    background-color: aqua;
 
+}
 
+
 
+.navbar {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    background-color: #ffffff;
 
+    padding: 10px 20px;
 
+    position: relative;
 
+}
 
+
 
+.navbar-left {
 
+    padding-left: 20px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-around;
 
+}
 
+
 
+.navbar-left .logo {
 
+    transform: scale(1.8);
 
+    height: 70px;
 
+    width: auto;
 
+}
 
+
 
+.navbar-left .textC {
 
+    display: flex;
 
+    align-items: center;
 
+    font-size: 30px;
 
+    line-height: 30px;
 
+    font-family: 'Caveat', cursive;
 
+    font-weight: 400;
 
+    color: #73C7A4;
 
+    margin-left: 100px;
 
+}
 
+
 
+.navbar-center {
 
+    position: absolute;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+}
 
+
 
+.nav-links {
 
+    list-style: none;
 
+    display: inline-flex;
 
+    align-items: center;
 
+}
 
+
 
+.nav-links li {
 
+    margin: 0 15px;
 
+}
 
+
 
+.nav-links a {
 
+    color: rgb(0, 0, 0);
 
+    text-decoration: none;
 
+    font-size: 18px;
 
+    font-weight: bold;
 
+    font-family: 'Quicksand', sans-serif;
 
+    padding: 8px 12px;
 
+    transition: color 0.3s ease, color 0.3s ease;
 
+}
 
+
 
+.nav-links a:hover {
 
+    color: #77c8a6;
 
+}
 
+
 
+.btn-donation {
 
+    background-color: #f04f48;
 
+    font-weight: bold;
 
+    font-family: 'Quicksand', sans-serif;
 
+    font-size: 18px;
 
+    color: #1a1a1a;
 
+    padding: 10px 30px;
 
+    border-radius: 50px;
 
+    border: 2px solid #f04f48;
 
+    cursor: pointer;
 
+    transition: background-color 0.4s ease, color 0.4s ease;
 
+
 
+}
 
+
 
+.btn-donation:hover {
 
+    background-color: #76225e;
 
+    color: #ffffff;
 
+}
 
+
 
+.navbar-right {
 
+    display: flex;
 
+}
 
+
 
+.navbar-right a {
 
+    border-radius: 100%;
 
+    padding: 10px;
 
+    margin-left: 5px;
 
+    margin-right: 5px;
 
+    background-color: beige;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    width: 40px;
 
+    height: 40px;
 
+    text-decoration: none;
 
+    transition: color 0.3s ease, color 0.3s ease;
 
+}
 
+
 
+.navbar-right a i {
 
+    transform: scale(0.8);
 
+    color: black;
 
+}
 
+
 
+.navbar-right a:hover {
 
+    color: #76225e;
 
+}
 
+
 
+.social-icon {
 
+    height: 30px;
 
+    width: auto;
 
+    margin-left: 10px;
 
+    filter: brightness(0) invert(1);
 
+}
 
+
 
+.social-icon:hover {
 
+    filter: brightness(0.7) invert(1);
 
+}
 
+
 
+/* Hamburger Menu */
 
+.hamburger {
 
+    display: none;
 
+    flex-direction: column;
 
+    cursor: pointer;
 
+}
 
+
 
+.hamburger span {
 
+    width: 30px;
 
+    height: 4px;
 
+    background-color: rgb(0, 0, 0);
 
+    margin: 5px 0;
 
+    transition: 0.3s;
 
+}
 
+
 
+/* Mobile Menu (hidden by default) */
 
+.mobile-menu {
 
+    display: none;
 
+    position: absolute;
 
+    top: 60px;
 
+    /* Ajustado para que se despliegue debajo de la navbar */
 
+    left: 0;
 
+    width: 100%;
 
+    background-color: #333;
 
+    text-align: center;
 
+    z-index: 1000;
 
+    /* Asegura que esté encima del contenido */
 
+}
 
+
 
+.mobile-menu ul {
 
+    list-style: none;
 
+    padding: 10px 0;
 
+}
 
+
 
+.mobile-menu li {
 
+    margin: 10px 0;
 
+}
 
+
 
+.mobile-menu a {
 
+    color: white;
 
+    text-decoration: none;
 
+    font-size: 18px;
 
+}
 
+
 
+.mobile-menu a:hover {
 
+    background-color: #555;
 
+    padding: 10px;
 
+    border-radius: 5px;
 
+}
 
+
 
+/* ----------------------------- de la nav ------------------------------ */
 
+
 
+/* Slider */
 
+.slider {
 
+    position: relative;
 
+    width: 100%;
 
+    height: calc(100vh - 90px);
 
+    overflow: hidden;
 
+}
 
+
 
+.slider-container {
 
+    display: flex;
 
+    transition: transform 1s ease;
 
+}
 
+
 
+.slide {
 
+    min-width: 100%;
 
+}
 
+
 
+.slide img {
 
+    width: 100%;
 
+    display: block;
 
+}
 
+
 
+.btn {
 
+    background-color: rgb(255, 255, 255);
 
+    border: none;
 
+    border-radius: 100%;
 
+    width: 50px;
 
+    height: 50px;
 
+    color: #76225e;
 
+    padding: 10px;
 
+    cursor: pointer;
 
+    position: absolute;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
+    transform: scale(1.2);
 
+    font-size: 24px;
 
+    z-index: 10;
 
+}
 
+
 
+.prev {
 
+    left: 15px;
 
+}
 
+
 
+.next {
 
+    right: 15px;
 
+}
 
+
 
+
 
+
 
+
 
+@media (max-width: 1300px) {
 
+    .textC {
 
+        display: none;
 
+    }
 
+    .navbar-center {
 
+        display: none;
 
+    }
 
+
 
+    .navbar-right {
 
+        display: none;
 
+    }
 
+
 
+    .hamburger {
 
+        display: flex;
 
+    }
 
+}
 
+
 
+
 
+.mobile-menu.active {
 
+    display: block;
 
+    animation: fadeIn 0.3s ease-out forwards;
 
+}
 
+
 
+@keyframes fadeIn {
 
+    0% {
 
+        opacity: 0;
 
+    }
 
+
 
+    100% {
 
+        opacity: 1;
 
+    }
 
+}