Skip to content

Commit 867aa8b

Browse files
CamilaCarvajalGusmanCamilaCarvajalGusman
authored
arreglos modo responsive
Responsive
2 parents 8ae2175 + 7e6a65d commit 867aa8b

File tree

6 files changed

+306
-243
lines changed

6 files changed

+306
-243
lines changed

‎src/Sections/About.astro‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,85 +4,80 @@ import LogoCiac from "../assets/images/Ciac.png";
44
import Huella from "../assets/images/huella.svg";
55
import LogoNuevoMiHuella from "../assets/images/miHuellaNuevo.png";
66
import GoogleBtn from "../assets/images/GooglePlay Button.png";
7-
import HuellaHidricaBtn from "../assets/images/huella-hidrica.png";
87
import AppStoreBtn from "../assets/images/AppStore Button.png";
98
---
109

1110
<section
1211
id="nosotros"
13-
class="min-h-[75vh] min-w-[100%] bg-huella-text-gray-ligth"
12+
class="relative flex flex-col items-center justify-center min-h-[80vh] w-full bg-[#F5F5F5] py-16 px-4 overflow-hidden"
1413
>
14+
1515
<img
1616
src={Huella.src}
17-
alt="Imagen Huella"
18-
class="absolute top-0 left-0 -translate-x-[70%] scale-50 md:scale-75 rotate-90 w-full h-auto max-w-[400px]"
17+
alt="Fondo decorativo huella"
18+
class="absolute bottom-0 right-0 translate-x-[30%] translate-y-[30%] w-[80%] md:w-[40%] max-w-[600px] opacity-10 md:opacity-20 pointer-events-none z-0"
1919
/>
20-
<!-- <img
21-
src={Huella.src}
22-
alt="Imagen Huella"
23-
class="absolute bottom-0 right-0 translate-x-[50%] sm:translate-x-[70%] translate-y-[20%] scale-50 md:scale-75 -rotate-12 w-full h-auto max-w-[400px]"
24-
/> -->
25-
<article
26-
class="flex flex-col items-center justify-center gap-8 py-4 sm:h-full px-4 md:px-[150px] mx-auto my-auto max-w-[1440px]"
27-
>
28-
<h2 class="text-center text-xl md:text-6xl font-bold mt-10">
20+
21+
<article class="relative z-10 flex flex-col items-center text-center max-w-4xl mx-auto gap-8">
22+
23+
<h2 class="text-4xl md:text-6xl font-bold text-black">
2924
Sobre nosotros
3025
</h2>
31-
<div class="p-9 bg-[transparent] rounded-xl max-w-[1050px]">
32-
<p
33-
class="text-huella-text-gray text-center text-base md:text-3xl text-pretty"
34-
>
35-
Creemos en el poder de las <span style="color: #3BB273;"
36-
>pequeñas acciones para generar un gran impacto</span
37-
>. Nuestro equipo está formado por apasionados por el medio ambiente y
38-
la tecnología, comprometidos con la <span style="color: #3BB273;"
39-
>misión de hacer del mundo un lugar más sostenible</span
40-
>.
41-
</p>
42-
</div>
43-
<div class="flex flex-row md:gap-10">
26+
27+
<p class="text-base md:text-2xl text-black leading-relaxed max-w-3xl px-2">
28+
Creemos en el poder de las
29+
<span class="text-[#3BB273] font-medium">pequeñas acciones para generar un gran impacto</span>.
30+
Nuestro equipo está formado por profesionales en ingeniería ambiental, apasionados por el medio ambiente y la tecnología, comprometidos con la
31+
<span class="text-[#3BB273] font-medium">misión de hacer del mundo un lugar más sostenible</span>.
32+
</p>
33+
34+
<div class="flex flex-row gap-4 md:gap-6 mt-4">
4435
<a
4536
href="https://play.google.com/store/apps/details?id=org.labtecnosocial.mihuella"
46-
class="transition-transform transform hover:scale-110 hover:bg-transparent ease-in-out duration-300"
37+
target="_blank"
38+
class="transition-transform transform hover:scale-105"
4739
>
4840
<img
4941
src={GoogleBtn.src}
50-
alt="Google play button"
51-
width={250}
52-
height={40}
42+
alt="Disponible en Google Play"
43+
class="h-10 md:h-20 w-auto"
5344
loading="lazy"
5445
/>
5546
</a>
5647
<a
5748
href="https://apps.apple.com/us/app/mi-huella-en-el-planeta/id6748420106"
58-
class="transition-transform transform hover:scale-110 hover:bg-transparent ease-in-out duration-300"
49+
target="_blank"
50+
class="transition-transform transform hover:scale-105"
5951
>
6052
<img
6153
src={AppStoreBtn.src}
62-
alt="Apple Store button"
63-
width={225}
64-
height={20}
54+
alt="Consíguelo en el App Store"
55+
class="h-10 md:h-20 w-auto"
6556
loading="lazy"
6657
/>
6758
</a>
6859
</div>
6960

70-
<img src={LogoNuevoMiHuella.src} alt="Nuevo Logo MiHuella" width='250px"' />
71-
<div class="flex gap-20">
72-
<img src={LogoCiac.src} alt="Imagen logo Ciac" class="max-w-28 h-auto" />
61+
<div class="mt-4">
62+
<img
63+
src={LogoNuevoMiHuella.src}
64+
alt="Logo Mi Huella"
65+
class="w-48 md:w-60 h-auto"
66+
/>
67+
</div>
68+
69+
<div class="flex flex-row items-center gap-8 md:gap-12 mt-2">
70+
<img
71+
src={LogoCiac.src}
72+
alt="Logo CIAC"
73+
class="h-20 w-auto"
74+
/>
7375
<img
7476
src={LogoLab.src}
75-
alt="Imagen logo Laboratorio Tenologías Sociales"
76-
class="max-w-24 h-auto"
77+
alt="Logo Laboratorio Tecnologías Sociales"
78+
class="h-20 w-auto"
7779
/>
7880
</div>
79-
</article>
80-
<!-- <a href="/feature/calculadora-huella-hidrica" >
81-
<img
82-
src={HuellaHidricaBtn.src}
83-
alt="Botón de la Huella Hídrica"
84-
class="absolute opacity-80 hover:opacity-100 bottom-5 right-20 w-20 sm:w-24 md:w-28 lg:w-32"
85-
/>
86-
</a> -->
8781

82+
</article>
8883
</section>

‎src/Sections/Header.astro‎

Lines changed: 57 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,76 +5,72 @@ import Instagram from "../assets/icons/instagram.png";
55
import Mail from "../assets/icons/mail.png";
66
---
77

8-
<header
9-
class="loaded:opacity-100 shadow-md z-50 fixed top-0 left-0 right-0 bg-white"
10-
>
11-
<ul
12-
class="flex items-center justify-center md:justify-between md:py-6 mx-auto max-w-[1440px] text-green"
13-
>
14-
<li>
15-
<a href="/">
16-
<img
17-
src={LogoNuevoMiHuella2.src}
18-
alt="Mi Huella icono"
19-
width={100}
20-
height={20}
21-
/>
22-
</a>
23-
</li>
24-
<li class="hidden md:block">
25-
<a href="/#calcular" class="text-xl text-huella-text-green"
26-
>¿Cómo calculamos?</a
27-
>
28-
</li>
29-
<li class="hidden md:block text-lg hover:m-0">
30-
<a href="/#mision" class="text-xl text-huella-text-green"
31-
>Nuestra misión</a
32-
>
33-
</li>
34-
<li class="hidden md:block text-lg hover:m-0">
35-
<a href="/#nosotros" class="text-xl text-huella-text-green"
36-
>Sobre nosotros</a
37-
>
38-
</li>
39-
40-
<li class="hidden md:block text-lg hover:m-0">
41-
<a
42-
href="/blogs/articles"
43-
class="text-xl text-huella-text-green">Artículos y Blog</a
44-
>
45-
</li>
46-
47-
<!-- <li class="hidden md:block text-lg hover:m-0">
48-
<a href="/blogs" class="text-xl">Blog Prueba</a>
49-
</li> -->
8+
<header class="loaded:opacity-100 shadow-md z-50 fixed top-0 left-0 right-0 bg-white">
9+
<nav class="flex items-center justify-around px-4 py-3 md:py-6 mx-auto max-w-[1440px]">
10+
11+
<a href="/">
12+
<img
13+
src={LogoNuevoMiHuella2.src}
14+
alt="Mi Huella icono"
15+
width={100}
16+
height={20}
17+
class="w-[80px] md:w-[100px] h-auto"
18+
/>
19+
</a>
5020

51-
<div class="flex gap-5 items-center">
52-
<li class="hidden md:block hover:m-0">
53-
<a href="mailto:appmihuella@gmail.com"
54-
><img
55-
src={Mail.src}
56-
alt="icon mail de mi huella de carbono app"
57-
class="size-10"
58-
/></a
59-
>
21+
<ul class="hidden md:flex items-center gap-20">
22+
<li>
23+
<a href="/#calcular" class="text-xl text-huella-text-green hover:opacity-80">¿Cómo calculamos?</a>
24+
</li>
25+
<li>
26+
<a href="/#mision" class="text-xl text-huella-text-green hover:opacity-80">Nuestra misión</a>
6027
</li>
61-
<li class="hidden md:block hover:m-0">
62-
<a href="https://www.instagram.com/mi_huella_app/"
63-
><img src={Instagram.src} alt="Instagram logo" class="size-7,5" /></a
64-
>
28+
<li>
29+
<a href="/#nosotros" class="text-xl text-huella-text-green hover:opacity-80">Sobre nosotros</a>
6530
</li>
66-
<li class="hidden md:block hover:m-0">
67-
<a href="https://www.facebook.com/AppMiHuella"
68-
><img src={Facebook.src} alt="Facebook logo" class="size-8" /></a
69-
>
31+
<li>
32+
<a href="/blogs/articles" class="text-xl text-huella-text-green hover:opacity-80">Artículos y Blog</a>
7033
</li>
34+
</ul>
35+
36+
<div class="flex items-center gap-4">
37+
38+
<a href="/blogs/articles" class="md:hidden text-lg text-huella-text-green font-medium">
39+
Blog
40+
</a>
41+
42+
<div class="flex items-center gap-3 md:gap-5">
43+
<a href="mailto:appmihuella@gmail.com" class="hover:opacity-80">
44+
<img
45+
src={Mail.src}
46+
alt="Mail"
47+
class="w-7 h-7 md:w-10 md:h-10"
48+
/>
49+
</a>
50+
<a href="https://www.instagram.com/mi_huella_app/" class="hover:opacity-80">
51+
<img
52+
src={Instagram.src}
53+
alt="Instagram"
54+
class="w-6 h-6 md:w-8 md:h-8"
55+
/>
56+
</a>
57+
<a href="https://www.facebook.com/AppMiHuella" class="hover:opacity-80">
58+
<img
59+
src={Facebook.src}
60+
alt="Facebook"
61+
class="w-6 h-6 md:w-8 md:h-8"
62+
/>
63+
</a>
64+
</div>
7165
</div>
72-
</ul>
66+
67+
</nav>
7368
</header>
69+
7470
<body style="margin-top: 25px;">
7571
<script>
7672
document.addEventListener("DOMContentLoaded", () => {
7773
document.body.classList.add("loaded");
7874
});
7975
</script>
80-
</body>
76+
</body>

0 commit comments

Comments
 (0)