OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Created basic structure of home page

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-01-31 11:57:26 -05:00
parent 9ea8c2a156
commit de69b1f1e9
22 changed files with 1169 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
src/styles/global.css Normal file
View File

@@ -0,0 +1,320 @@
@font-face {
font-family: "Gilroy";
src:
url("../assets/fonts/Gilroy-Bold.woff2") format("woff2"),
url("../assets/fonts/Gilroy-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src:
url("../assets/fonts/Gilroy-Black.woff2") format("woff2"),
url("../assets/fonts/Gilroy-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src:
url("../assets/fonts/Gilroy-Regular.woff2") format("woff2"),
url("../assets/fonts/Gilroy-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* Primitive values */
/* Colors */
--dark-gray: #252525;
/* Fonts */
--font-family-primary: "Gilroy";
/* Font sizes */
/* Desktop: */
--xsm-desktop: 8px;
--sm-desktop: 12px;
--base-desktop: 16px;
--h6-desktop: 20px;
--h5-desktop: 28px;
--h4-desktop: 40px;
--h3-desktop: 52px;
--h2-desktop: 68px;
--h1-desktop: 88px;
/* Movil: */
--xsm-mobile: 8px;
--sm-mobile: 12px;
--base-mobile: 16px;
--h6-mobile: 18px;
--h5-mobile: 20px;
--h4-mobile: 24px;
--h3-mobile: 28px;
--h2-mobile: 32px;
--h1-mobile: 36px;
/* line-heights */
/* Desktop: */
--lh-xsm-desktop: 12px;
--lh-sm-desktop: 18px;
--lh-base-desktop: 24px;
--lh-h6-desktop: 30px;
--lh-h5-desktop: 40px;
--lh-h4-desktop: 56px;
--lh-h3-desktop: 64px;
--lh-h2-desktop: 80px;
--lh-h1-desktop: 104px;
/* Movil: */
--lh-xsm-mobile: 12px;
--lh-sm-mobile: 18px;
--lh-base-mobile: 24px;
--lh-h6-mobile: 28px;
--lh-h5-mobile: 28px;
--lh-h4-mobile: 32px;
--lh-h3-mobile: 40px;
--lh-h2-mobile: 40px;
--lh-h1-mobile: 40px;
/* spacing, padding, margin */
--space-none: 0px;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--space-8: 128px;
--space-9: 160px;
/* Tokens */
--bg-dark: var(--dark-gray);
/* spacing, padding, margin */
--space-none-0: var(--space-none);
--space-sm-8px: var(--space-1);
--space-md-16px: var(--space-2);
--space-lg-24px: var(--space-3);
--space-xl-32px: var(--space-4);
--space-2xl-48px: var(--space-5);
--space-3xl-64px: var(--space-6);
--space-4xl-96px: var(--space-7);
--space-5xl-128px: var(--space-8);
--space-6xl-160px: var(--space-9);
--padding-none-0: var(--space-none);
--padding-sm-8px: var(--space-1);
--padding-md-16px: var(--space-2);
--padding-lg-24px: var(--space-3);
--padding-xl-32px: var(--space-4);
--padding-2xl-48px: var(--space-5);
--padding-3xl-64px: var(--space-6);
--padding-4xl-96px: var(--space-7);
--padding-5xl-128px: var(--space-8);
--padding-6xl-160px: var(--space-9);
--margin-none-0: var(--space-none);
--margin-sm-8px: var(--space-1);
--margin-md-16px: var(--space-2);
--margin-lg-24px: var(--space-3);
--margin-xl-32px: var(--space-4);
--margin-2xl-48px: var(--space-5);
--margin-3xl-64px: var(--space-6);
--margin-4xl-96px: var(--space-7);
--margin-5xl-128px: var(--space-8);
--margin-6xl-160px: var(--space-9);
/* Font-sizes */
/* Desktop: */
--font-desktop-xsm: var(--xsm-desktop);
--font-desktop-sm: var(--sm-desktop);
--font-desktop-base: var(--base-desktop);
--font-desktop-h6: var(--h6-desktop);
--font-desktop-h5: var(--h5-desktop);
--font-desktop-h4: var(--h4-desktop);
--font-desktop-h3: var(--h3-desktop);
--font-desktop-h2: var(--h2-desktop);
--font-desktop-h1: var(--h1-desktop);
/* Movil: */
--font-mobile-xsm: var(--xsm-mobile);
--font-mobile-sm: var(--sm-mobile);
--font-mobile-base: var(--base-mobile);
--font-mobile-h6: var(--h6-mobile);
--font-mobile-h5: var(--h5-mobile);
--font-mobile-h4: var(--h4-mobile);
--font-mobile-h3: var(--h3-mobile);
--font-mobile-h2: var(--h2-mobile);
--font-mobile-h1: var(--h1-mobile);
/* Line-heights */
/* Desktop: */
--line-height-desktop-xsm: var(--lh-xsm-desktop);
--line-height-desktop-sm: var(--lh-sm-desktop);
--line-height-desktop-base: var(--lh-base-desktop);
--line-height-desktop-h6: var(--lh-h6-desktop);
--line-height-desktop-h5: var(--lh-h5-desktop);
--line-height-desktop-h4: var(--lh-h4-desktop);
--line-height-desktop-h3: var(--lh-h3-desktop);
--line-height-desktop-h2: var(--lh-h2-desktop);
--line-height-desktop-h1: var(--lh-h1-desktop);
/* Movil: */
--line-height-mobile-xsm: var(--lh-xsm-mobile);
--line-height-mobile-sm: var(--lh-sm-mobile);
--line-height-mobile-base: var(--lh-base-mobile);
--line-height-mobile-h6: var(--lh-h6-mobile);
--line-height-mobile-h5: var(--lh-h5-mobile);
--line-height-mobile-h4: var(--lh-h4-mobile);
--line-height-mobile-h3: var(--lh-h3-mobile);
--line-height-mobile-h2: var(--lh-h2-mobile);
--line-height-mobile-h1: var(--lh-h1-mobile);
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
min-height: 100vh;
background-color: var(--bg-dark);
font-family: var(--font-family-primary), sans-serif, Arial;
}
p {
font-size: var(--font-desktop-base);
line-height: var(--line-height-desktop-base);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-base);
line-height: var(--line-height-mobile-base);
padding: 0;
margin: 0;
}
}
h1 {
font-size: var(--font-desktop-h1);
line-height: var(--line-height-desktop-h1);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h1);
line-height: var(--line-height-mobile-h1);
padding: 0;
margin: 0;
}
}
h2 {
font-size: var(--font-desktop-h2);
line-height: var(--line-height-desktop-h2);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h2);
line-height: var(--line-height-mobile-h2);
padding: 0;
margin: 0;
}
}
h3 {
font-size: var(--font-desktop-h3);
line-height: var(--line-height-desktop-h3);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h3);
line-height: var(--line-height-mobile-h3);
padding: 0;
margin: 0;
}
}
h4 {
font-size: var(--font-desktop-h4);
line-height: var(--line-height-desktop-h4);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h4);
line-height: var(--line-height-mobile-h4);
padding: 0;
margin: 0;
}
}
h5 {
font-size: var(--font-desktop-h5);
line-height: var(--line-height-desktop-h5);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h5);
line-height: var(--line-height-mobile-h5);
padding: 0;
margin: 0;
}
}
h6 {
font-size: var(--font-desktop-h6);
line-height: var(--line-height-desktop-h6);
padding: 0;
margin: 0;
color: white;
@media (max-width: 768px) {
font-size: var(--font-mobile-h6);
line-height: var(--line-height-mobile-h6);
padding: 0;
margin: 0;
}
}
.bg-image {
position: absolute;
top: -180px;
right: 0px;
width: 1400px;
height: 1400px;
transform: translateX(8%);
background-image: url("../assets/imgs/n-naliia-blanca.svg");
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
pointer-events: none;
opacity: 0.02;
}
.body-container {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
z-index: 0;
overflow-x: hidden;
}
main {
flex: 1;
}