Skip to content

Commit

Permalink
Añadimos mas secciones a la landing
Browse files Browse the repository at this point in the history
  • Loading branch information
@GioX-16
GioX-16 committed Sep 3, 2024
1 parent 880a327 commit f16ffb1
Show file tree
Hide file tree
Showing 4 changed files with 276 additions and 6 deletions.
190 changes: 189 additions & 1 deletion Aplication TT/Styles/styles1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ html{
}

body{
background-color: #cfcfc9;
background-color: hsl(0, 0%, 99%);
}

.header{
Expand Down Expand Up @@ -104,4 +104,192 @@ video {
margin: 0 auto;
}

/* SECTION NOSOTROS */

.heading{
width: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
margin: 20px auto;
}

.heading h1{
font-size: 50px;
color: #000;
margin-bottom: 25px;
position: relative;
}

.heading h1::after{
content: "";
position: absolute;
width: 100%;
height: 4px;
display: block;
margin: 0 auto;
background-color: seagreen;
}

.heading p{
font-size: 18px;
color: rgb(5, 5, 5);
margin-bottom: 35px;
}

.container{
width: 90%;
margin: 0 auto;
padding: 10px 20px;
}

.nosotros{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.nosotros-img{
flex: 1;
margin-right: 40px;
overflow: hidden;
}
.nosotros-img img{
max-width: 100%;
height: auto;
display: block;
transition: 0.5s ease;
}

.nosotros-img:hover img{
transform: scale(1.2);
}
.nosotros-content{
flex: 1;
}

.nosotros-content h2{
font-size: 23px;
margin-bottom: 20px;
color: chocolate;
}

.nosotros-content p{
font-size: 18px;
line-height: 1.5;
color: rgb(0, 0, 0);
}

.nosotros-content .Leer-Mas{
display: inline-block;
padding: 10px 20px;
background-color: chocolate;
color: #fff;
font-size: 20px;
text-decoration: none;
border-radius: 25px;
margin-top: 25px;
transition: 0.3s ease;
}

.nosotros-content .Leer-Mas:hover{
background-color: seagreen;
}

/* /seccion mapa / */

.map-container {
position: relative;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #ccc; /* Color de fondo mientras carga */
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}



/* SECTION FOOTER */

.footer1{
width: 100%;
background-color: #143f28;
}

.footer1 .grupo-1{
width: 100%;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 50px;
padding: 45px 0px;
}

.footer1 .grupo-1 .box figure{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.footer1 .grupo-1 .box figure img{
width: 250px;
}

.footer1 .grupo-1 .box h2{
color: #fff;
margin-bottom: 25px;
font-size: 20px;
}

.footer1 .grupo-1 .box p{
color: #efefee;
margin-bottom: 0px;
}

.footer1 .grupo-1 .red-social a{
display: inline-block;
text-decoration: none;
width: 45px;
height: 45px;
line-height: 45px;
color: #fff;
margin-right: 10px;
background-color: #000000;
text-align: center;
transition: all 300ms ease;
}

.footer1 .grupo-1 .red-social a:hover{
color: seagreen;
}

.footer1 .grupo-2{
background-color: seagreen;
padding: 15px 10px;
text-align: center;
color: #fff;
}

.footer1 .grupo-2{
background-color: seagreen;
color: #fff;
display: flex;
margin: auto;
justify-content: center;
padding: 45px 0px;
}

Binary file added Aplication TT/imgs/AgroMapNic.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Aplication TT/imgs/NosotrosIMG1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 87 additions & 5 deletions Aplication TT/index3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,15 @@
<body>

<!-- SECTION Header -->

<section class="home" id="home1">

<header class="header">
<div class="logo">
<div id="home1" class="logo">
<img src="/imgs/AgroMps-2.png" alt="logo de la marca">
</div>
<nav>
<ul class="nav-links">
<li><a href="#home1">Inicio</a></li>
<li><a href="#banner">Nosotros</a></li>
<li><a href="#Nosotros">Nosotros</a></li>
<li><a href="#mapa">Mapas</a></li>
<li><a href="#banner">Servicios</a></li>
<li><a href="#">Contacto</a></li>
Expand All @@ -31,13 +29,97 @@
</section>

<!-- SECTION video -->

<section>
<video autoplay loop muted>
<source src="/Videos/VideoBackg.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>
</section>

<!-- SECTION Nosotros -->
<section id="Nosotros">
<div class="heading">
<h1>Nosotros</h1>
<p>"La fertilidad del suelo a un solo clip de distancia.",
"Asegurando el Futuro de tus cultivos con Precisión Digital"</p>
</div>
<div class="container">
<section class="nosotros">
<div class="nosotros-img">
<img src="/imgs/AgroMapNic.png">
</div>
<div class="nosotros-content">
<h2>¿Quienes Somos?</h2>
<p> AgroMaps es una empresa innovadora que se
especializa en proporcionar soluciones tecnológicas
avanzadas
para la agricultura de precisión. Utilizando
tecnología de mapas , AgroMaps ayuda a las empresas
agrícolas a encontrar los suelos
adecuados para la siembra</p>
<a href class="Leer-Mas">Conocer Mas</a>
</div>
</section>
</div>
</section>

<!-- Section InteractiveMap -->
<section id="mapa">
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983078.431924583!2d-87.66068603800086!3d12.861028211200027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f10c200ceff22cd%3A0xc8faa7e53fac15b5!2sNicaragua!5e0!3m2!1ses!2sni!4v1724261034935!5m2!1ses!2sni"
width="1920" height="450" style="border:0;" allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>

<!-- Section Footer -->
<footer class="footer1">
<div class="grupo-1">
<div class="box">
<figure>
<a href="#">
<img src="/imgs/UNVAL2.png" alt="logo de UVAL">
</a>
</figure>
</div>
<div class="box">
<h2>SOBRE NOSOTROS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
facilis earum maxime ratione?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Praesentium, nulla alias? Dolores!</p>
</div>
<div class="box">
<h2>SIGUENOS EN REDES</h2>
<div class="red-social">
<a target="noopener"
href="https://www.instagram.com/gio_sanx/?hl=es-es"><i
class="fa-brands fa-square-instagram"></i></a>
<a target="noopener"
href="https://www.facebook.com/g2.giox1"><i
class="fa-brands fa-square-facebook"></i></a>
<a target="noopener" href="https://x.com/sandinoG1X"><i
class="fa-brands fa-square-x-twitter"></i></a>
<a target="noopener"
href="https://github.com/GioX-16"><i
class="fa-brands fa-square-github"></i></a>
<a target="noopener"
href="https://www.threads.net/@gio_sanx"><i
class="fa-brands fa-square-threads"></i></a>
</div>
</div>
</div>
<div class="grupo-2">
<samp>&copy; 2024 <b>UNI-VERSE-ALL</b> Todos los derechos
Reservados</samp>
</div>
</footer>

<!-- LINK DE LOS ICONOS -->
<script src="https://kit.fontawesome.com/001e655f1c.js"
crossorigin="anonymous"></script>

</body>
</html>

0 comments on commit f16ffb1

Please sign in to comment.