Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 David19735
|
247089108b | ||
|
David19735
|
040fcb1d39 |
@@ -0,0 +1,959 @@
|
||||
/* Variables */
|
||||
/* ==========
|
||||
General
|
||||
========== */
|
||||
body {
|
||||
color: #cccccc;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
/* ==========
|
||||
|
||||
========== */
|
||||
/* ==========
|
||||
Back to top button
|
||||
========== */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
display: none;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 99999;
|
||||
text-decoration: none;
|
||||
}
|
||||
.back-to-top i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #bb8800;
|
||||
color: #1e3c70;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.back-to-top i:hover {
|
||||
background-color: #1e3c70;
|
||||
color: #bb8800;
|
||||
}
|
||||
/* ==========
|
||||
aos animation delay mobile
|
||||
========== */
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-aos-delay] {
|
||||
transition-delay: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
Header
|
||||
========== */
|
||||
#header {
|
||||
transition: all 0.5s;
|
||||
z-index: 997;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: rgba(20, 30, 48, 0.8);
|
||||
}
|
||||
#header .logo {
|
||||
max-height: 68px;
|
||||
margin: 3px 4px 0 0;
|
||||
}
|
||||
#header .logo-unam {
|
||||
max-height: 55px;
|
||||
}
|
||||
#header h1 {
|
||||
color: #1e3c70;
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
#header h1 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#header {
|
||||
position: fixed;
|
||||
}
|
||||
#header .logo {
|
||||
max-height: 40px;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
#header .logo-unam {
|
||||
max-height: 40px;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
#header h1 {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
Nav Menu
|
||||
========== */
|
||||
/* Desktop */
|
||||
.nav-menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-menu > ul {
|
||||
display: flex;
|
||||
}
|
||||
.nav-menu > ul > li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0 10px 28px;
|
||||
}
|
||||
.nav-menu a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-menu a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu li:hover > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.nav-menu .drop-down ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
color: #151515;
|
||||
}
|
||||
.nav-menu .drop-down ul a:hover {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul .active > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul li:hover > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-menu .drop-down li {
|
||||
min-width: 180px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-menu .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
}
|
||||
.nav-menu .drop-down .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a:after {
|
||||
content: "\eaa0";
|
||||
font-family: IcoFont;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
@media (max-width: 1366px) {
|
||||
.nav-menu .drop-down .drop-down ul {
|
||||
left: -90%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down:hover > ul {
|
||||
left: -100%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a:after {
|
||||
content: "\ea9d";
|
||||
}
|
||||
}
|
||||
/* Mobile Navigation */
|
||||
.mobile-nav-toggle {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
z-index: 9998;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 24px;
|
||||
transition: all 0.4s;
|
||||
outline: none !important;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
.mobile-nav-toggle i {
|
||||
color: #bb8800;
|
||||
}
|
||||
.mobile-nav {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 55px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
background: rgba(30, 60, 112, 0.9);
|
||||
transition: ease-in-out 0.2s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-nav * {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-nav a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #bb8800;
|
||||
padding: 10px 20px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mobile-nav a:hover {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav .active a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav li:hover a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.mobile-nav .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.mobile-nav .drop-down ul {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav .drop-down li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.mobile-nav .active.drop-down a:after {
|
||||
content: "\eaa1";
|
||||
}
|
||||
.mobile-nav-overly {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9997;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.mobile-nav-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-active .mobile-nav {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobile-nav-active .mobile-nav-toggle i {
|
||||
color: #fff;
|
||||
}
|
||||
/* ==========
|
||||
Nav Menu Sec
|
||||
========== */
|
||||
/* Desktop */
|
||||
.navbar-2 {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.navbar-2 a {
|
||||
transition: 0.3s;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.navbar-2 .dropdown-menu a:hover {
|
||||
background-color: #1e3c70;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-2 .dropdown-item i:hover {
|
||||
color: goldenrod !important;
|
||||
}
|
||||
.navbar-2 i {
|
||||
color: goldenrod;
|
||||
font-size: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nav-menu-2 ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-menu-2 > ul {
|
||||
display: flex;
|
||||
}
|
||||
.nav-menu-2 > ul > li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0 10px 28px;
|
||||
}
|
||||
.nav-menu-2 a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-menu-2 a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .active > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 li:hover > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
color: #151515;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul a:hover {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul .active > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul li:hover > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-menu-2 .drop-down li {
|
||||
min-width: 180px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-menu-2 .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a:after {
|
||||
content: "\eaa0";
|
||||
font-family: IcoFont;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
@media (max-width: 1366px) {
|
||||
.nav-menu-2 .drop-down .drop-down ul {
|
||||
left: -90%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down:hover > ul {
|
||||
left: -100%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a:after {
|
||||
content: "\ea9d";
|
||||
}
|
||||
}
|
||||
/* Mobile */
|
||||
.mobile-nav-2-toggle {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 8px;
|
||||
z-index: 9998;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 24px;
|
||||
transition: all 0.4s;
|
||||
outline: none !important;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
background-color: #1e3c70;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mobile-nav-2-toggle i {
|
||||
color: #bb8800;
|
||||
}
|
||||
.mobile-nav-2 {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 55px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
background: rgba(30, 60, 112, 0.9);
|
||||
transition: ease-in-out 0.2s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 10px 0;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-nav-2 * {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-nav-2 a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #bb8800;
|
||||
padding: 10px 20px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
.mobile-nav-2 a:hover {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 .active > a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 li:hover > a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.mobile-nav-2 .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.mobile-nav-2 .drop-down ul {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-2 .drop-down li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.mobile-nav-2 .active.drop-down > a:after {
|
||||
content: "\eaa1";
|
||||
}
|
||||
.mobile-nav-2-overly {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9997;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.mobile-nav-2-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-2-active .mobile-nav-2 {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobile-nav-2-active .mobile-nav-2-toggle i {
|
||||
color: #fff;
|
||||
}
|
||||
/* ==========
|
||||
Hero
|
||||
========== */
|
||||
#hero {
|
||||
min-height: 100vh;
|
||||
background: url('../img/_DSC2981.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
#hero::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
#hero #hero_container {
|
||||
min-height: 70vh;
|
||||
z-index: 3;
|
||||
padding: 30px;
|
||||
z-index: 10;
|
||||
margin-top: 120px;
|
||||
}
|
||||
#hero #hero_container h2 {
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #bb8800;
|
||||
margin-bottom: 25px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 20px;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 25px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
#hero #hero_container #container_btn {
|
||||
width: 60%;
|
||||
height: 150px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
transition: all ease 0.3s;
|
||||
background: #1e3c70;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#hero #hero_container #container_btn a:hover {
|
||||
background: #bb8800;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
#hero #hero_container {
|
||||
margin-top: 150px;
|
||||
}
|
||||
#hero #hero_container h2 {
|
||||
font-size: 43px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#hero #hero_container h2 {
|
||||
font-size: 35px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 23px;
|
||||
}
|
||||
#hero #hero_container #container_btn {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 40%;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 60%;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
#hero #hero_container h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 15px;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 50%;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 591px) {
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
End hero
|
||||
========== */
|
||||
/* ==========
|
||||
Section
|
||||
========== */
|
||||
#courses {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
margin: 30px 0 10px 0;
|
||||
width: 55%;
|
||||
border-bottom: solid 3px #bb8800;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
color: #1e3c70;
|
||||
font-weight: 700;
|
||||
}
|
||||
#courses #courses_content h2 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 82vh;
|
||||
margin: 40px 0;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
width: 85%;
|
||||
min-height: 45vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.5rem;
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
min-height: 90px;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-weight: 600;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules p {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-weight: 500;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn {
|
||||
width: 50%;
|
||||
min-height: 10vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a {
|
||||
background: #1e3c70;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
transition: all ease 0.5s;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a:hover {
|
||||
color: #bb8800;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
#courses #courses_content h2 {
|
||||
width: 80%;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 30vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
#courses {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
width: 85%;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 20vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.5rem;
|
||||
min-height: 135px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 120px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn {
|
||||
width: 100%;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 769px) {
|
||||
#courses {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
min-height: 85px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 508px) {
|
||||
#courses #courses_content h2 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 390px) {
|
||||
#courses {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 26vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.1rem;
|
||||
min-height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
End Section
|
||||
========== */
|
||||
/* ==========
|
||||
Footer
|
||||
========== */
|
||||
#footer {
|
||||
background-color: black;
|
||||
padding: 0 0 30px 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
#footer .footer-top {
|
||||
background: linear-gradient(rgba(2, 2, 2, 0.9), rgba(20, 30, 48, 0.9)), url("../img/bg/_DSC3031.jpg") fixed top;
|
||||
background-size: cover;
|
||||
border-bottom: 1px solid #222222;
|
||||
padding: 60px 0 30px 0;
|
||||
}
|
||||
#footer .footer-top .footer-info {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-top .footer-info h3 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 2px 0 2px 0;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
#footer .footer-top .footer-info h3 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#footer .footer-top .footer-info p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
font-family: "Raleway", sans-serif;
|
||||
color: #fff;
|
||||
text-align: justify;
|
||||
}
|
||||
#footer .footer-top .social-links a {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
background: #292929;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8px 0;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#footer .footer-top .social-links a:hover {
|
||||
background: #ffc451;
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
}
|
||||
#footer .footer-top h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
#footer .footer-top .footer-links {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-top .footer-links ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#footer .footer-top .footer-links ul i {
|
||||
padding-right: 2px;
|
||||
color: #ffc451;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
#footer .footer-top .footer-links ul li {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#footer .footer-top .footer-links ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
#footer .footer-top .footer-links ul a {
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
#footer .footer-top .footer-links ul a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 686 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 784 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 311 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 515 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>FES Acatlán</title>
|
||||
<meta content="" name="descriptison">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link href="../assets/img/icon/icon.png" rel="icon">
|
||||
<link href="../assets/img/icon/icon.png" rel="apple-touch-icon">
|
||||
|
||||
|
||||
<!-- Ext CSS -->
|
||||
<link href="../assets/Ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/Ext/icofont/icofont.min.css" rel="stylesheet">
|
||||
<link href="../assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet">
|
||||
<link href="../assets/Ext/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/Ext/aos/aos.css" rel="stylesheet">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
|
||||
<!-- Main CSS -->
|
||||
<link href="./assets/css/educacion.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../assets/Ext/bootstrap-icons/bootstrap-icons.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- ======= Header ======= -->
|
||||
<!--<header id="header" class="fixed-top ">-->
|
||||
<header id="header">
|
||||
<div class="container d-flex align-items-center justify-content-between">
|
||||
<div class="">
|
||||
<a href="https://www.unam.mx/" target="_blank"><img src="../assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
|
||||
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="../assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
|
||||
</div>
|
||||
|
||||
<h1>FES <span>Acatlán</span></h1>
|
||||
|
||||
|
||||
<nav class="nav-menu d-none d-lg-block">
|
||||
<ul>
|
||||
<li><a href="#">Normatividad</a></li>
|
||||
<li><a href="#">Tienda Acatlán</a></li>
|
||||
</ul>
|
||||
</nav><!-- .nav-menu -->
|
||||
|
||||
</div>
|
||||
<div class="container ">
|
||||
<nav class="nav-menu-2 d-none d-lg-block">
|
||||
<ul>
|
||||
<li><a href="#">Inicio</a></li>
|
||||
<li><a href="#">Licenciaturas</a></li>
|
||||
<li><a href="#">Posgrados</a></li>
|
||||
<li><a href="#">Investigación</a></li>
|
||||
<li><a href="#">Cursos y Diplomados</a></li>
|
||||
<li><a href="#">Otros</a></li>
|
||||
</ul>
|
||||
</nav><!-- .nav-menu -->
|
||||
</div>
|
||||
</header><!-- End Header -->
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero">
|
||||
<div class="container-lg" id="hero_container" data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div id="container_content">
|
||||
<h2>centro de educación continua</h2>
|
||||
<p>El Centro de Educación Continua ofrece actividades académicas de calidad permitan atender y ofrecer soluciones integrales a las necesidades del entorno para la formación académica, actualización, capacitación y superación de profesionistas en distintas áreas del conocimiento tanto de la comunidad universitaria como a la comunidad externa.</p>
|
||||
|
||||
<p>Contamos con una oferta multidisciplinaria de cursos, diplomados y seminarios con contenidos actuales y de calidad; impartidos por destacados especialistas y docentes, en un ambiente de aprendizaje óptimo y de vanguardia. Cubriendo así las necesidades profesionales de ampliación y profundización de conocimientos, actualización, capacitación, especialización y superación académica de los profesionistas.</p>
|
||||
</div>
|
||||
<div id="container_btn">
|
||||
<a href="#">Cursos</a>
|
||||
<a href="#">Diplomados</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End Hero -->
|
||||
|
||||
|
||||
<!---Section-->
|
||||
|
||||
<section id="courses" data-aos="zoom-out-down">
|
||||
<div class="container-lg" id="courses_content">
|
||||
<h2>EDUCACION CONTINUA - <span>DIPLOMADOS</span></h2>
|
||||
<div class="row flex-row" id="courses_column">
|
||||
<div class="col-md-6 col-12" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/especializaciones-1.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Estrategias de Inversión Bursátil y Gestión del Riesgo Financiero</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 20 de Septiembre de 2024</p>
|
||||
<p>Horario: Viernes de 18:00 a 21:00 y Sábado de 08:00 a 13:00</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/banner-licenciaturas.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Arquitectura Contemporánea: Factores Geométricos, Estructura y Diseño Sustentable</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 21 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 18:00 a 21:00 horas y se deberá cubrir 5 horas de trabajo en plataforma moodle (CETED).</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="courses" data-aos="zoom-out-down">
|
||||
<div class="container-lg" id="courses_content">
|
||||
<h2>EDUCACION CONTINUA - <span>CURSOS</span></h2>
|
||||
<div class="row flex-row" id="courses_column">
|
||||
<div class="col-md-6 col-12" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/especializaciones-1.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Curso Intensivo de inglés básico PG1,PG2,PG3, PG4, PG5, PG6</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 20 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 17:00 a 20:00 horas y sábados de 9:00 a 14:00 horas</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/banner-licenciaturas.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>El Rol de Consultor: la Comunicación Política como Campo Disciplinario y Actividad Profesional</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 21 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 18:00 a 21:00 horas y se deberá cubrir 5 horas de trabajo en plataforma moodle (CETED).</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!---End section-->
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 footer-newsletter">
|
||||
<h4>Redes Sociales</h4>
|
||||
Siguenos en:
|
||||
<div class="social-links mt-3">
|
||||
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
|
||||
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
|
||||
<a href="#" class="google-plus"><i class='bx bxl-youtube' ></i></a>
|
||||
</div>
|
||||
|
||||
<img src="../assets/img/escudos/unam-nacion-blanco.png" style="width: 150px;; margin: 15px auto;">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 footer-links">
|
||||
<h4>Sitios de Interes</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-5</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-6</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 footer-links">
|
||||
<h4>Conoce más</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-info">
|
||||
<h3>FES <span>Acatlán</span></h3>
|
||||
<p>
|
||||
Hecho en México, todos los derechos reservados 2021.
|
||||
<br><br> Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer><!-- End Footer -->
|
||||
|
||||
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
|
||||
|
||||
<!-- Ext JS -->
|
||||
<script src="../assets/Ext/jquery/jquery.min.js"></script>
|
||||
<script src="../assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
|
||||
<script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
|
||||
<script src="../assets/Ext/aos/aos.js"></script>
|
||||
|
||||
<!-- Main JS -->
|
||||
<script src="../assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -566,6 +566,7 @@ Hero
|
||||
}
|
||||
#hero #hero_container {
|
||||
min-height: 80vh;
|
||||
padding-top: 80px;
|
||||
}
|
||||
#hero #hero_container #information {
|
||||
min-height: 80vh;
|
||||
@@ -650,26 +651,41 @@ Hero
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#hero #hero_container {
|
||||
margin-top: 10rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information1 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 {
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
word-wrap: break-word;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
#hero #hero_container #information #box-information2 #information-2-card {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1195px) {
|
||||
#hero #hero_container #information #box-information2 {
|
||||
padding-top: 8rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
#hero #hero_container #information #box-information2 {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 440px) {
|
||||
#hero #hero_container #information #box-information1 h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
#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;
|
||||
#hero #hero_container #information #box-information2 {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
@@ -752,7 +768,6 @@ Main
|
||||
@media (max-width: 300px) {
|
||||
#main #main_container #main_information {
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#main #main_container #main_information #main_information_box1 h2 {
|
||||
font-size: 1.5rem;
|
||||
@@ -764,7 +779,6 @@ Main
|
||||
@media (max-width: 764px) {
|
||||
#main #main_container #main_information {
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1414px) {
|
||||
@@ -884,35 +898,37 @@ Last section
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
border: 3px solid #bb8900b2;
|
||||
padding: 15px;
|
||||
padding-bottom: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#section #section_container #section_container_col #degree1 #parentDiv > div {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
padding: 15px;
|
||||
margin-right: 1px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid rgba(30, 60, 112, 0.6);
|
||||
border-radius: 1rem;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
transition: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
}
|
||||
#section #section_container #section_container_col #degree1 #parentDiv > div p {
|
||||
color: rgba(30, 60, 112, 0.6);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#section #section_container #section_container_col #degree1 #parentDiv > div.active {
|
||||
background-color: #1e3c70;
|
||||
border-color: #1e3c70;
|
||||
border-bottom: solid 2px rgba(30, 60, 112, 0.9);
|
||||
}
|
||||
#section #section_container #section_container_col #degree1 #parentDiv > div.active p {
|
||||
color: #fff;
|
||||
color: rgba(30, 60, 112, 0.9);
|
||||
}
|
||||
}
|
||||
@media (max-width: 540px) {
|
||||
#section #section_container #section_container_col #degree1 #parentDiv > div {
|
||||
min-width: 150px;
|
||||
}
|
||||
#section #section_container #section_container_col #degree2 #infoDiv > div h2 {
|
||||
width: 90%;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
@@ -688,8 +688,10 @@ Hero
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
#hero_container{
|
||||
min-height: 80vh;
|
||||
padding-top: 80px;
|
||||
#information{
|
||||
min-height: 80vh;
|
||||
color: rgba(255,255,255,0.8);
|
||||
@@ -786,28 +788,58 @@ Hero
|
||||
@media(max-width:768px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
margin-top: 10rem;
|
||||
margin-top: 2rem;
|
||||
#information{
|
||||
#box-information1{
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#box-information2{
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
padding-bottom: 2rem;
|
||||
#information-2-card{
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:1195px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
#information{
|
||||
#box-information2{
|
||||
padding-top: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:991px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
#information{
|
||||
#box-information2{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media(max-width:440px){
|
||||
#hero{
|
||||
#hero_container{
|
||||
#information{
|
||||
#box-information1{
|
||||
h2{
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#box-information2{
|
||||
#information-2-card{
|
||||
@@ -824,9 +856,7 @@ Hero
|
||||
#hero_container{
|
||||
#information{
|
||||
#box-information2{
|
||||
#information-2-card{
|
||||
word-wrap: break-word;
|
||||
}
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -923,7 +953,6 @@ Main
|
||||
#main_container{
|
||||
#main_information{
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
#main_information_box1{
|
||||
h2{
|
||||
font-size: 1.5rem;
|
||||
@@ -944,12 +973,13 @@ Main
|
||||
#main_container{
|
||||
#main_information{
|
||||
margin-bottom: 2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media(max-width:1414px){
|
||||
#hero{
|
||||
padding-top:150px;
|
||||
@@ -1099,32 +1129,29 @@ Last section
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
border: 3px solid #bb8900b2;
|
||||
padding: 15px;
|
||||
|
||||
padding-bottom: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
> div {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
padding: 15px;
|
||||
margin-right: 1px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid rgba(30, 60, 112, 0.6);
|
||||
border-radius: 1rem;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
transition: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
p {
|
||||
color: rgba(30, 60, 112, 0.6);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1e3c70;
|
||||
border-color: rgba(30, 60, 112, 1);
|
||||
|
||||
border-bottom: solid 2px rgba(30, 60, 112, 0.9);
|
||||
p {
|
||||
color: #fff;
|
||||
color: rgba(30, 60, 112, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1143,6 +1170,15 @@ Last section
|
||||
#section{
|
||||
#section_container{
|
||||
#section_container_col{
|
||||
|
||||
#degree1{
|
||||
#parentDiv{
|
||||
> div{
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#degree2{
|
||||
#infoDiv{
|
||||
> div{
|
||||
@@ -1150,6 +1186,9 @@ Last section
|
||||
width: 90%;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const infoDivs = document.querySelectorAll('#infoDiv > div');
|
||||
|
||||
function setActiveDiv(index) {
|
||||
// Remove active class from all parent divs and info divs
|
||||
parentDivs.forEach(div => div.classList.remove('active'));
|
||||
infoDivs.forEach(div => div.classList.remove('active'));
|
||||
|
||||
// Add active class to the corresponding parent div and info div
|
||||
if (parentDivs[index]) {
|
||||
parentDivs[index].classList.add('active');
|
||||
}
|
||||
@@ -20,6 +18,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
parentDiv.addEventListener('click', () => setActiveDiv(index));
|
||||
});
|
||||
|
||||
// Set the first div as active on page load
|
||||
setActiveDiv(0);
|
||||
});
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<h3><i class="bi bi-book"></i> Objetivo</h3>
|
||||
<h3><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> Objetivo</h3>
|
||||
<div id="line-information">
|
||||
<p>Preparar al alumno para realizar investigaciones originales y de alto nivel, en tomo a un problema o problemas específicos propios de algúnos de los campos de conocimiento del Programa con base en el dominio de conocimientos teóricos, metodológicos y sobre procedimentales</p>
|
||||
<p>Que el alumno adquiera una sólida formación disciplinaria teórica, técnica y metodológica, para la realización de investigaciones teórico-prácticas originales, que le permita ejercer la profresión tanto a nivel</p>
|
||||
@@ -137,7 +137,7 @@
|
||||
<div class="col-lg-6 col-12" id="main_information_box1" data-aos="fade-up"
|
||||
data-aos-duration="2000">
|
||||
|
||||
<h2><i class="bi bi-book" style="color: #1e3c70;"></i> <span>Dirigido a:</span> </h2>
|
||||
<h2><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> <span>Dirigido a:</span> </h2>
|
||||
|
||||
<div id="main_box-line1">
|
||||
<p>Profesionales ya titulados con formación en torno a la imágen estática o en movimiento, las artes y artes visuales así como disciplinas afines con la educación y desarrollos plásticos en tercera dimensión</p>
|
||||
@@ -154,7 +154,7 @@
|
||||
<div class="col" id="main_information_box2" data-aos="fade-up"
|
||||
data-aos-duration="2000">
|
||||
|
||||
<h2><i class="bi bi-book" style="color: #1e3c70;"></i> <span>Campo laboral</span></h2>
|
||||
<h2><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> <span>Campo laboral</span></h2>
|
||||
<div id="main_box-line2">
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
Reference in New Issue
Block a user