Skip to content

Diego Prieto / landingpage_gpi

Go to a project
Commit a54c4243 by Diego Prieto
Options

Merge branch 'dev' into 'qa' 

Dev

See merge request !4
parents 0040a906 c425d997
Inline Side-by-side
Showing with 1637 additions and 578 deletions
assets/css/custom.css
......@@ -15,14 +15,14 @@
#header .btn-sesion {
font-family: var(--font-primary);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
font-size: 20px;
display: inline-block;
padding: 14px 30px;
padding: 5px 20px;
border-radius: 50px;
transition: 0.3s;
color: #fff;
background: var(--color-primary);
color: #3366ff;
background: #bcef1a;
margin-left: 40px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1);
}
......@@ -44,16 +44,9 @@
#header .btn-register {
font-family: var(--font-primary);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 14px 30px;
border-radius: 50px;
font-size: 1.8rem;
transition: 0.3s;
color: var(--color-primary);
background: var(--color-secondary);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1);
color: white;
}
#header .btn-register:hover {
......@@ -64,7 +57,7 @@
.navbar > ul > li > a {
padding: 0 5px;
}
#header .btn-sesion {
display: flex;
align-items: center;
......@@ -86,8 +79,6 @@
#header .btn-sesion i {
display: block;
}
}
#section-secundary {
......
assets/css/main.css
/* Fonts */
:root {
--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Poppins", sans-serif;
--font-default: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'Poppins', sans-serif;
}
/* Colors */
......@@ -51,7 +51,7 @@ h6 {
# Sections & Section Header
--------------------------------------------------------------*/
section {
padding: 60px 0;
padding: 0;
overflow: hidden;
}
......@@ -73,7 +73,7 @@ section {
}
.section-header h2:after {
content: "";
content: '';
position: absolute;
display: block;
width: 50px;
......@@ -144,7 +144,7 @@ section {
display: inline-block;
padding-right: 10px;
color: var(--color-secondary);
content: "/";
content: '/';
}
/*--------------------------------------------------------------
......@@ -194,7 +194,7 @@ section {
}
#preloader:before {
content: "";
content: '';
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
......@@ -281,15 +281,14 @@ section {
.header {
transition: all 0.5s;
z-index: 997;
height: 90px;
background-color: var(--color-primary);
height: 100px;
background-color: #3366ff;
}
@media (max-width: 417px) {
.header {
height: auto;
}
}
.header.sticked {
......@@ -297,13 +296,16 @@ section {
top: 0;
right: 0;
left: 0;
min-height: 70px;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.header .logo img {
.header .logo1 img {
max-height: 60px;
margin-right: 6px;
}
.header .logo img {
max-height: 95px;
margin-left: 15px;
}
.header .logo h1 {
......@@ -323,281 +325,113 @@ section {
margin-top: 70px;
} */
section {
scroll-margin-top: 70px;
}
/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
.navbar > ul > li {
white-space: nowrap;
/* padding: 10px 0 10px 28px; */
}
.navbar a,
.navbar a:focus {
.navbar {
width: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
transition: 0.3s;
position: relative;
align-items: center;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
.navbar .nav-1 {
display: flex;
}
.navbar ul {
margin: 0;
padding: 0;
.navbar .nav-2 ul {
display: flex;
list-style: none;
align-items: center;
padding-top: 15px;
}
.navbar li {
position: relative;
/* Ocultar por defecto */
.side-menu {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 50%;
margin-top: 100px;
background-color: #ffffff;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
transition: left 0.3s ease;
z-index: 999;
padding: 0 30px;
display: flex;
align-items: center;
}
@media (min-width: 450px) {
.navbar {
padding: 0;
}
/* .navbar>ul>li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -6px;
left: 0;
background-color: var(--color-secondary);
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
} */
.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before {
visibility: visible;
width: 100%;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #fff;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 28px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
}
/* Mostrar menú */
.side-menu.open {
left: 0;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
color: #006a5d;
}
.side-menu .side-menu-content {
list-style: none;
padding: 20px;
border: 2px solid #caf024;
border-radius: 20px;
text-align: end;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.side-menu .side-menu-content .side-options {
border-bottom: 2px solid #caf024;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
color: var(--color-secondary);
}
.side-menu .side-menu-content .side-options a {
color: #3165f5;
font-size: 1.5rem;
font-weight: 500;
text-decoration: none;
padding-bottom: 5px;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
/* Estilo para el botón hamburguesa */
.hamburger-menu {
cursor: pointer;
z-index: 1000;
margin-top: 5px;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.hamburger-menu img {
width: 80px;
height: 80px;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
/* ===== Tablets ===== */
@media (max-width: 991px) and (min-width: 768px) {
.side-menu {
height: 40%;
}
}
@media (min-width: 450px) and (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
/* ===== Móviles ===== */
@media (max-width: 767px) {
.navbar .logo img {
display: none;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
.side-menu {
margin-top: 85px;
}
}
@media (min-width: 450px) {
.mobile-nav-show,
.mobile-nav-hide {
display: none;
.side-menu .side-menu-content .side-options a {
font-size: 1.4rem;
font-weight: 500;
}
}
/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 451px) {
/* .navbar {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 400px;
bottom: 0;
transition: 0.3s;
z-index: 9997;
} */
/* .navbar ul {
position: absolute;
inset: 0;
padding: 50px 0 10px 0;
margin: 0;
background: rgba(0, 131, 116, 0.9);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
} */
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #fff;
}
.navbar .getstarted,
.navbar .getstarted:focus {
background: var(--color-primary);
padding: 8px 20px;
border-radius: 4px;
margin: 15px;
color: #fff;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
background: rgba(0, 131, 116, 0.8);
}
.navbar .dropdown ul,
.navbar .dropdown .dropdown ul {
position: static;
display: none;
padding: 10px 0;
margin: 10px 20px;
transition: all 0.5s ease-in-out;
background-color: #007466;
border: 1px solid #006459;
}
.navbar .dropdown > .dropdown-active,
.navbar .dropdown .dropdown > .dropdown-active {
display: block;
}
.mobile-nav-show {
color: rgba(255, 255, 255, 0.6);
font-size: 28px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
z-index: 9999;
margin-right: 10px;
}
.mobile-nav-hide {
color: #fff;
font-size: 32px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
position: fixed;
right: 20px;
top: 20px;
z-index: 9999;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .navbar {
right: 0;
}
@media (min-width: 450px) and (max-width: 1366px) {
}
.mobile-nav-active .navbar:before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 106, 93, 0.8);
z-index: 9996;
}
@media (min-width: 450px) {
}
/*--------------------------------------------------------------
......@@ -670,7 +504,7 @@ section {
}
.about .play-btn:before {
content: "";
content: '';
position: absolute;
width: 120px;
height: 120px;
......@@ -688,7 +522,7 @@ section {
}
.about .play-btn:after {
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;
......@@ -703,7 +537,7 @@ section {
}
.about .play-btn:hover:before {
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;
......@@ -814,7 +648,7 @@ section {
--------------------------------------------------------------*/
.call-to-action .container {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/cta-bg.jpg") center center;
url('../img/cta-bg.jpg') center center;
background-size: cover;
padding: 100px 60px;
border-radius: 15px;
......@@ -848,7 +682,7 @@ section {
}
.call-to-action .play-btn:before {
content: "";
content: '';
position: absolute;
width: 120px;
height: 120px;
......@@ -866,7 +700,7 @@ section {
}
.call-to-action .play-btn:after {
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;
......@@ -881,7 +715,7 @@ section {
}
.call-to-action .play-btn:hover:before {
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;
......@@ -964,7 +798,7 @@ section {
.services .service-item .icon:before {
position: absolute;
content: "";
content: '';
height: 100%;
width: 100%;
background: #eeeeee;
......@@ -1263,7 +1097,7 @@ section {
}
.portfolio-details .portfolio-info h3:after {
content: "";
content: '';
position: absolute;
display: block;
width: 50px;
......@@ -1485,7 +1319,7 @@ section {
.pricing .icon::before {
position: absolute;
content: "";
content: '';
height: 86px;
width: 86px;
border-radius: 50%;
......@@ -1496,7 +1330,7 @@ section {
.pricing .icon::after {
position: absolute;
content: "";
content: '';
height: 102px;
width: 102px;
border-radius: 50%;
......@@ -1816,7 +1650,7 @@ section {
}
.contact .php-email-form .loading:before {
content: "";
content: '';
display: inline-block;
border-radius: 50%;
width: 24px;
......@@ -1834,14 +1668,14 @@ section {
font-size: 14px;
}
.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form input[type='text'],
.contact .php-email-form input[type='email'],
.contact .php-email-form textarea {
padding: 12px 15px;
}
.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form input[type='text']:focus,
.contact .php-email-form input[type='email']:focus,
.contact .php-email-form textarea:focus {
border-color: var(--color-primary);
}
......@@ -1850,7 +1684,7 @@ section {
padding: 10px 12px;
}
.contact .php-email-form button[type="submit"] {
.contact .php-email-form button[type='submit'] {
background: var(--color-primary);
border: 0;
padding: 14px 45px;
......@@ -1859,7 +1693,7 @@ section {
border-radius: 50px;
}
.contact .php-email-form button[type="submit"]:hover {
.contact .php-email-form button[type='submit']:hover {
background: rgba(0, 131, 116, 0.8);
}
......@@ -1889,6 +1723,7 @@ section {
background: #ffffff85;
background-size: cover;
padding: 60px 0 0 0;
margin-top: 40px;
}
@media (max-width: 378px) {
......@@ -1979,6 +1814,10 @@ section {
.hero .btn-watch-video {
font-size: 14px;
}
#hero {
padding: 45px 0 0 0;
}
}
.hero .icon-boxes {
......@@ -1987,7 +1826,7 @@ section {
@media (min-width: 1200px) {
.hero .icon-boxes:before {
content: "";
content: '';
position: absolute;
bottom: 0;
left: 0;
......@@ -2189,7 +2028,7 @@ section {
}
.blog .blog-details .content blockquote:after {
content: "";
content: '';
position: absolute;
left: 0;
top: 0;
......@@ -2276,7 +2115,7 @@ section {
.blog .blog-details .meta-bottom .tags li + li::before {
padding-right: 6px;
color: var(--color-default);
content: ",";
content: ',';
}
.blog .blog-details .meta-bottom .share {
......@@ -2351,14 +2190,14 @@ section {
border-radius: 50px;
}
.blog .sidebar .search-form form input[type="text"] {
.blog .sidebar .search-form form input[type='text'] {
border: 0;
padding: 4px;
border-radius: 50px;
width: calc(100% - 60px);
}
.blog .sidebar .search-form form input[type="text"]:focus {
.blog .sidebar .search-form form input[type='text']:focus {
outline: none;
}
......@@ -2592,126 +2431,630 @@ section {
}
/*--------------------------------------------------------------
# Footer
# Section ello ganaron
--------------------------------------------------------------*/
.footer {
font-size: 14px;
background-color: var(--color-primary);
padding: 50px 0;
color: white;
#section-ganaron {
width: 100%;
padding: 0 15%;
display: flex;
}
.footer .footer-info .logo {
line-height: 0;
margin-bottom: 25px;
#section-ganaron .ganaron1 {
width: 50%;
}
.footer .footer-info .logo img {
max-height: 40px;
margin-right: 6px;
#section-ganaron .ganaron2 {
width: 50%;
}
.footer .footer-info .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
#section-ganaron .ganaron1 h1 {
color: #3366ff;
margin-top: 50px;
margin-bottom: 20px;
font-size: 3.5rem;
font-weight: bold;
font-family: var(--font-primary);
}
.footer .footer-info p {
font-size: 14px;
#section-ganaron .ganaron1 p {
color: #3366ff;
font-size: 1rem;
font-family: var(--font-secondary);
margin: 0 0 30px 0;
padding: 0;
font-style: unset;
}
#section-ganaron .ganaron-anuncios {
margin: 0 0 70px 0;
display: flex;
width: 100%;
justify-content: space-between;
}
#section-ganaron .ganaron-anuncios img {
width: 200px;
}
#section-ganaron .ganaron2 {
display: flex;
justify-content: center;
align-items: center;
}
#section-ganaron .ganaron2 .card-testimonial {
width: 70%;
background-color: #3366ff;
border-radius: 30px;
overflow: hidden;
}
#section-ganaron .ganaron2 .card-testimonial .card-video {
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
}
#section-ganaron .ganaron2 .card-testimonial video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: center 15%;
}
#section-ganaron .ganaron2 .card-testimonial .card-text {
width: 100%;
}
#section-ganaron .ganaron2 .card-testimonial .card-text p {
color: #caf024;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
padding: 15px 0 6px 0;
}
/* ===== Tablets ===== */
@media (max-width: 991px) and (min-width: 768px) {
#section-ganaron {
padding: 0 5%;
justify-content: space-between;
gap: 0;
}
#section-ganaron .ganaron1 {
width: 60%;
}
#section-ganaron .ganaron1 h1 {
font-size: 3rem;
}
#section-ganaron .ganaron-anuncios img {
width: 230px;
}
#section-ganaron .ganaron2 {
width: 40%;
}
}
/* ===== Móviles ===== */
@media (max-width: 767px) {
#section-ganaron {
display: block;
padding: 0 0;
}
#section-ganaron .ganaron1 {
width: 100%;
padding: 0 10%;
}
#section-ganaron .ganaron1 h1 {
font-size: 2rem;
}
#section-ganaron .ganaron1 p {
font-size: 1rem;
}
#section-ganaron .ganaron2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 40px 0;
}
#section-ganaron .ganaron-anuncios {
display: block;
}
#section-ganaron .ganaron-anuncios img {
width: 100%;
}
}
/*--------------------------------------------------------------
# Section faqs
--------------------------------------------------------------*/
#section-faq {
display: flex;
width: 100%;
}
#section-faq .tutoriales-s {
width: 40%;
padding-top: 20px;
background-color: #dbff4c;
}
#section-faq .tutoriales-s h1 {
color: #3366ff;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
font-family: var(--font-primary);
}
.footer .social-links a {
#section-faq .tutoriales-s .tutoriales-video {
width: 100%;
padding: 0 20%;
display: flex;
margin: 30px 0;
justify-content: space-between;
}
#section-faq .tutoriales-s .tutoriales-video div {
width: 40%;
}
#section-faq .faq-s {
width: 60%;
padding-top: 20px;
background-color: #3366ff;
padding: 0px 5%;
}
#section-faq .faq-s .faq-s-1 {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
margin-right: 10px;
transition: 0.3s;
justify-content: space-between;
padding-top: 20px;
background-color: #2d64ff;
}
.footer .social-links a:hover {
color: #fff;
border-color: #fff;
#section-faq .faq-s .faq-s-1 .divider {
width: 1.5px;
height: 60px;
background-color: #dbff4c;
}
.footer h4 {
font-size: 16px;
#section-faq .faq-s .faq-s-1 button {
background-color: transparent;
border: 1.8px solid #dbff4c;
color: #dbff4c;
font-weight: bold;
position: relative;
padding-bottom: 12px;
font-size: 1.5rem;
padding: 2px 10px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.footer .footer-links {
margin-bottom: 30px;
#section-faq .faq-s .faq-s-1 button:hover {
background-color: #d4ff4f;
color: #2d64ff;
}
.footer .footer-links ul {
list-style: none;
#section-faq .faq-s .faq-s-title {
color: #dbff4c;
font-size: 3rem;
font-weight: bold;
font-family: var(--font-primary);
margin: 0;
}
#section-faq .faq-s .faq-s-2 {
width: 100%;
margin-top: 30px;
margin-bottom: 20px;
border: 3px solid #d4ff4f;
padding: 0;
}
#section-faq .faq-s .faq-s-2 div {
padding: 10px 20px;
}
#section-faq .faq-s .faq-s-2 div:first-child {
border-bottom: 3px solid #d4ff4f;
}
#section-faq .faq-s .faq-s-2 div:nth-child(2) {
border-bottom: 3px solid #d4ff4f;
}
#section-faq .faq-s .faq-s-2 h1 {
font-size: 1.5rem;
font-weight: bold;
color: white;
margin: 0;
}
.footer .footer-links ul i {
padding-right: 2px;
color: rgba(0, 131, 116, 0.8);
font-size: 12px;
line-height: 0;
#section-faq .faq-s .faq-s-2 p {
font-size: 0.9rem;
color: white;
margin: 0;
}
/* ===== Tablets ===== */
@media (max-width: 991px) {
#section-faq {
display: block;
}
#section-faq .tutoriales-s {
width: 100%;
padding-bottom: 50px;
padding-top: 30px;
}
#section-faq .faq-s {
width: 100%;
padding-bottom: 50px;
padding-top: 30px;
}
#section-faq .faq-s .faq-s-1 .divider {
display: none;
}
}
/*--------------------------------------------------------------
# Section descubre
--------------------------------------------------------------*/
#section-descubre {
display: flex;
width: 100%;
}
.footer .footer-links ul li {
#section-descubre .descubre-1 {
width: 40%;
padding: 120px 60px;
}
#section-descubre .descubre-1 .descubre-card {
display: flex;
margin-bottom: 80px;
}
#section-descubre .descubre-1 .descubre-card div:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: end;
margin-left: 15px;
}
#section-descubre .descubre-1 .descubre-card p {
margin: 0;
line-height: 100%;
color: #2d64ff;
font-weight: bold;
font-size: 1.2rem;
}
#section-descubre .descubre-1 .descubre-card button {
background-color: transparent;
border: none;
color: #2d64ff;
text-align: end;
}
#section-descubre .descubre-1 .descubre-card button:hover {
color: #d4ff4f;
}
#section-descubre .descubre-1 img {
width: 150px;
height: 150px;
}
#section-descubre .descubre-2 {
width: 60%;
}
#section-descubre .descubre-2 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
display: block;
}
/* ===== Tablets ===== */
@media (max-width: 991px) and (min-width: 768px) {
#section-descubre {
display: block;
width: 100%;
}
#section-descubre .descubre-1 {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding-top: 60px;
padding-bottom: 0;
}
#section-descubre .descubre-card {
width: 45%;
display: flex;
margin-bottom: 30px;
}
#section-descubre .descubre-card:nth-child(3) {
width: 50%;
justify-content: center;
}
#section-descubre .descubre-2 {
width: 100%;
}
}
/* ===== Móviles ===== */
@media (max-width: 767px) {
#section-descubre {
display: block;
width: 100%;
}
#section-descubre .descubre-1 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
padding: 40px 20px;
}
#section-descubre .descubre-card {
width: 100%;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
text-align: center;
}
#section-descubre .descubre-card div:nth-child(2) {
align-items: center;
margin-left: 0;
margin-top: 10px;
}
#section-descubre .descubre-card button {
text-align: center;
}
#section-descubre .descubre-2 {
width: 100%;
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
font-size: 14px;
background-color: var(--color-primary);
padding: 30px 50px 0 50px;
color: white;
}
.footer .logo img {
width: 110px;
}
.footer .footer2 {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 10px;
border-bottom: 1px solid white;
padding: 10px 0;
}
.footer .footer2 .links-text {
margin-left: 12%;
}
.footer .footer2 li {
list-style: none;
}
.footer .footer2 a {
color: white;
margin-left: 20px;
font-size: 1.5rem;
font-weight: 500;
}
.footer .footer2 .links-social a {
margin-left: 10px;
font-size: 1.5rem;
padding: 2px 7px;
background-color: white;
color: var(--color-primary);
border-radius: 50%;
margin-bottom: 10px;
}
.footer .footer3 {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 10px;
}
.footer .footer-links ul li:first-child {
padding-top: 0;
/* ===== Tablets ===== */
@media (max-width: 991px) and (min-width: 768px) {
.footer .footer2 a {
font-size: 1.2rem;
}
}
.footer .footer-links ul a {
color: rgba(255, 255, 255, 0.7);
transition: 0.3s;
display: inline-block;
line-height: 1;
/* ===== Móviles ===== */
@media (max-width: 767px) {
.footer {
padding: 30px 20px;
}
.footer .footer1 {
width: 30%;
padding-left: 0;
}
.footer .logo img {
margin-bottom: 20px;
}
.footer .footer2 {
display: block;
}
.footer .footer2 .links-text {
margin-left: 0;
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.footer .footer2 .links-social {
display: flex;
justify-content: space-between;
}
.footer .footer2 a {
font-size: 1.2rem;
font-weight: 500;
}
}
.footer .footer-links ul a:hover {
color: #fff;
/*--------------------------------------------------------------
# Pagina Preguntas frecuentes
--------------------------------------------------------------*/
#preguntas-frecuentes {
width: 100%;
display: flex;
margin-top: 100px;
}
.footer .footer-contact p {
line-height: 26px;
#preguntas-frecuentes .preguntas-frecuentes-1 {
width: 30%;
background-color: #ccff00;
padding: 50px 20px;
}
.footer .copyright {
text-align: center;
#preguntas-frecuentes .preguntas-frecuentes-1 h1 {
color: #2d64ff;
font-size: 2rem;
font-weight: bold;
margin: 0;
}
.footer .credits {
padding-top: 4px;
text-align: center;
font-size: 13px;
#preguntas-frecuentes .preguntas-frecuentes-1 p {
color: #2d64ff;
font-size: 1.4rem;
margin: 0;
}
.footer .credits a {
color: #fff;
#preguntas-frecuentes .preguntas-frecuentes-2 {
width: 70%;
padding: 50px;
display: flex;
flex-direction: column;
gap: 15px;
}
#section-testimonial .title{
background-color: #7d33e2;
color: white;
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card {
width: 100%;
border: 2px solid #2d64ff;
border-radius: 10px;
padding: 10px 30px;
}
#section-testimonial .title h2{
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card.open {
background-color: #2d64ff;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card span {
color: white;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card div {
display: flex;
justify-content: space-between;
align-items: center;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card h1,
i {
font-size: 1.4rem;
font-weight: bold;
}
\ No newline at end of file
color: #2d64ff;
margin: 0;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card h1.open {
color: white;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .icon-down {
display: block;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .icon-down.close {
display: none;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .icon-up {
display: none;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .icon-up.open {
display: block;
color: white;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .content-card {
display: none;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card .content-card.open {
display: block;
}
/* ===== Móviles ===== */
@media (max-width: 767px) {
#preguntas-frecuentes {
display: block;
width: 100%;
margin-top: 85px;
}
#preguntas-frecuentes .preguntas-frecuentes-1 {
width: 100%;
padding: 25px 20px;
}
#preguntas-frecuentes .preguntas-frecuentes-2 {
width: 100%;
padding: 20px;
}
}
faq.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Universidad CNCI | GPI</title>
<meta content="" name="description" />
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="assets/img/icono.png" rel="icon" />
<link href="assets/img/icono.png" rel="apple-touch-icon" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<!-- Vendor CSS Files -->
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet" />
</head>
<body>
<header id="header" class="header d-flex align-items-center">
<nav id="navbar" class="navbar">
<div class="nav-1">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/nuevologo.webp" alt="" />
</a>
</div>
<div class="nav-2">
<ul>
<li>
<a href="https://promofenix.com/register" class="btn-register"
>Únete</a
>
</li>
<li class="ps-3 ps-md-0">
<a href="https://promofenix.com/login" class="btn-sesion">
<p>Iniciar sesión</p>
<i class="bi bi-person"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- .navbar -->
</header>
<!-- End Header -->
<main id="main">
<section id="preguntas-frecuentes">
<div class="preguntas-frecuentes-1">
<h1>Preguntas frecuentes</h1>
<p>¿Cómo podemos ayudarte?</p>
</div>
<div class="preguntas-frecuentes-2">
<div class="pf-card">
<div>
<h1 class="titleCard">¿De qué trata PromoFénix?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card"
>¡Se trata de recomendar a personas, como familiares, amigos o
conocidos, o incluso publicarlo en tus redes sociales! Aquellos
que estén interesados en estudiar necesitarán acceso a internet y
a una computadora. Y lo mejor es que puedes ofrecerles una beca
del 70%. <br />Cuando alguien esté interesado, solo necesitas sus
datos y los ingresas en el enlace de referidos
(https://promofenix.com/login). Después, un asesor de ventas se
pondrá en contacto con ellos para finalizar la inscripción.</span
>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cómo puedo empezar?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
¡Aquí te explico cómo podrás ganar dinero con nosotros:<br /><br />
1. *Publica en redes sociales* la publicación que te compartirá tu
asesor.<br />
2. *Contacta a tus interesados* y recopila sus datos: Nombre,
WhatsApp, Correo y Estado donde vive.<br />
3. *Ingresa esos datos en tu cuenta* de Promofénix en la sección
de "referidos".<br />
4. Un *asesor de ventas* contactará a tu interesado y le dará toda
la información detallada a tu recomendado (costos, revalidaciones,
horarios, precios, modalidades, etc.).<br />
5. Una vez que se inscriba, *¡recibirás tu pago!* 💳 (para poder
realizar el pago de tus comisiones es necesario que subas los
datos de tu tarjeta en tu cuenta de promotor).<br />
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Dónde están ubicados?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
Contamos con una amplia cobertura en todo el país mediante nuestra
modalidad virtual con apoyo presencial en más de 15 centros de
enlace y dos campus ubicados en Monterrey y Saltillo.<br />
Estés donde estés, estamos aquí para ofrecer educación de calidad
y oportunidades para el éxito académico.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cuáles son las comisiones?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
¡Aquí están las comisiones que puedes obtener con nosotros!
<br /><br />
Bachillerato $1,000.<br />
Licenciaturas$2,000.<br />
Maestrías $2,000.<br />
Diplomados$1,000.<br />
Lo genial es que ¡no hay un límite! ¡Con nosotros, tus ingresos no
tienen tope!
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard"
>¿Con que frecuencia me pagaran mis comisiones?</h1
>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
Una vez que hayas registrado los datos de tu referido en el sitio
web (Promofenix.com), un asesor de admisiones especializado se
encargará de finalizar el proceso de inscripción. En cuanto esto
suceda, recibirás tu comisión dependiendo del nivel en el que se
haya inscrito tu referido ☺️. Este proceso se completa en un lapso
de 72 horas hábiles desde que paga tu recomendado.<br /><br />
Recuerda que es *IMPORTANTE* que ingreses los datos de tu *TARJETA
BANCARIA* en tu cuenta de promotor para poder hacer el pago de
comisiones.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cuál es el método de pago?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
¡Recibe tu comisión de forma sencilla y rápida en tu tarjeta de
débito personal de cualquier banco (excepto Azteca, BanCoppel o
Mercado Pago, Oxxo)! Para esto es importante que subas los datos
de tu tarjeta en tu cuenta de promotor para poder realizar el pago
de tus comisiones.<br /><br />
Si no cuentas con una tarjeta, no te preocupes, nosotros te la
proporcionamos.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cómo puedo registrar a mi referido?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
Te explico como registrar a tu recomendado en tu cuenta cuando lo
tengas: <br /><br />
1. Ingresa a tu cuenta en https://promofenix.com/login con tu
número de teléfono y contraseña.<br />
2. Dirígete a "Referidos" en el menú izquierdo.<br />
3. Haz clic en "Agregar" y completa los datos de tu
recomendado.<br /><br />
¡Listo! Un asesor de ventas se comunicará con tu referido para
brindarle información. Si quieres que yo te ayude a registrar a
tus recomendados no dudes en escribirme.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cómo puedo perfilar a mi recomendado?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
Es importante que tus recomendados cuenten con estas
características para que se pueda tener una inscripción exitosa y
tú te puedas llevar tu comisión:<br /><br />
🟣Acceso a internet.<br />
🟣 Una computadora disponible.<br />
🟣 Poder pagar aproximadamente $1,200 a $1,600 al mes.<br />
🟣 Contar con su certificado de estudios del nivel anterior.
<br /><br />
Con esto, aumentarás las probabilidades de que se inscriban.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Puedo crear una página en Facebook?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
Claro, tienes la opción de crear una página. Sin embargo, es
importante que evites utilizar el nombre de la Universidad. En su
lugar, puedes ser creativo, por ejemplo, con "Promotor Educativo"
y en seguida tu nombre.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿En qué horario hay que recomendar?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
¡Gran noticia! Este trabajo te ofrece la libertad de hacerlo
cuando quieras y tengas tiempo libre. Es tu oportunidad para
trabajar desde donde estes, acomodar las cosas a tu ritmo y gozar
de un horario que se amolde a ti.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard"
>¿Hay límite de edad para ser PromoFénix?</h1
>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card">
No, no tenemos límite de edad. Un promotor fénix puede tener
cualquier edad solo necesitas contar con un número de celular.
</span>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard"
>¿Puedo recomendar si vivo fuera de Nuevo León?</h1
>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card"
>Claro, puedes recomendar desde cualquier parte de la República
Mexicana y sin necesidad de salir de casa.</span
>
</div>
<div class="pf-card">
<div>
<h1 class="titleCard">¿Cómo sabrán que es mi referido?</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span id="contentCard" class="content-card"
>¡Muy buena pregunta! Nosotros sabemos que es tu referido porque,
al registrarlo en tu cuenta de promotor, inmediatamente nos
aparece que viene de tu parte.</span
>
</div>
</div>
</section>
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="footer2">
<div class="footer-icon">
<a
href="https://www.cnci.edu.mx/"
target="_blank"
class="logo d-flex align-items-center"
>
<img src="assets/img/logo cnci.png" class="img-fluid" alt="" />
</a>
</div>
<div class="links-social d-flex">
<a
href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA"
target="_blank"
class="facebook"
><i class="bi bi-facebook"></i
></a>
<a
href="https://twitter.com/CNCIOficial?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
target="_blank"
class="twitter"
><i class="bi bi-twitter"></i
></a>
<a
href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA"
target="_blank"
class="instagram"
><i class="bi bi-instagram"></i
></a>
<a
href="https://api.whatsapp.com/send/?phone=5218182760690&text&type=phone_number&app_absent=0"
target="_blank"
class="whatsapp"
><i class="bi bi-whatsapp"></i
></a>
<a
href="https://mx.linkedin.com/company/universidad-cnci"
target="_blank"
class="linkedin"
><i class="bi bi-linkedin"></i
></a>
<a
href="https://www.youtube.com/c/UniversidadVirtualCNCIOficial"
target="_blank"
class="linkedin"
><i class="bi bi-youtube"></i
></a>
</div>
</div>
<div class="footer3">
<p>
&copy; Copyright <strong><span>Universidad CNCI</span></strong
>© 2023.
</p>
</div>
</footer>
<!-- End Footer -->
<!-- End Footer -->
<a
href="#"
class="scroll-top d-flex align-items-center justify-content-center"
><i class="bi bi-arrow-up-short"></i
></a>
<div id="preloader"></div>
<script>
fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json())
.then((data) => {
const faqsContainer = document.querySelector('.preguntas-frecuentes-2');
if (
faqsContainer &&
Array.isArray(data.data.faqs) &&
data.data.faqs.length > 0
) {
faqsContainer.innerHTML = ''; // Limpiar solo si vienen datos
const faqsOrdenadas = data.data.faqs
.filter((faq) => faq.status === true)
.sort((a, b) => a.id - b.id);
faqsOrdenadas.forEach((faq) => {
const pfCard = document.createElement('div');
pfCard.classList.add('pf-card');
const pregunta = faq.question || 'Sin título';
const respuesta = faq.answer
? faq.answer.replace(/\n/g, '<br>')
: 'Sin respuesta disponible';
pfCard.innerHTML = `
<div>
<h1 class="titleCard">${pregunta}</h1>
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
<i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span class="content-card">${respuesta}</span>
`;
faqsContainer.appendChild(pfCard);
});
}
// 🔁 Esta parte se ejecuta SIEMPRE (ya sea que vengan FAQs o se muestren los estáticos)
const toggles = document.querySelectorAll('.cardToggle');
toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) {
e.preventDefault();
const pfCard = this.closest('.pf-card');
const contentCard = pfCard.querySelector('.content-card');
const iconDown = pfCard.querySelector('.icon-down');
const iconUp = pfCard.querySelector('.icon-up');
const titleCard = pfCard.querySelector('.titleCard');
contentCard.classList.toggle('open');
iconDown.classList.toggle('close');
iconUp.classList.toggle('open');
pfCard.classList.toggle('open');
titleCard.classList.toggle('open');
});
});
})
.catch((error) => {
console.error('Error al obtener las FAQs:', error);
// 🔁 Aseguramos que los toggles funcionen incluso si hay error en la API
const toggles = document.querySelectorAll('.cardToggle');
toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) {
e.preventDefault();
const pfCard = this.closest('.pf-card');
const contentCard = pfCard.querySelector('.content-card');
const iconDown = pfCard.querySelector('.icon-down');
const iconUp = pfCard.querySelector('.icon-up');
const titleCard = pfCard.querySelector('.titleCard');
contentCard.classList.toggle('open');
iconDown.classList.toggle('close');
iconUp.classList.toggle('open');
pfCard.classList.toggle('open');
titleCard.classList.toggle('open');
});
});
});
</script>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
</script>
<script src="assets/js/main.js"></script>
<script>
(function () {
var options = {
//facebook: "101500205926683", // Facebook page ID
whatsapp: '+52 1 81 8276 0690', // WhatsApp number
//telegram: "Incursocnci", // Telegram bot username
//email: "contacto@incurso.mx ", // Email
//call: "55 3970 8975", // Call phone number
company_logo_url:
'https://pruebas.promofenix.com/home/assets/img/icono.png', // URL of company logo (png, jpg, gif)
greeting_message:
'Hola, Gracias por visitarnos. Elige una opción para obtener ayuda.', // Text of greeting message
call_to_action: '¿En qué podemos ayudarte?', // Call to action
button_color: '#48ff00', // Color of button
position: 'left', // Position may be 'right' or 'left'
order: 'facebook,whatsapp,telegram,email,call', // Order of buttons
ga: true, // Google Analytics enabled
branding: false, // Show branding string
mobile: true, // Mobile version enabled
desktop: true, // Desktop version enabled
greeting: true, // Greeting message enabled
activator_size: 56, // Button size
shift_vertical: 0, // Vertical position, px
shift_horizontal: 0, // Horizontal position, px
domain: 'promofenix.com', // site domain
key: 'q6iB0rBISbinJtbDXt0Ffw', // pro-widget key
};
var proto = document.location.protocol,
host = 'getbutton.io',
url = proto + '//static.' + host;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url + '/widget-send-button/js/init.js';
s.onload = function () {
WhWidgetSendButton.init(host, proto, options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Universidad CNCI | GPI</title>
<meta content="" name="description" />
<meta content="" name="keywords" />
<title>Universidad CNCI | GPI</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/icono.png" rel="icon" />
<link href="assets/img/icono.png" rel="apple-touch-icon" />
<!-- Favicons -->
<link href="assets/img/icono.png" rel="icon">
<link href="assets/img/icono.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet" />
</head>
<!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<header id="header" class="header d-flex align-items-center">
<div
class="container-fluid container-xl d-flex flex-wrap flex-md-nowrap justify-content-center justify-content-md-between align-items-center py-3 py-md-0">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/Logo Comunidad Promofenix.png" alt="">
</a>
<body>
<header id="header" class="header d-flex align-items-center">
<nav id="navbar" class="navbar">
<ul>
<li><a href="https://promofenix.com/register" class="btn-register">Regístrate</a></li>
<li class="ps-3 ps-md-0"><a href="https://promofenix.com/login" class="btn-sesion">
<p>Inicio de sesión</p><i class="bi bi-person"></i>
</a></li>
</ul>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="hero">
<div class="">
<img id="portada-img" src="assets/img/hero.png" class="img-fluid w-100" alt="">
</div>
</section>
<!-- End Hero Section -->
<main id="main">
<section id="section-one" class="p-0">
<div class="container-fluid p-0">
<div class="d-flex flex-wrap justify-content-center">
<img id="seccion1-img" src="assets/img/que es.png" class="img-fluid w-75" alt="imagen1">
<div class="nav-1">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/nuevologo.webp" alt="" />
</a>
</div>
<div class="nav-2">
<ul>
<li>
<a href="https://promofenix.com/register" class="btn-register"
>Únete</a
>
</li>
<li class="ps-3 ps-md-0">
<a href="https://promofenix.com/login" class="btn-sesion">
<p>Iniciar sesión</p>
<i class="bi bi-person"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- .navbar -->
</header>
<!-- End Header -->
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="hero">
<div class="">
<img
id="portada-img"
src="assets/img/hero.png"
class="img-fluid w-100"
alt=""
/>
</div>
</section>
<!-- End Hero Section -->
<section id="section-secundary" class="p-0">
<div class="position-relative">
<div class="row gy-5" data-aos="fade-in">
<img id="seccion2-img" src="assets/img/todito.png" class="img-fluid w-100" alt="imagen2">
<main id="main">
<section id="section-one" class="p-0">
<div class="container-fluid p-0">
<div class="d-flex flex-wrap justify-content-center">
<img
id="seccion1-img"
src="assets/img/que es.png"
class="img-fluid w-100"
alt="imagen1"
/>
</div>
</div>
</div>
</section>
</section>
<section id="section-testimonial" class="p-0">
<div class="text-center py-4 mb-4 title">
<h2>Experencias PROMOFÉNIX</h2>
<P>¡Conviértete hoy en promotor!</P>
</div>
<div class="container">
<div class="row gy-5">
<div class="col-lg-3 ">
<div class="testimonial-item" data-aos="fade-up">
<video src="assets/img/testimonials/GPI video 1.mp4" controls class="img-fluid"
poster="assets/img/testimonials/gabriela torres.jpg"></video>
<section id="section-secundary" class="p-0">
<div class="position-relative">
<div class="row gy-5" data-aos="fade-in">
<img
id="seccion2-img"
src="assets/img/todito.png"
class="img-fluid w-100"
alt="imagen2"
/>
</div>
</div>
</section>
<section id="section-ganaron">
<div class="ganaron1">
<h1>Ellos ya ganarón</h1>
<p>
Descubre las historias de quienes
<strong>ya están</strong> aprovechando
<strong>PROMOFÉNIX.</strong> Conoce cómo sus recomendaciones se han
convertido en <strong>ingresos adicionales</strong> y cómo tú
también puedes hacerlo.
</p>
<div class="ganaron-anuncios">
<img id="portada-img" src="assets/img/40.webp" alt="" />
<img id="portada-img" src="assets/img/39.webp" alt="" />
</div>
</div>
<div class="ganaron2">
<div class="card-testimonial">
<div class="card-video">
<video
src="assets/img/testimonials/GPI video 4.mp4"
controls
class="img-fluid"
id="video-testimonial"
poster="assets/img/testimonials/carlos banda.jpg"
></video>
</div>
<div class="card-text">
<p>¡Ve los testimoniales!</p>
</div>
</div>
</div>
</section>
<section id="section-faq">
<div class="tutoriales-s">
<h1>Tutoriales</h1>
<div class="tutoriales-video">
<div>
<video
src="assets/img/tutoriales/tutorial1.mp4"
controls
class="img-fluid"
id="video-tutorial1"
poster="assets/img/tutoriales/tutorial1.png"
></video>
</div>
<div>
<video
src="assets/img/tutoriales/tutorial2.mp4"
controls
class="img-fluid"
id="video-tutorial2"
poster="assets/img/tutoriales/tutorial2.png"
></video>
</div>
</div>
<div class="col-lg-3 ">
<div class="testimonial-item" data-aos="fade-up">
<video src="assets/img/testimonials/GPI video 2.mp4" controls class="img-fluid"
poster="assets/img/testimonials/ada zetina.jpg"></video>
</div>
<div class="faq-s">
<div class="faq-s-1">
<h1 class="faq-s-title">Preguntas frecuentes</h1>
<div class="divider"></div>
<a href="faq.html">
<button>Leer más</button>
</a>
</div>
<div class="faq-s-2">
<div class="faq-s-table">
<h1>¿De qué trata PromoFénix?</h1>
<p>
¡Se trata de recomendar a personas, como familiares, amigos o
conocidos, o incluso publicarlo en tus redes sociales! Aquellos
que estén interesados en estudiar necesitarán acceso a internet
y a una computadora.
</p>
</div>
<div>
<h1>¿Cómo puedo empezar?</h1>
<p>
1.Publica en redes sociales. 2.Contacta a tus interesados. 3.
Ingresa esos datos en tu cuenta de Promofénix en la sección de
"referidos" 4. Un asesor de ventas contactará a tu interesado.
5. Una vez que se inscriba, ¡recibirás tu pago!
</p>
</div>
<div>
<h1>¿Dónde están ubicados?</h1>
<p>
Contamos con una amplia cobertura en todo el país mediante
nuestra modalidad virtual con apoyo presencial en más de 15
centros de enlace y dos campus ubicados en Monterrey y Saltillo.
</p>
</div>
</div>
</div>
</section>
<section id="section-descubre">
<div class="descubre-1">
<div class="descubre-card">
<div>
<img src="assets/img/4.webp" alt="" />
</div>
<div>
<p>
Bienvenido a PROMOFÉNIX: Gana Comisiones Recomendando la
Universidad CNCI
</p>
</div>
</div>
<div class="col-lg-3 ">
<div class="testimonial-item" data-aos="fade-up">
<video src="assets/img/testimonials/GPI video 3.mp4" controls class="img-fluid"
poster="assets/img/testimonials/portada luis balleza.jpg"></video>
<div class="descubre-card">
<div>
<img src="assets/img/2.webp" alt="" />
</div>
<div>
<p> Conoce el programa de recompensas de bonificaciones </p>
</div>
</div>
<div class="col-lg-3 ">
<div class="testimonial-item" data-aos="fade-up">
<video src="assets/img/testimonials/GPI video 4.mp4" controls class="img-fluid"
poster="assets/img/testimonials/carlos banda.jpg"></video>
<div class="descubre-card">
<div>
<img src="assets/img/3.webp" alt="" />
</div>
<div>
<p>
Descubre cómo otros han transformado sus recomendaciones en
ingresos reales con PromoFénix
</p>
</div>
</div>
</div>
<div class="descubre-2">
<img src="assets/img/img115.jpg" alt="imagen-descubre" />
</div>
</section>
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="footer2">
<div class="footer-icon">
<a
href="https://www.cnci.edu.mx/"
target="_blank"
class="logo d-flex align-items-center"
>
<img src="assets/img/logo cnci.png" class="img-fluid" alt="" />
</a>
</div>
<div class="links-social d-flex">
<a
href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA"
target="_blank"
class="facebook"
><i class="bi bi-facebook"></i
></a>
<a
href="https://twitter.com/CNCIOficial?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
target="_blank"
class="twitter"
><i class="bi bi-twitter"></i
></a>
<a
href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA"
target="_blank"
class="instagram"
><i class="bi bi-instagram"></i
></a>
<a
href="https://api.whatsapp.com/send/?phone=5218182760690&text&type=phone_number&app_absent=0"
target="_blank"
class="whatsapp"
><i class="bi bi-whatsapp"></i
></a>
<a
href="https://mx.linkedin.com/company/universidad-cnci"
target="_blank"
class="linkedin"
><i class="bi bi-linkedin"></i
></a>
<a
href="https://www.youtube.com/c/UniversidadVirtualCNCIOficial"
target="_blank"
class="linkedin"
><i class="bi bi-youtube"></i
></a>
</div>
</div>
<div class="footer3">
<p>
&copy; Copyright <strong><span>Universidad CNCI</span></strong
>© 2023.
</p>
</div>
</footer>
<!-- End Footer -->
<!-- End Footer -->
</main><!-- End #main -->
<a
href="#"
class="scroll-top d-flex align-items-center justify-content-center"
><i class="bi bi-arrow-up-short"></i
></a>
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div id="preloader"></div>
<div class="container">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-info">
<a href="https://www.cnci.edu.mx/" target="_blank" class="logo d-flex align-items-center">
<img src="assets/img/logo cnci.png" class="img-fluid" alt="">
</a>
<div class="social-links d-flex mt-4">
<a href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA" target="_blank" class="facebook"><i
class="bi bi-facebook"></i></a>
<a href="https://twitter.com/CNCIOficial?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
target="_blank" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="https://www.facebook.com/UniversidadCNCIOficial/?locale=es_LA" target="_blank" class="instagram"><i
class="bi bi-instagram"></i></a>
<a href="https://mx.linkedin.com/company/universidad-cnci" target="_blank" class="linkedin"><i
class="bi bi-linkedin"></i></a>
<a href="https://www.youtube.com/c/UniversidadVirtualCNCIOficial" target="_blank" class="linkedin"><i
class="bi bi-youtube"></i></a>
</div>
</div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<div class="col-lg-2 col-6 footer-links">
<h4>Inicio</h4>
<ul>
<li><a href="https://promofenix.com/register">Registro Promofenix</a></li>
<li><a href="https://promofenix.com/Student">Registro recomendado</a></li>
</ul>
</div>
<!-- Template Main JS File -->
<script>
fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json())
.then((data) => {
// ✅ Validación segura para cada sección
<div class="col-lg-2 col-6 footer-links">
<h4>Menu</h4>
<ul>
<li><a href="https://promofenix.com/register">Registro</a></li>
</ul>
</div>
const portadaImg = document.getElementById('portada-img');
if (data.data.portada?.image_path) {
portadaImg.src = data.data.portada.image_path;
}
</div>
</div>
const seccion1Img = document.getElementById('seccion1-img');
if (data.data.seccion1?.image_path) {
seccion1Img.src = data.data.seccion1.image_path;
}
<div class="container mt-4">
<div class="d-flex justify-content-between flex-wrap">
<div class="copyright">
&copy; Copyright <strong><span>Universidad CNCI</span></strong>© 2023.
</div>
<div class="credits">
All Rights Reserved | <a href="">Terms and Conditions</a> | <a href="">Privacy Policy</a>
</div>
</div>
</div>
</footer><!-- End Footer -->
<!-- End Footer -->
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script>
// Realizamos la petición a la API usando fetch
fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then(response => response.json())
.then(data => {
// Actualizamos las imágenes dinámicamente
document.getElementById('portada-img').src = data.data.portada.image_path;
document.getElementById('seccion1-img').src = data.data.seccion1.image_path;
document.getElementById('seccion2-img').src = data.data.seccion2.image_path;
})
.catch(error => {
console.error('Error al obtener los datos de la API:', error);
});
</script>
<script src="assets/js/main.js"></script>
<script>
(function() {
var options = {
//facebook: "101500205926683", // Facebook page ID
whatsapp: '+52 1 81 8276 0690', // WhatsApp number
//telegram: "Incursocnci", // Telegram bot username
//email: "contacto@incurso.mx ", // Email
//call: "55 3970 8975", // Call phone number
company_logo_url: 'https://pruebas.promofenix.com/home/assets/img/icono.png', // URL of company logo (png, jpg, gif)
greeting_message: 'Hola, Gracias por visitarnos. Elige una opción para obtener ayuda.', // Text of greeting message
call_to_action: '¿En qué podemos ayudarte?', // Call to action
button_color: '#48ff00', // Color of button
position: 'left', // Position may be 'right' or 'left'
order: 'facebook,whatsapp,telegram,email,call', // Order of buttons
ga: true, // Google Analytics enabled
branding: false, // Show branding string
mobile: true, // Mobile version enabled
desktop: true, // Desktop version enabled
greeting: true, // Greeting message enabled
activator_size: 56, // Button size
shift_vertical: 0, // Vertical position, px
shift_horizontal: 0, // Horizontal position, px
domain: 'promofenix.com', // site domain
key: 'q6iB0rBISbinJtbDXt0Ffw' // pro-widget key
};
var proto = document.location.protocol,
host = 'getbutton.io',
url = proto + '//static.' + host;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url + '/widget-send-button/js/init.js';
s.onload = function() {
WhWidgetSendButton.init(host, proto, options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
</body>
const seccion2Img = document.getElementById('seccion2-img');
if (data.data.seccion2?.image_path) {
seccion2Img.src = data.data.seccion2.image_path;
}
const videoTestimonial = document.getElementById('video-testimonial');
if (data.data.videotestimonio?.image_path) {
videoTestimonial.src = data.data.videotestimonio.image_path;
}
if (data.data.testimonio?.image_path) {
videoTestimonial.poster = data.data.testimonio.image_path;
}
const videoTutorial1 = document.getElementById('video-tutorial1');
if (data.data.videotutorial1?.image_path) {
videoTutorial1.src = data.data.videotutorial1.image_path;
}
if (data.data.tutorial1?.image_path) {
videoTutorial1.poster = data.data.tutorial1.image_path;
}
const videoTutorial2 = document.getElementById('video-tutorial2');
if (data.data.videotutorial2?.image_path) {
videoTutorial2.src = data.data.videotutorial2.image_path;
}
if (data.data.tutorial2?.image_path) {
videoTutorial2.poster = data.data.tutorial2.image_path;
}
// ✅ Mostrar FAQs si existen
const faqsContainer = document.querySelector('.faq-s-2');
if (Array.isArray(data.data.faqs) && data.data.faqs.length > 0) {
faqsContainer.innerHTML = '';
const faqs = data.data.faqs.slice(0, 3);
faqs.forEach((faq) => {
const div = document.createElement('div');
div.classList.add('faq-s-table');
const h1 = document.createElement('h1');
h1.textContent = faq.question || 'Sin título';
const p = document.createElement('p');
const respuestaCorta =
faq.answer && faq.answer.length > 240
? faq.answer.slice(0, 240) + '...'
: faq.answer || 'Sin respuesta';
p.textContent = respuestaCorta;
div.appendChild(h1);
div.appendChild(p);
faqsContainer.appendChild(div);
});
}
})
.catch((error) => {
console.error('Error al obtener los datos de la API:', error);
});
</script>
<script src="assets/js/main.js"></script>
<script>
(function () {
var options = {
//facebook: "101500205926683", // Facebook page ID
whatsapp: '+52 1 81 8276 0690', // WhatsApp number
//telegram: "Incursocnci", // Telegram bot username
//email: "contacto@incurso.mx ", // Email
//call: "55 3970 8975", // Call phone number
company_logo_url:
'https://pruebas.promofenix.com/home/assets/img/icono.png', // URL of company logo (png, jpg, gif)
greeting_message:
'Hola, Gracias por visitarnos. Elige una opción para obtener ayuda.', // Text of greeting message
call_to_action: '¿En qué podemos ayudarte?', // Call to action
button_color: '#48ff00', // Color of button
position: 'left', // Position may be 'right' or 'left'
order: 'facebook,whatsapp,telegram,email,call', // Order of buttons
ga: true, // Google Analytics enabled
branding: false, // Show branding string
mobile: true, // Mobile version enabled
desktop: true, // Desktop version enabled
greeting: true, // Greeting message enabled
activator_size: 56, // Button size
shift_vertical: 0, // Vertical position, px
shift_horizontal: 0, // Horizontal position, px
domain: 'promofenix.com', // site domain
key: 'q6iB0rBISbinJtbDXt0Ffw', // pro-widget key
};
var proto = document.location.protocol,
host = 'getbutton.io',
url = proto + '//static.' + host;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url + '/widget-send-button/js/init.js';
s.onload = function () {
WhWidgetSendButton.init(host, proto, options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment