Skip to content

Commit

Permalink
Merge pull request #12 from IEEE-ESTl/fixHomeImages
Browse files Browse the repository at this point in the history
Fix Home Images Routes.
  • Loading branch information
ErickDevv authored Mar 18, 2024
2 parents 4375a56 + 1488d43 commit 625fb31
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 130 deletions.
119 changes: 63 additions & 56 deletions src/components/Inicio.astro
Original file line number Diff line number Diff line change
@@ -1,60 +1,67 @@
---
import "./cssInicio/contenedorBienvenida.css"
import "./cssInicio/fondo.css"
import "./cssInicio/navInicio.css"
import "./cssInicio/variables.css"
---

<section id="Inicio">
<div class="containerInicio">
<section class="filtroInicio">
<div class="menuInicio">
<img
src="/Inicio/ieeelogo1.png"
class="logoIEEE"
alt="Logo de IEEE"
/>
import "./cssInicio/contenedorBienvenida.css";
import "./cssInicio/fondo.css";
import "./cssInicio/navInicio.css";
import "./cssInicio/variables.css";
<button class="botonNav"><a href="#Inicio">Inicio</a></button>
<button class="botonNav"><a href="#Eventos">Eventos</a></button>
<button class="botonNav"><a href="#Soon">Próximamente</a></button>
<button class="botonNav"><a href="#Unete">Únete</a></button>
<button class="botonNav"><a href="#Faq">FAQ</a></button>
<div class="RedesyInicio">
<button class="botonNav">Redes</button>
<button class="irInicio">Inicio</button>
</div>
</div>
import branchLogo from "/public/Inicio/ieeelogo1.png";
<div class="contenedorBienvenida">
<div class="textobienvenida">
<h1>Save time by building fast with Boldo</h1>
<p>
Lorem Ipsum es simplemente el texto de relleno de
las imprentas y archivos de texto. Lorem Ipsum ha
sido el texto de relleno estándar de las
</p>
<div class="divContactar">
<button class="Contactar1">Contactar</button>
<button class="Contactar2">Contactar</button>
</div>
</div>
<div class="imagenesbienvenida">
<img class="imgarriba" src="/Inicio/1.png" />
<div>
<img class="imgabajo" src="/Inicio/2.png" />
<img class="imgabajo" src="/Inicio/3.jpg" />
</div>
</div>
</div>
<div class="logotiposBienvenida">
<img src="/Inicio/csociety_logo.png" />
<img src="/Inicio/uaeh_logo_color.png" />
<img src="/Inicio/logoESTL.png" />
<img src="/Inicio/ieeelogo2.png" />
</div>
</section>
import imageMosaic from "/public/Inicio/1.png";
import imageMosaic2 from "/public/Inicio/2.png";
import imageMosaic3 from "/public/Inicio/3.jpg";
<div class="esferaAzul ubicacionEsfera"></div>
</div>
</section>
import ieeeLogo from "/public/Inicio/ieeelogo2.png";
import csocietyLogo from "/public/Inicio/csociety_logo.png";
import uaehLogo from "/public/Inicio/uaeh_logo_color.png";
import estlLogo from "/public/Inicio/logoESTL.png";
---

<section id="Inicio">
<div class="containerInicio">
<section class="filtroInicio">
<div class="menuInicio">
<img src={branchLogo.src} class="logoIEEE" alt="Logo de IEEE" />

<button class="botonNav"><a href="#Inicio">Inicio</a></button>
<button class="botonNav"><a href="#Eventos">Eventos</a></button>
<button class="botonNav"><a href="#Soon">Próximamente</a></button>
<button class="botonNav"><a href="#Unete">Únete</a></button>
<button class="botonNav"><a href="#Faq">FAQ</a></button>
<div class="RedesyInicio">
<button class="botonNav">Redes</button>
<button class="irInicio">Inicio</button>
</div>
</div>

<div class="contenedorBienvenida">
<div class="textobienvenida">
<h1> lorem ipsum</h1>
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y
archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar
de las
</p>
<div class="divContactar">
<button class="Contactar1">Contactar</button>
<button class="Contactar2">Contactar</button>
</div>
</div>
<div class="imagenesbienvenida">
<img class="imgarriba" src={imageMosaic.src} />
<div>
<img class="imgabajo" src={imageMosaic2.src} />
<img class="imgabajo" src={imageMosaic3.src} />
</div>
</div>
</div>
<div class="logotiposBienvenida">
<img src={ieeeLogo.src} />
<img src={csocietyLogo.src} />
<img src={uaehLogo.src} />
<img src={estlLogo.src} />
</div>
</section>

<div class="esferaAzul ubicacionEsfera"></div>
</div>
</section>
146 changes: 72 additions & 74 deletions src/components/cssInicio/contenedorBienvenida.css
Original file line number Diff line number Diff line change
@@ -1,123 +1,121 @@
*
{
border: 0;
margin: 0;
padding: 0;
scroll-behavior: smooth;
* {
border: 0;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.contenedorBienvenida {

margin-top: 15vh;
display: flex;
flex-direction: row;
font-family: "Cousine", monospace;
margin-top: 15vh;
display: flex;
flex-direction: row;
font-family: "Cousine", monospace;
}

h1 {
margin: 10px;
}

.textobienvenida {
width: 45%;
padding: 35px;
padding-top: 13vh;
padding-left: 6vw;
color: black;
width: 45%;
padding: 35px;
padding-top: 13vh;
padding-left: 6vw;
color: black;
font-size: 1.4rem;
}

.textobienvenida p {
padding-left: 3px;
text-align: justify;
color: black;
padding-left: 3px;
text-align: justify;
color: black;
font-size: 1rem;
margin-bottom: 10px;
}

.imagenesbienvenida {
width: 55%;
width: 55%;
}

.imagenesbienvenida {
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


.logotiposBienvenida {
clear: both;
background-color: transparent;

background-color: transparent;
}

.divContactar {
margin-left: 30px;
margin-left: 30px;
}



.Contactar1,
.Contactar2 {
font-weight: bolder;
letter-spacing: 0.7px;
margin-right: 6px;
padding: 5px;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
border-radius: 16px;
padding-left: 20px;
padding-right: 20px;
font-weight: bolder;
letter-spacing: 0.7px;
margin-right: 6px;
padding: 5px;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
border-radius: 16px;
padding-left: 20px;
padding-right: 20px;
}

.Contactar1 {
background-color: var(--azulfuerte);
color: white;
border: 2px solid var(--azulfuerte);
background-color: var(--azulfuerte);
color: white;
border: 2px solid var(--azulfuerte);
}

.Contactar2 {
background-color: white;
color: var(--azulfuerte);
border: 2px solid var(--azulfuerte);
background-color: white;
color: var(--azulfuerte);
border: 2px solid var(--azulfuerte);
}

.Contactar1:hover,
.Contactar2:hover {
transform: translateY(-5px);
transform: translateY(-5px);
}

.imagenesbienvenida img {
height: 170px;
object-fit: cover;
border-radius: 4px;
margin: 9px;
height: 170px;
object-fit: cover;
border-radius: 4px;
margin: 9px;
}


.imagenesbienvenida .imgarriba {
width: 490px;
position: relative;
width: 490px;
position: relative;
}

.imagenesbienvenida .imgabajo {
position: relative;
width: 230px;
position: relative;
width: 230px;
}



.logotiposBienvenida {
height: 90px;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin-top: 8vh;
height: 90px;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin-top: 8vh;
}

.logotiposBienvenida img {
width: 100%;
height: 100%;
margin-left: 22px;
}
a
{
text-decoration: none;
color: black;
}
width: 250px;

margin-left: 22px;
}
a {
text-decoration: none;
color: black;
}

0 comments on commit 625fb31

Please sign in to comment.