Se realizan cambios para el responsive
This commit is contained in:
David19735
@@ -567,39 +567,29 @@ Hero
|
||||
align-items: flex-end;
|
||||
color: white;
|
||||
}
|
||||
#hero .hero-container {
|
||||
width: 85%;
|
||||
height: 82vh;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
#hero #hero_container {
|
||||
min-height: 80vh;
|
||||
}
|
||||
#hero .hero-container .box-information1 {
|
||||
width: 50%;
|
||||
height: 82vh;
|
||||
padding-top: 3px;
|
||||
#hero #hero_container #information {
|
||||
min-height: 80vh;
|
||||
}
|
||||
#hero .hero-container .box-information1 li {
|
||||
#hero #hero_container #information #box-information1 li {
|
||||
list-style: none;
|
||||
}
|
||||
#hero .hero-container .box-information1 span {
|
||||
#hero #hero_container #information #box-information1 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#hero .hero-container .box-information1 h2 {
|
||||
#hero #hero_container #information #box-information1 h2 {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin: 15px 0;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
#hero .hero-container .box-information1 h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
#hero .hero-container .box-information1 .line-information {
|
||||
#hero #hero_container #information #box-information1 #line-information {
|
||||
border-left: 3px solid #bb8800;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
#hero .hero-container .box-information1 .line-information:before {
|
||||
#hero #hero_container #information #box-information1 #line-information:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
@@ -610,111 +600,134 @@ Hero
|
||||
left: -9px;
|
||||
border: solid 2px #1e3c70;
|
||||
}
|
||||
#hero .hero-container .box-information2 {
|
||||
width: 50%;
|
||||
height: 82vh;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
#hero #hero_container #information #box-information2 {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
#hero .hero-container .box-information2 span {
|
||||
color: #bb8800;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
font-size: 25px;
|
||||
}
|
||||
#hero .hero-container .box-information2 .information-2-card {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-left: 35px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
height: 95%;
|
||||
margin: auto 0;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
#hero .hero-container .box-information2 .information-2-card::before {
|
||||
#hero #hero_container #information #box-information2 #information-2-card::before {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-left: 5px #1e3c70 solid;
|
||||
border-top: 5px #1e3c70 solid;
|
||||
border-left: 4px #1e3c70 solid;
|
||||
border-top: 4px #1e3c70 solid;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#hero .hero-container .box-information2 .information-2-card::after {
|
||||
#hero #hero_container #information #box-information2 #information-2-card::after {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-bottom: 5px #1e3c70 solid;
|
||||
border-right: 5px #1e3c70 solid;
|
||||
border-bottom: 4px #1e3c70 solid;
|
||||
border-right: 4px #1e3c70 solid;
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 7px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#hero .hero-container .box-information2 .information-2-card div {
|
||||
line-height: 10px;
|
||||
}
|
||||
#hero .hero-container .box-information2 .information-2-card p {
|
||||
font-weight: 400;
|
||||
}
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#main li {
|
||||
list-style: none;
|
||||
}
|
||||
#main .main-container {
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#main .main-container h2 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#main .main-container .box1,
|
||||
#main .main-container .box2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#main .main-container .box1 h2,
|
||||
#main .main-container .box2 h2 {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
}
|
||||
#main .main-container .box1 span,
|
||||
#main .main-container .box2 span {
|
||||
#hero #hero_container #information #box-information2 #information-2-card span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#main .main-container .box1 ul,
|
||||
#main .main-container .box2 ul,
|
||||
#main .main-container .box1 li,
|
||||
#main .main-container .box2 li {
|
||||
margin: 13px 0;
|
||||
#hero #hero_container #information #box-information2 #information-2-card h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
#main .main-container .box-line1 {
|
||||
@media (max-width: 768px) {
|
||||
#hero {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#hero #hero_container {
|
||||
margin-top: 115px;
|
||||
min-height: 150vh;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 150vh;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
@media (max-width: 425px) {
|
||||
#hero {
|
||||
min-height: 180vh;
|
||||
}
|
||||
#hero #hero_container {
|
||||
margin-top: 115px;
|
||||
min-height: 180vh;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 180vh;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
#hero {
|
||||
min-height: 125vh;
|
||||
}
|
||||
#hero #hero_container {
|
||||
margin-top: 115px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
Main
|
||||
========== */
|
||||
#main {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
#main #main_container {
|
||||
min-height: 80vh;
|
||||
}
|
||||
#main #main_container #main_information {
|
||||
min-height: 80vh;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1 {
|
||||
border-left: 4px solid #bb8800;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: justify;
|
||||
}
|
||||
#main .main-container .box-line1::before {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
@@ -725,7 +738,7 @@ Hero
|
||||
top: 0px;
|
||||
left: -9px;
|
||||
}
|
||||
#main .main-container .box-line1::after {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
@@ -736,12 +749,30 @@ Hero
|
||||
top: 88px;
|
||||
left: -9px;
|
||||
}
|
||||
#main .main-container .box-line2 {
|
||||
#main #main_container #main_information #main_information_box2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 #main_box-line2 {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
border-left: 4px solid #bb8800;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
#main .main-container .box-line2::before {
|
||||
#main #main_container #main_information #main_information_box2 #main_box-line2 li {
|
||||
list-style: none;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 #main_box-line2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
@@ -750,8 +781,299 @@ Hero
|
||||
border: solid 3px #1e3c70;
|
||||
border-radius: 50%;
|
||||
top: 0px;
|
||||
left: -9px;
|
||||
left: -9.5px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#main {
|
||||
min-height: 200vh;
|
||||
}
|
||||
#main #main_container {
|
||||
min-height: 200vh;
|
||||
}
|
||||
#main #main_container #main_information {
|
||||
min-height: 100vh;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 {
|
||||
min-height: 100vh;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: -50px;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 115px;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box2 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
#main #main_container #main_information #main_information_box1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 135px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 765px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 87px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 115px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 425px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 140px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 160px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 305px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 184px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 270px) {
|
||||
#main #main_container #main_information #main_information_box1 #main_box-line1::after {
|
||||
top: 255px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
#hero {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: url("../img/solid.png") top center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
color: white;
|
||||
|
||||
|
||||
|
||||
.hero-container{
|
||||
width: 85%;
|
||||
height: 82vh;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
|
||||
.box-information1{
|
||||
width: 50%;
|
||||
height: 82vh;
|
||||
padding-top: 3px;
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
span{
|
||||
color: @color-prin;
|
||||
}
|
||||
h2{
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;margin: 15px 0;
|
||||
}
|
||||
h3{
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.line-information{
|
||||
border-left: 3px solid @color-prin;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
top: -10px;
|
||||
left: -9px;
|
||||
border: solid 2px @color-sec;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-information2{
|
||||
width: 50%;
|
||||
height: 82vh;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-top: 25px;
|
||||
|
||||
span{
|
||||
color: @color-prin;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
font-size: 25px;
|
||||
}
|
||||
.information-2-card{
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-left: 35px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-left: 5px @color-sec solid;
|
||||
border-top: 5px @color-sec solid;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-bottom: 5px @color-sec solid;
|
||||
border-right: 5px @color-sec solid;
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 7px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
||||
div{
|
||||
|
||||
line-height: 10px;
|
||||
}
|
||||
p{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
/*
|
||||
#main{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(0,0,0,0.7);
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
.main-container{
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.box1,.box2{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
h2{
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
}
|
||||
span{
|
||||
color: @color-prin;
|
||||
}
|
||||
|
||||
ul,li{
|
||||
margin: 13px 0;
|
||||
}
|
||||
}
|
||||
.box-line1{
|
||||
border-left: 4px solid @color-prin;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
border: solid 3px @color-sec;
|
||||
border-radius: 50%;
|
||||
top:0px;
|
||||
left: -9px;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
border: solid 3px @color-sec;
|
||||
border-radius: 50%;
|
||||
top: 88px;
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-line2{
|
||||
border-left: 4px solid @color-prin;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
border: solid 3px @color-sec;
|
||||
border-radius: 50%;
|
||||
top:0px;
|
||||
left: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
*/
|
||||
/* ==========
|
||||
Footer
|
||||
========== */
|
||||
|
||||
Reference in New Issue
Block a user