Tutorial Alonzo

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap’);

body {
padding: 0%;
margin: 0%;

}

header {
width: 100%;
height: 5vh;
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
position: fixed;

}

.inHeader{
width: 40%;
display: flex;
justify-content: space-between;
}

.inHeader a{
height: 2.5vh;
text-decoration: none;
color: #FFFFFF;
font-family: “Montserrat”, sans-serif;
font-weight: bold;

}

.aContact{
color: #FFFFFF;
background-color: #29339B;
padding-left: 1.5%;
padding-right: 1.5%;
border-radius: 30px;
}

.logoImage {
height: 2.5vh;
}

.presentation1{
width: 100%;
height: 100vh;
background-image: radial-gradient(circle at center top, #141530 0%, #000000 70%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}

.h1Presentation1{
width: 80%;
height: auto;
display: flex;
justify-content: center;
text-align: center;
font-size: 72px;
background-image: linear-gradient( #FFFFFF, #90909A);
background-clip: text;
color: transparent;
font-family: “Montserrat”, sans-serif;
font-weight: bold;
}

.h4Presentation1{
width: 70%;
display: flex;
justify-content: center;
text-align: center;
font-size: 32px;
color: #90909A;
font-family: “Montserrat”, sans-serif;
font-weight: bold;
}

.presentation2{
width: 100%;
height: 120vh;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;

}

.bentoPresentation2{
width: 80%;
height: 80vh;
display: flex;
background-image: linear-gradient(to right, #2F0743 , #41295a);
border-radius: 30px;
box-shadow: 0px 0px 200px 30px #141530;
}

.leftPresentation2{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.leftPresentation2 h1{
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #FFFFFF;
font-family: “Montserrat”, sans-serif;
font-weight: bold;
}

.rightPresentation2{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.imageRightPresentation2{
width: 80%;
}

.presentation3{
width: 100%;
height: 120vh;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}

.percentageTable{
width: 80%;
height: 80vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
background-image: linear-gradient(to right, #2F0743 , #41295a);
border-radius: 30px;
box-shadow: 0px 0px 200px 30px #141530;
padding: 1% 1% 1% 1%;
}

.percentageTable h1{
font-size: 30px;
color: #FFFFFF;
font-family: “Montserrat”, sans-serif;
font-weight: bold;
}

.container{
width: 100%;
background-color: transparent;
font-size: 16px;
color: #FFFFFF;
font-family: “Montserrat”, sans-serif;
font-weight: bold;

}

.percentageTable p{
font-size: 20px;
color: #FFFFFF;
font-family: “Montserrat”, sans-serif;
font-weight: bold;
}

.percentage{
text-align: right;
color: #FFFFFF;
padding-right: 1%;
}

.a2017{
background: linear-gradient(to left, #b92b27, #1565C0);
animation: filla2017 2s forwards;
border-radius: 30px;
}
@keyframes filla2017 {
0%{width: 0;}
100%{width: 63.7%;}
}

.a2018{
background: linear-gradient(to left, #373B44, #4286f4);
animation: filla2018 2s forwards;
border-radius: 30px;
}
@keyframes filla2018 {
0%{width: 0;}
100%{width: 65.5%;}
}

.a2019{
background: linear-gradient(to left, #333333, #dd1818);
animation: filla2019 2s forwards;
border-radius: 30px;
}
@keyframes filla2019 {
0%{width: 0;}
100%{width: 69.6%;}
}

.a2020{
background: linear-gradient(to left, #C33764, #1D2671);
animation: filla2020 2s forwards;
border-radius: 30px;
}
@keyframes filla2020 {
0%{width: 0;}
100%{width: 71.5%;}
}

.a2021{
background: linear-gradient(to left, #1488CC, #2B32B2);
animation: filla2021 2s forwards;
border-radius: 30px;
}
@keyframes filla2021 {
0%{width: 0;}
100%{width: 75.6%;}
}

.a2022{
background: linear-gradient(to left, #cc2b5e, #753a88);
animation: filla2022 2s forwards;
border-radius: 30px;
}
@keyframes filla2022 {
0%{width: 0;}
100%{width: 78.6%;}
}

Muy bien esto mas que una card, es una pagina home, como pueden ver solo es el html y NO el css, ahora lo subo, el html muestra 3 contenedores principales los cuales llame presentation para que fuera como una vista de la computadora para hacer eso respecte las mismas medidas ya que son 100% de ancho y 120% de alto pero usando la medida vh (esta medida tiene como referencia el alto de la distribucion 16:9) y bien dentro de esas presentation ya se encuentra el conteniedo que como se puden dar cuenta la base de un contenedor con el 80% de ancho y el 80% de alto para asii hacer una especie de cuadrado, todo lo hice con flexbox