Resposivo Posgrado 3
This commit is contained in:
TioSam77
@@ -557,70 +557,78 @@ Nav Menu Sec
|
||||
Hero
|
||||
========== */
|
||||
#hero {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: url("../img/solid.png") top center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
background: url(../../assets/img/solid.png);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
#hero #hero_container {
|
||||
min-height: 80vh;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 80vh;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: justify;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 li {
|
||||
list-style: none;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 span {
|
||||
color: #bb8800;
|
||||
#hero #hero_container #information #box-information1 {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 h2 {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 #line-information {
|
||||
border-left: 3px solid #bb8800;
|
||||
padding-left: 15px;
|
||||
border-left: 0.3rem solid #bb8800;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 #line-information:before {
|
||||
#hero #hero_container #information #box-information1 #line-information li {
|
||||
list-style: none;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 #line-information span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 #line-information::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
background: white;
|
||||
top: -10px;
|
||||
left: -9px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
border: solid 2px #1e3c70;
|
||||
top: -8px;
|
||||
left: -9px;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-top: 25px;
|
||||
padding-top: 5.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-items: end;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
padding: 2rem 2rem 2rem 2rem;
|
||||
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;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
transition: all ease 0.4s;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card::before {
|
||||
content: '';
|
||||
@@ -629,9 +637,9 @@ Hero
|
||||
border-left: 4px #1e3c70 solid;
|
||||
border-top: 4px #1e3c70 solid;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
border-radius: 6px;
|
||||
top: 15px;
|
||||
left: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card::after {
|
||||
content: '';
|
||||
@@ -640,56 +648,32 @@ Hero
|
||||
border-bottom: 4px #1e3c70 solid;
|
||||
border-right: 4px #1e3c70 solid;
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 7px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card h2 {
|
||||
font-weight: 600;
|
||||
bottom: 15px;
|
||||
right: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#hero {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#hero #hero_container {
|
||||
margin-top: 115px;
|
||||
min-height: 150vh;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 150vh;
|
||||
#hero #hero_container #information #box-information1 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 {
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
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;
|
||||
}
|
||||
@media (max-width: 440px) {
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
padding-bottom: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
#hero {
|
||||
min-height: 125vh;
|
||||
padding: 0;
|
||||
}
|
||||
#hero #hero_container {
|
||||
margin-top: 115px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 100vh;
|
||||
@media (max-width: 1200px) {
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
|
||||
+150
-117
@@ -691,133 +691,166 @@ Variables
|
||||
Hero
|
||||
========== */
|
||||
|
||||
#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{
|
||||
min-height: 100vh;
|
||||
background: url(../../assets/img/solid.png);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
#hero_container{
|
||||
min-height: 80vh;
|
||||
#information{
|
||||
min-height: 80vh;
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-align: justify;
|
||||
|
||||
|
||||
#box-information1{
|
||||
padding-top: 7rem;
|
||||
|
||||
.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;
|
||||
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;
|
||||
h2{
|
||||
font-weight: 700;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
#line-information{
|
||||
border-left: 0.3rem solid @color-prin;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
margin: 2rem 0;
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
span{
|
||||
color: @color-prin;
|
||||
}
|
||||
|
||||
&::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;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
border: solid 2px @color-sec;
|
||||
top: -8px;
|
||||
left: -9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#box-information2{
|
||||
padding-top: 5.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
|
||||
div{
|
||||
|
||||
line-height: 10px;
|
||||
}
|
||||
p{
|
||||
font-weight: 400;
|
||||
}
|
||||
#information-2-card{
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
padding: 2rem 2rem 2rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
transition: all ease 0.4s;
|
||||
span{
|
||||
color: @color-prin;
|
||||
}
|
||||
&:hover{
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-left: 4px @color-sec solid;
|
||||
border-top: 4px @color-sec solid;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-bottom: 4px @color-sec solid;
|
||||
border-right: 4px @color-sec solid;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
margin-top: 10rem;
|
||||
#information{
|
||||
#box-information1{
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
#box-information2{
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media(max-width:440px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
#information{
|
||||
|
||||
#box-information2{
|
||||
#information-2-card{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:1200px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
#information{
|
||||
#box-information2{
|
||||
#information-2-card{
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==========
|
||||
Main
|
||||
========== */
|
||||
#main{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
@@ -65,27 +65,27 @@
|
||||
|
||||
<div id="information-2-card">
|
||||
<h2><span><i class="bi bi-file-person-fill"></i> Contacto</span></h2>
|
||||
|
||||
<div>
|
||||
<p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán)</strong></p>
|
||||
<p><strong>Dr. Omar Lezáma Galindo</strong></p>
|
||||
<p><strong>Teléfono y fax:</strong> 56-23-17-50 ext.38860</p>
|
||||
<p>Cubículo 36 primer piso del edifcio de Posgrado</p>
|
||||
<p><strong>Correo Electrónico: </strong> <a href="">pada@acatlan.unam.mx</a></p>
|
||||
<p><strong>Teléfono y fax:</strong> 56-23-17-50 ext.38860. Cubículo 36 primer piso del edifcio de Posgrado</p>
|
||||
<p><strong>Correo Electrónico: <br></strong> <a href="">pada@acatlan.unam.mx</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Grado que se otorga:</strong></p>
|
||||
<p>Doctor en Artes y Diseño</p>
|
||||
<p><strong>Grado que se otorga:</strong> <br>Doctor en Artes y Diseño</p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Plan de estudios</strong></p>
|
||||
<p>Consulta el <a href="">Plan de estudios</a> para obtener información acerca de la</p>
|
||||
<p>estructura curricular y de las actividades académicas correspondientes</p>
|
||||
<p>Consulta el <a href="">Plan de estudios</a> para obtener información acerca de la estructura curricular y de las actividades académicas correspondientes</p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Normas operativas</strong></p>
|
||||
<p>Consulta las <a href="">Normas Operativas</a> para obtener información acerca de la operación del Programa de Posgrado en Artes y Diseño</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user