ok

Websitesecc · Nov 29, 2024 · 795feb2 · 795feb2
1 parent b6474a4
commit 795feb2
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -10,25 +10,28 @@
         <a href="#footer">Contacto</a>
       </nav>
     </header>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Presentación - SANA SANA</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Bienvenido a SANA SANA</title>
-<link rel="stylesheet" href="styles.css">
-</head>
-<body>
-<header class="hero">
-    <a href="#services" class="btn-primary">Descubre nuestros servicios</a>
-  </div>
-</header>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Presentación con Imagen</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <!-- Sección de Presentación -->
+    <section id="presentation" class="presentation">
+      <div class="background">
+        <img src="sansana.png" alt="Imagen de fondo de presentación">
 
+
+
+      </div>
+      <div class="content">
+        <a href="#services" class="btn-primary">Descubre nuestros servicios</a>
+      </div>
+    </section>
+  </body>
+  </html>
+
 <!-- Servicios -->
 <section id="services" class="services">
     <h2 class="section-title">Nuestros Servicios</h2>
@@ -132,8 +135,6 @@ <h3>Termohigometro Calibrado</h3>
   <a href="https://wa.me/+51907826118" target="_blank" class="btn-whatsapp-float">
     <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
   </a>
-
-
 <!-- Footer -->
 <section id="footer" class="footer">
     <div class="footer-container">

diff --git a/styles.css b/styles.css
@@ -5,12 +5,75 @@ body, html {
   box-sizing: border-box;
   font-family: 'Arial', sans-serif;
 }
+/* Reset de márgenes y relleno */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Estilos para la sección de presentación */
+.presentation {
+  position: relative;
+  height: 100vh; /* Altura completa de la ventana del navegador */
+  overflow: hidden; /* Evita el desbordamiento de la imagen */
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.background img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* La imagen cubre toda la sección sin deformarse */
+  filter: brightness(0.6); /* Oscurece la imagen para mejorar la visibilidad del texto */
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Centra el contenido en el medio */
+  text-align: center;
+  color: white;
+  padding: 20px;
+}
+
+.content h1 {
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.content p {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+}
+
+.btn-primary {
+  background-color: #007BFF;
+  color: white;
+  padding: 15px 30px;
+  text-decoration: none;
+  border-radius: 5px;
+  font-size: 1.2rem
+  transition: background-color 0.3s ease;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
 
 /* Hero Section */
 .hero {
   position: relative;
   height: 100vh; /* Ocupa toda la altura de la ventana */
-  background-image: url(sansana.png); /* Reemplaza con tu imagen */
   background-size: cover; /* La imagen cubre toda la sección */
   background-position: center; /* Centra la imagen */
   display: flex;