:root{
--padding-container: 100px 0;
--color-tittle: #001A49;
}
body{
font-family: "Poppins", sans-serif;
}
.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: var(--padding-container);
}
.hero{
width: 100%;
height: 100vh;
min-height: 400px;
max-height: 650px;
position: relative;
display: grid;
grid-template-rows: 250px 1fr;
color: #fff;
}
.hero::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #0000008c 0%, #0000008c 100%), url("../Images/taca1.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
clip-path: ellipse(66% 59% at 49% 37%);
z-index: -1;
}
/*Nav datos del indice*/
.nav{
--padding-container:0;
height: 100%;
display: flex;
align-items: center;
}
/*Nav datos del titulo*/
.nav_title{
font-weight: 800;
color: #fff;
}
.nav_link{
margin-left: auto;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 3em;
height: 70%;
}
.nav_items{
list-style: none;
}
.nav_links{
color: #fff;
text-decoration: none;
}
.nav_menu{
margin-left: auto;
cursor: pointer;
display: none;
}
.nav_img{
display: block;
width: 50px;
}
.nav_close{
display: var(--show, none);
}
/*Hero Container*/
.hero_container{
max-width: 1000px;
--padding-container:0;
display: grid;
grid-auto-rows: max-content;
align-content: center;
gap: 3em;
padding-bottom: 50px;
text-align: center;
}
/*ESTILO DEL LOGO*/
.logo{
position: relative;
width: 100%;
height: auto;
top: 10px;
left: 10px;
width: 180px;
z-index: 10;
}
/* TAMAÑO DEL TITULO*/
.hero_title{
font-size: 4rem;
}
.hero_paragraph{
margin-bottom: 1px;
}
nav a:hover{
background-color: rgb(250, 248, 248);
}
.menu > li{
float: left;
width: 16;
text-align: center;
}
li ul{
display: none;
}
li:hover > ul{
display: block;
}
nav ul{
list-style: none;
}
header a:hover{
color: rgb(3, 15, 20);
}
/*about*/
.about{
text-align: center;
}
.subtitle{
color: var(--color-tittle);
font-size: 2rem;
margin-bottom: 25px;
}
.about_paragraph{
line-height: 1.7;
}
.about_main{
padding-top: 80px;
display: grid;
width: 90%;
margin: 0 auto;
gap: 1em;
overflow: hidden;
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
margin-bottom: 50px;
}
.about_image{
display: grid;
gap: 1em;
justify-items: center;
width: 250px;
overflow: hidden;
margin: 0 auto;
}
.knowledge{
background-color: #e5e5f7;
background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
background-size: 10px 10px;
overflow: hidden;
padding: 20px;
}
.knowledge_container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
align-items: center;
padding-top: 10px;
}
.knowledge_picture{
max-width: 500px;
}
.knowledge_paragraph{
line-height: 1.7;
}
.knowledge_img{
width: 100%;
display: block;
}
/*PRICE*/
.price{
text-align: center;
padding: 10px;
}
.price_table{
padding-top: 60px;
display: flex;
flex-wrap: wrap;
gap: 2.5em;
justify-content: space-evenly;
align-items: center;
}
.price_element{
background-color: #e5e5f7;
text-align: center;
border-radius: 10px;
width: 330px;
padding: 40px;
--color-plan: #696871;
--color-price: #1D293F;
--bg-cta: #fff;
--color-cta: #5454D4;
--color-items: #696871;
}
.price_element--best{
width: 370px;
padding: 60px 40px;
background-color: #e6b47b;
--color-plan: rgb(255 255 255 / 75%);
--color-price: #fff;
--bg-cta: #d4a876;
--color-cta: #fff;
--color-items: #fff;
}
.price_name{
color: var(--color-plan);
margin-bottom: 10px;
font-weight: 500;
}
.price_price{
font-size: 2em;
color: var(--color-price);
}
.price_items{
margin-top: 35px;
display: grid;
gap: 1em;
font-weight: 300;
font-size: 1.2rem;
margin-bottom: 50px;
color: var(--color-items);
}
.price_cta{
display: block;
padding: 20px 0;
border-radius: 10px;
text-decoration: none;
background-color: var(--bg-cta);
font-weight: 600;
color: var(--color-cta);
box-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
/*TESTIMONY*/
.testimony{
background-color: #fcf1f1;
padding: 20px;
}
.testimony_container{
display: grid;
grid-template-columns: 70px 1fr 50px;
gap: 1em;
align-items: center;
}
.testimony_body{
display: grid;
grid-template-columns: 1fr max-content;
justify-content: space-between;
align-items: center;
gap: 2em;
grid-column: 2/3;
grid-row: 1/2;
opacity: 0;
pointer-events: none;
}
.testimony_body--show{
pointer-events: unset;
opacity: 1;
transition: opacity 1.5s ease-in-out;
}
.testimony_img{
width: 250px;
border-radius: 10%;
object-fit: cover;
object-position: 100% 60%;
margin: auto;
}
.testimony_text{
max-width: 500px;
}
.testimony_course{
background-color: #1D293F;
color: #e6e9ec;
display: inline-block;
padding: 5px;
}
.testimony_arrow{
width: auto;
cursor: pointer;
}
/* FOOTER */
.footer{
background-color: #12496e;
}
.footer_title{
font-weight: 300;
font-size: 2rem;
margin-bottom: 30px;
}
.footer_title, .footer_newslatter{
color: #fff;
}
.footer_container{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #fff;
padding-bottom: 60px;
}
.nav--footer{
padding-bottom: 20px;
display: grid;
gap: 1em;
grid-auto-flow: row;
height: 100%;
}
.nav_link--footer{
display: flex;
margin: 0;
margin-right: 20px;
flex-wrap: wrap;
}
.footer_inputs{
margin-top: 10px;
display: flex;
overflow: hidden;
}
.footer_input{
background-color: #fff;
height: 50px;
display: block;
padding-left: 10px;
border-radius: 6px;
font-size: 1rem;
outline: none;
border: none;
margin-right: 16px;
}
.footer_submit{
margin-left: auto;
display: inline-block;
height: 50px;
padding: 0 20px;
background-color: #2091f9;
border: none;
font-size: 1rem;
color: #fff;
border-radius: 6px;
}
.footer_copy{
--padding-container: 30px 0;
text-align: center;
color: #fff;
}
.footer_copyright{
font-weight: 300;
}
.footer_icons{
display: inline-flex;
margin-bottom: 60px;
}
.footer_img1{
width: 25px;
padding: 10%;
}
.footer_img2{
width: 28px;
padding: 10%;
}
.footer_img3{
width: 29px;
padding: 10%;
}
/* MEDIA QUERIES */
@media only screen and (max-width:800px){
.icono-movil{
display: block;
}
.nav_menu{
display: block;
}
.nav_link--menu{
position: fixed;
background-color: #000;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: .7s opacity;
}
.nav_link--show{
--show: block;
opacity:1 ;
pointer-events: unset;
}
.nav_close{
position: absolute;
top: 30px;
right: 30px;
width: 30px;
cursor: pointer;
}
/* Estilos para la ventana flotante (modal) */