modulohtmlycss/index.html at main · repoparaweb/modulohtmlycss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Sitio Web para la proteccion de los oceanos, flora y fauna">
  <meta name="robots" content="NOFOLLOW">
  <meta name="Author" content="Virgen Damaris">
  <meta name="keywords" content="oceano,proteccion,fauna marina">
  <meta name="lang" content="es">
  <meta name="revisit-after" content="2 days">
  <meta name="category" content="Prácticas">
  <title>Oceanos Vivos</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>
<body>

  <!-- HEADER -->
  <header class="header">

    <!-- Checkbox oculto para el menú hamburguesa -->
    <input type="checkbox" id="menu-toggle" class="menu-toggle">

    <img class="logo" src="./assets/images/logooceanos.png" alt="logo oceanos vivos" width="415" height="403">

    <!-- Botón hamburguesa -->
    <label for="menu-toggle" class="hamburger">
      <img class="menu-icon" src="./assets/images/hamburguesa.png" alt="menu">
    </label>

    <!-- Menú de navegación -->
    <nav class="navbar">
      <ul>
        <li><a href="index.html" class="active">Inicio</a></li>
        <li><a href="./views/galeria.html">Galería</a></li>
        <li><a href="./views/presupuesto.html">Presupuesto</a></li>
        <li><a href="./views/contacto.html">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-text">
      <h1>Tu vida depende del Océano. ¡Protégelo!</h1>
    </div>
  </section>

  <!-- GRID CONTAINER -->
  <div class="page-layout">

    <!-- ASIDE -->
    <aside class="sidebar">
      <p class="aside-text">¡Sabías QUÉ?.</p>
      <img class="aside-img" src="./assets/images/francis-taylor-HNem8j1jpcE-unsplash.jpg" alt="imagen de medusas" width="4288" height="2848">
      <p>Las medusas son uno de los animales más antiguos del planeta, con fósiles que datan de hace más de 600 millones de años. El cuerpo de una medusa está hecho casi en su totalidad de agua, alrededor del 95%, y no tienen cerebro, corazón ni sistema nervioso. Hay especies que pueden producir su propia luz, usando un proceso químico llamado bioluminiscencia para atraer presas o disuadir depredadores. Algunas medusas, como la Turritopsis dohrnii, son conocidas como "inmortales" porque pueden revertir a un estado de pólipo cuando envejecen o se dañan.</p>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="main-content">
      <div class="image-section">
        <img class="left-image" src="./assets/images/pezpayaso.jpg" alt="pez payaso en corales"  width="4862" height="3297">
        <div class="text-right">
          <p>Los océanos cubren más del 70% de la superficie de nuestro planeta y son fundamentales para la vida en la Tierra. No solo son el hogar de una increíble diversidad de flora y fauna, sino que también desempeñan un papel crucial en el mantenimiento del clima, la regulación de la temperatura y la producción del oxígeno que respiramos. <br> Cada año, nuestros océanos enfrentan amenazas sin precedentes debido a la contaminación, la sobreexplotación de recursos, el cambio climático y la destrucción de hábitats. La contaminación por plásticos y desechos químicos está deteriorando los ecosistemas marinos, afectando a especies como las tortugas y los peces, que confunden estos materiales con alimento. Además, la sobrepesca está llevando a muchas especies al borde de la extinción, alterando el equilibrio de los ecosistemas marinos.</p>
        </div>
        <p class="full-text">Los océanos son uno de los ecosistemas más ricos del planeta. Preservarlos es responsabilidad de todos.</p>
      </div>
    </main>
  </div>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="footer-left">
      <h3>Redes Sociales</h3>
      <div class="social-icons">
        <a href="https://www.facebook.com/profile.php?id=61575497026029" target="_blank">
          <img src="./assets/images/facebook.png" alt="logo de facebook" width="512" height="512">
        </a>
        <a href="https://www.instagram.com/oceanosvivos.sos/" target="_blank">
          <img src="./assets/images/instagram.png" alt="logo de Instagram" width="512" height="512">
        </a>
      </div>
    </div>
    <div class="footer-right">
      <p>Dirección: C. Moby Dick, 2, Churriana, 29004. Málaga, España</p>
      <p>Avisos Legales - Todos los derechos reservados © 2025</p>
    </div>
  </footer>


</body>
</html>