Skip to content

Commit

Permalink
The base of the resolution of the styles bug was added
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErickDevv
ErickDevv committed Mar 4, 2024
1 parent 68f1746 commit 85ed8d5
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 211 deletions.
2 changes: 0 additions & 2 deletions astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [react()],
site: "https://IEEE-ESTl.github.io",
base: "/IEEE-ESTl-Student-Web-Hub",
});

import { defineConfig } from "astro/config";
89 changes: 59 additions & 30 deletions src/components/Unete.astro
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,60 @@
---
import "./Unete.css"
---

<section class="unete" id="Unete">
<h1 class="titulo">Únete</h1>
<div class="underline"></div>
<div class="beneficios">
<div class="list">
<h2 class="sub"><span class="tex"><span class="numero">1</span><span class="alterno"> Potencia</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
</div>
<div class="list right">
<h2 class="sub"> Potencia <span class="tex"><span class="numero">3</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
</div>
<div class="list">
<h2 class="sub"><span class="tex"><span class="numero">2</span><span class="alterno"> Potencia</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
</div>
<div class="list right">
<h2 class="sub">Potencia <span class="tex"><span class="numero">4</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
</div>
</div>
<div class="botones">
<a class="links" href="\-">Unirse</a>
<a class="links" href="\-">Saber más</a>
</div>
</section>
<section class="unete" id="Unete">
<h1 class="titulo">Únete</h1>
<div class="underline"></div>
<div class="beneficios">
<div class="list">
<h2 class="sub">
<span class="tex"
><span class="numero">1</span><span class="alterno"> Potencia</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc">
Uniendote al comité podrás desarrollar tus habilidades
</p>
</span>
<div class="list right">
<h2 class="sub">
Potencia <span class="tex"
><span class="numero">3</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc">
Uniendote al comité podrás desarrollar tus habilidades
</p>
</span>
<div class="list">
<h2 class="sub">
<span class="tex"
><span class="numero">2</span><span class="alterno">
Potencia</span
>
<h3 class="tex">tus habilidades</h3>
<p class="desc">
Uniendote al comité podrás desarrollar tus habilidades
</p>
</span>
<div class="list right">
<h2 class="sub">
Potencia <span class="tex"
><span class="numero">4</span>
<h3 class="tex">tus habilidades</h3>
<p class="desc">
Uniendote al comité podrás desarrollar tus habilidades
</p>
</span>
</h2>
<div class="botones">
<a class="links" href="\-">Unirse</a>
<a class="links" href="\-">Saber más</a>
</div>
</div>
</h2>
</div>
</h2>
</div>
</h2>
</div>
</div>
</section>
203 changes: 94 additions & 109 deletions src/components/Unete.css
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,95 @@
*
{
box-sizing: border-box;
font-family: "Cousine", monospace;
}
main {
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.unete
{
padding: 20px;
height: auto;
width: auto;
}
* {
box-sizing: border-box;
font-family: "Cousine", monospace;
}
main {
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.unete {
padding: 20px;
height: auto;
width: auto;
}

.titulo {
color: #035B98;
font-size: 90px;
font-family: "Cousine", monospace;
line-height: 1;
text-align: right;
padding-top: 4rem;
padding-bottom: 1rem;
padding-right: 1rem;

}
.underline
{
margin-right: 2rem;
width: 150px;
float: right;
border: 10px solid #035B98;
}
.beneficios
{
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-top: 30px;
width: auto;
height: auto;
font-family: "Cousine", monospace;
}
.alterno
{
color: #000000;
}
.list
{
display: flex;
flex-wrap: wrap;
text-align: center;
padding-left: 15vh;
padding-top: 4rem;
}
.right
{
padding-left: 20vh;
}
.sub
{
font-size: 40px;
text-align: center;
text-transform: uppercase;
color: #000000;
}
.numero
{
font-size: 56px;
color: #035B98;
}
.tex
{
text-transform: uppercase;
font-size: 40px;
text-align: center;
color: #035B98;
}
.desc
{
color: #000000;
text-align: center;
font-size: 15px;
font-weight: normal;
}
.botones
{
display: flex;
padding: 4rem;
justify-content: center;
gap: 10rem;
}
.links
{
width: 200px;
height: 50px;
text-decoration: none;
background: #035B98;
border: 2px solid #013d68;
border-radius: 10px;
text-align: center;
color: #ffff;
padding-top: 10px;
}
.links:hover
{
background-color: #013d68;
}
.titulo {
color: #035b98;
font-size: 90px;
font-family: "Cousine", monospace;
line-height: 1;
text-align: right;
padding-top: 4rem;
padding-bottom: 1rem;
padding-right: 1rem;
}
.underline {
margin-right: 2rem;
width: 150px;
float: right;
border: 10px solid #035b98;
}
.beneficios {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-top: 30px;
width: auto;
height: auto;
font-family: "Cousine", monospace;
}
.alterno {
color: #000000;
}
.list {
display: flex;
flex-wrap: wrap;
text-align: center;
padding-left: 15vh;
padding-top: 4rem;
}
.right {
padding-left: 20vh;
}
.sub {
font-size: 40px;
text-align: center;
text-transform: uppercase;
color: #000000;
}
.numero {
font-size: 56px;
color: #035b98;
}
.tex {
text-transform: uppercase;
font-size: 40px;
text-align: center;
color: #035b98;
}
.desc {
color: #000000;
text-align: center;
font-size: 15px;
font-weight: normal;
}
.botones {
display: flex;
padding: 4rem;
justify-content: center;
gap: 10rem;
}
.links {
width: 200px;
height: 50px;
text-decoration: none;
background: #035b98;
border: 2px solid #013d68;
border-radius: 10px;
text-align: center;
color: #ffff;
padding-top: 10px;
}
.links:hover {
background-color: #013d68;
}
5 changes: 0 additions & 5 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ const { title } = Astro.props;
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<meta name="generator" content={Astro.generator} />
<link rel="stylesheet" href="/src/components/Unete.css" />
<link rel="stylesheet" href="/src/components/cssInicio/variables.css" />
<link rel="stylesheet" href="/src/components/cssInicio/fondo.css" />
<link rel="stylesheet" href="/src/components/cssInicio/navInicio.css" />
<link rel="stylesheet" href="/src/components/cssInicio/contenedorBienvenida.css" />
<title>{title}</title>
</head>
<body>
Expand Down
55 changes: 52 additions & 3 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,62 @@
import Layout from "../layouts/Layout.astro";
import Events from "../components/Events.tsx";
import Unete from "../components/Unete.astro";
import Inicio from "../components/Inicio.astro";
import "../components/cssInicio/variables.css";
import "../components/cssInicio/fondo.css";
import "../components/cssInicio/navInicio.css";
import "../components/cssInicio/contenedorBienvenida.css";
---

<Layout title="Welcome to Astro.">
<main>
<Inicio></Inicio>
<div class="containerInicio">
<section class="filtroInicio">
<div class="menuInicio">
<img src={""} class="logoIEEE" alt="Logo de IEEE" />

<button class="botonNav">Inicio</button>
<button class="botonNav">Eventos</button>
<button class="botonNav">Próximamente</button>
<button class="botonNav">Únete</button>
<button class="botonNav">FAQ</button>
<div class="RedesyInicio">
<button class="botonNav">Redes</button>
<button class="irInicio">Inicio</button>
</div>
</div>

<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="./imagenes/1.png" />
<div>
<img class="imgabajo" src="./imagenes/2.png" />
<img class="imgabajo" src="./imagenes/3.jpg" />
</div>
</div>
</div>
<div class="logotiposBienvenida">
<img src="./imagenes/csociety_logo.png" />
<img src="./imagenes/uaeh_logo_color.png" />
<img src="./imagenes/logoESTL.png" />
<img src="./imagenes/ieeelogo2.png" />
</div>
</section>

<div class="esferaAzul ubicacionEsfera"></div>
</div>
<Events client:load />
<Unete></Unete>
<Unete />
</main>
</Layout>
Loading

0 comments on commit 85ed8d5

Please sign in to comment.