Skip to content

Diego Prieto / landingpage_gpi

Go to a project
Commit 69a57ab4 by Diego Prieto
Options

Merge branch 'CNCI-1288-rebranding-promofenix' into 'dev' 

feat: rebranding promofenix

See merge request !1
parents 0040a906 4d3eb2ce
Inline Side-by-side
Showing with 1571 additions and 502 deletions
assets/css/custom.css
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
#header .btn-sesion { #header .btn-sesion {
font-family: var(--font-primary); font-family: var(--font-primary);
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 20px;
letter-spacing: 1px;
display: inline-block; display: inline-block;
padding: 14px 30px; padding: 5px 20px;
border-radius: 50px; border-radius: 50px;
transition: 0.3s; transition: 0.3s;
color: #fff; color: #3366ff;
background: var(--color-primary); background: #bcef1a;
margin-left: 40px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1);
} }
...@@ -44,16 +44,9 @@ ...@@ -44,16 +44,9 @@
#header .btn-register { #header .btn-register {
font-family: var(--font-primary); font-family: var(--font-primary);
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 1.8rem;
letter-spacing: 1px;
display: inline-block;
padding: 14px 30px;
border-radius: 50px;
transition: 0.3s; transition: 0.3s;
color: var(--color-primary); color: white;
background: var(--color-secondary);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1);
} }
#header .btn-register:hover { #header .btn-register:hover {
...@@ -86,8 +79,6 @@ ...@@ -86,8 +79,6 @@
#header .btn-sesion i { #header .btn-sesion i {
display: block; display: block;
} }
} }
#section-secundary { #section-secundary {
......
assets/css/main.css
/* Fonts */ /* Fonts */
:root { :root {
--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, --font-default: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-primary: "Montserrat", sans-serif; --font-primary: 'Montserrat', sans-serif;
--font-secondary: "Poppins", sans-serif; --font-secondary: 'Poppins', sans-serif;
} }
/* Colors */ /* Colors */
...@@ -51,7 +51,7 @@ h6 { ...@@ -51,7 +51,7 @@ h6 {
# Sections & Section Header # Sections & Section Header
--------------------------------------------------------------*/ --------------------------------------------------------------*/
section { section {
padding: 60px 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
...@@ -73,7 +73,7 @@ section { ...@@ -73,7 +73,7 @@ section {
} }
.section-header h2:after { .section-header h2:after {
content: ""; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 50px; width: 50px;
...@@ -144,7 +144,7 @@ section { ...@@ -144,7 +144,7 @@ section {
display: inline-block; display: inline-block;
padding-right: 10px; padding-right: 10px;
color: var(--color-secondary); color: var(--color-secondary);
content: "/"; content: '/';
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
...@@ -194,7 +194,7 @@ section { ...@@ -194,7 +194,7 @@ section {
} }
#preloader:before { #preloader:before {
content: ""; content: '';
position: fixed; position: fixed;
top: calc(50% - 30px); top: calc(50% - 30px);
left: calc(50% - 30px); left: calc(50% - 30px);
...@@ -281,15 +281,14 @@ section { ...@@ -281,15 +281,14 @@ section {
.header { .header {
transition: all 0.5s; transition: all 0.5s;
z-index: 997; z-index: 997;
height: 90px; height: 100px;
background-color: var(--color-primary); background-color: #3366ff;
} }
@media (max-width: 417px) { @media (max-width: 417px) {
.header { .header {
height: auto; height: auto;
} }
} }
.header.sticked { .header.sticked {
...@@ -297,13 +296,16 @@ section { ...@@ -297,13 +296,16 @@ section {
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
min-height: 70px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
} }
.header .logo img { .header .logo1 img {
max-height: 60px; max-height: 60px;
margin-right: 6px; }
.header .logo img {
max-height: 95px;
margin-left: 15px;
} }
.header .logo h1 { .header .logo h1 {
...@@ -323,281 +325,113 @@ section { ...@@ -323,281 +325,113 @@ section {
margin-top: 70px; margin-top: 70px;
} */ } */
section {
scroll-margin-top: 70px;
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Desktop Navigation # Desktop Navigation
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.navbar > ul > li {
white-space: nowrap;
/* padding: 10px 0 10px 28px; */
}
.navbar a, .navbar {
.navbar a:focus { width: 100%;
padding: 0 30px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 3px; align-items: center;
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;
} }
.navbar a i, .navbar .nav-1 {
.navbar a:focus i { display: flex;
font-size: 12px;
line-height: 0;
margin-left: 5px;
} }
.navbar ul { .navbar .nav-2 ul {
margin: 0;
padding: 0;
display: flex; display: flex;
list-style: none; list-style: none;
align-items: center; padding-top: 15px;
} }
.navbar li { /* Ocultar por defecto */
position: relative; .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) { /* Mostrar menú */
.navbar { .side-menu.open {
padding: 0;
}
/* .navbar>ul>li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -6px;
left: 0; 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;
}
.navbar .dropdown ul a { .side-menu .side-menu-content {
padding: 10px 20px; list-style: none;
font-size: 15px; padding: 20px;
text-transform: none; border: 2px solid #caf024;
font-weight: 600; border-radius: 20px;
color: #006a5d; text-align: end;
} }
.navbar .dropdown ul a i { .side-menu .side-menu-content .side-options {
font-size: 12px; border-bottom: 2px solid #caf024;
} }
.navbar .dropdown ul a:hover, .side-menu .side-menu-content .side-options a {
.navbar .dropdown ul .active:hover, color: #3165f5;
.navbar .dropdown ul li:hover > a { font-size: 1.5rem;
color: var(--color-secondary); font-weight: 500;
} text-decoration: none;
padding-bottom: 5px;
}
.navbar .dropdown:hover > ul { /* Estilo para el botón hamburguesa */
opacity: 1; .hamburger-menu {
top: 100%; cursor: pointer;
visibility: visible; z-index: 1000;
} margin-top: 5px;
}
.navbar .dropdown .dropdown ul { .hamburger-menu img {
top: 0; width: 80px;
left: calc(100% - 30px); height: 80px;
visibility: hidden; }
}
.navbar .dropdown .dropdown:hover > ul { /* ===== Tablets ===== */
opacity: 1; @media (max-width: 991px) and (min-width: 768px) {
top: 0; .side-menu {
left: 100%; height: 40%;
visibility: visible;
} }
} }
@media (min-width: 450px) and (max-width: 1366px) { /* ===== Móviles ===== */
.navbar .dropdown .dropdown ul { @media (max-width: 767px) {
left: -90%; .navbar .logo img {
display: none;
} }
.navbar .dropdown .dropdown:hover > ul { .side-menu {
left: -100%; margin-top: 85px;
} }
}
@media (min-width: 450px) { .side-menu .side-menu-content .side-options a {
.mobile-nav-show, font-size: 1.4rem;
.mobile-nav-hide { font-weight: 500;
display: none;
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Mobile Navigation # 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 { @media (min-width: 450px) and (max-width: 1366px) {
overflow: hidden; }
}
.mobile-nav-active .navbar {
right: 0;
}
.mobile-nav-active .navbar:before { @media (min-width: 450px) {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 106, 93, 0.8);
z-index: 9996;
}
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
...@@ -670,7 +504,7 @@ section { ...@@ -670,7 +504,7 @@ section {
} }
.about .play-btn:before { .about .play-btn:before {
content: ""; content: '';
position: absolute; position: absolute;
width: 120px; width: 120px;
height: 120px; height: 120px;
...@@ -688,7 +522,7 @@ section { ...@@ -688,7 +522,7 @@ section {
} }
.about .play-btn:after { .about .play-btn:after {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -703,7 +537,7 @@ section { ...@@ -703,7 +537,7 @@ section {
} }
.about .play-btn:hover:before { .about .play-btn:hover:before {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -814,7 +648,7 @@ section { ...@@ -814,7 +648,7 @@ section {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.call-to-action .container { .call-to-action .container {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 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; background-size: cover;
padding: 100px 60px; padding: 100px 60px;
border-radius: 15px; border-radius: 15px;
...@@ -848,7 +682,7 @@ section { ...@@ -848,7 +682,7 @@ section {
} }
.call-to-action .play-btn:before { .call-to-action .play-btn:before {
content: ""; content: '';
position: absolute; position: absolute;
width: 120px; width: 120px;
height: 120px; height: 120px;
...@@ -866,7 +700,7 @@ section { ...@@ -866,7 +700,7 @@ section {
} }
.call-to-action .play-btn:after { .call-to-action .play-btn:after {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -881,7 +715,7 @@ section { ...@@ -881,7 +715,7 @@ section {
} }
.call-to-action .play-btn:hover:before { .call-to-action .play-btn:hover:before {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -964,7 +798,7 @@ section { ...@@ -964,7 +798,7 @@ section {
.services .service-item .icon:before { .services .service-item .icon:before {
position: absolute; position: absolute;
content: ""; content: '';
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #eeeeee; background: #eeeeee;
...@@ -1263,7 +1097,7 @@ section { ...@@ -1263,7 +1097,7 @@ section {
} }
.portfolio-details .portfolio-info h3:after { .portfolio-details .portfolio-info h3:after {
content: ""; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 50px; width: 50px;
...@@ -1485,7 +1319,7 @@ section { ...@@ -1485,7 +1319,7 @@ section {
.pricing .icon::before { .pricing .icon::before {
position: absolute; position: absolute;
content: ""; content: '';
height: 86px; height: 86px;
width: 86px; width: 86px;
border-radius: 50%; border-radius: 50%;
...@@ -1496,7 +1330,7 @@ section { ...@@ -1496,7 +1330,7 @@ section {
.pricing .icon::after { .pricing .icon::after {
position: absolute; position: absolute;
content: ""; content: '';
height: 102px; height: 102px;
width: 102px; width: 102px;
border-radius: 50%; border-radius: 50%;
...@@ -1816,7 +1650,7 @@ section { ...@@ -1816,7 +1650,7 @@ section {
} }
.contact .php-email-form .loading:before { .contact .php-email-form .loading:before {
content: ""; content: '';
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
width: 24px; width: 24px;
...@@ -1834,14 +1668,14 @@ section { ...@@ -1834,14 +1668,14 @@ section {
font-size: 14px; font-size: 14px;
} }
.contact .php-email-form input[type="text"], .contact .php-email-form input[type='text'],
.contact .php-email-form input[type="email"], .contact .php-email-form input[type='email'],
.contact .php-email-form textarea { .contact .php-email-form textarea {
padding: 12px 15px; padding: 12px 15px;
} }
.contact .php-email-form input[type="text"]:focus, .contact .php-email-form input[type='text']:focus,
.contact .php-email-form input[type="email"]:focus, .contact .php-email-form input[type='email']:focus,
.contact .php-email-form textarea:focus { .contact .php-email-form textarea:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
...@@ -1850,7 +1684,7 @@ section { ...@@ -1850,7 +1684,7 @@ section {
padding: 10px 12px; padding: 10px 12px;
} }
.contact .php-email-form button[type="submit"] { .contact .php-email-form button[type='submit'] {
background: var(--color-primary); background: var(--color-primary);
border: 0; border: 0;
padding: 14px 45px; padding: 14px 45px;
...@@ -1859,7 +1693,7 @@ section { ...@@ -1859,7 +1693,7 @@ section {
border-radius: 50px; 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); background: rgba(0, 131, 116, 0.8);
} }
...@@ -1889,6 +1723,7 @@ section { ...@@ -1889,6 +1723,7 @@ section {
background: #ffffff85; background: #ffffff85;
background-size: cover; background-size: cover;
padding: 60px 0 0 0; padding: 60px 0 0 0;
margin-top: 40px;
} }
@media (max-width: 378px) { @media (max-width: 378px) {
...@@ -1979,6 +1814,10 @@ section { ...@@ -1979,6 +1814,10 @@ section {
.hero .btn-watch-video { .hero .btn-watch-video {
font-size: 14px; font-size: 14px;
} }
#hero {
padding: 45px 0 0 0;
}
} }
.hero .icon-boxes { .hero .icon-boxes {
...@@ -1987,7 +1826,7 @@ section { ...@@ -1987,7 +1826,7 @@ section {
@media (min-width: 1200px) { @media (min-width: 1200px) {
.hero .icon-boxes:before { .hero .icon-boxes:before {
content: ""; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -2189,7 +2028,7 @@ section { ...@@ -2189,7 +2028,7 @@ section {
} }
.blog .blog-details .content blockquote:after { .blog .blog-details .content blockquote:after {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -2276,7 +2115,7 @@ section { ...@@ -2276,7 +2115,7 @@ section {
.blog .blog-details .meta-bottom .tags li + li::before { .blog .blog-details .meta-bottom .tags li + li::before {
padding-right: 6px; padding-right: 6px;
color: var(--color-default); color: var(--color-default);
content: ","; content: ',';
} }
.blog .blog-details .meta-bottom .share { .blog .blog-details .meta-bottom .share {
...@@ -2351,14 +2190,14 @@ section { ...@@ -2351,14 +2190,14 @@ section {
border-radius: 50px; border-radius: 50px;
} }
.blog .sidebar .search-form form input[type="text"] { .blog .sidebar .search-form form input[type='text'] {
border: 0; border: 0;
padding: 4px; padding: 4px;
border-radius: 50px; border-radius: 50px;
width: calc(100% - 60px); width: calc(100% - 60px);
} }
.blog .sidebar .search-form form input[type="text"]:focus { .blog .sidebar .search-form form input[type='text']:focus {
outline: none; outline: none;
} }
...@@ -2592,126 +2431,630 @@ section { ...@@ -2592,126 +2431,630 @@ section {
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Footer # Section ello ganaron
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.footer { #section-ganaron {
font-size: 14px; width: 100%;
background-color: var(--color-primary); padding: 0 15%;
padding: 50px 0; display: flex;
color: white;
} }
.footer .footer-info .logo { #section-ganaron .ganaron1 {
line-height: 0; width: 50%;
margin-bottom: 25px;
} }
.footer .footer-info .logo img { #section-ganaron .ganaron2 {
max-height: 40px; width: 50%;
margin-right: 6px;
} }
.footer .footer-info .logo span { #section-ganaron .ganaron1 h1 {
font-size: 30px; color: #3366ff;
font-weight: 700; margin-top: 50px;
letter-spacing: 1px; margin-bottom: 20px;
color: #fff; font-size: 3.5rem;
font-weight: bold;
font-family: var(--font-primary); font-family: var(--font-primary);
} }
.footer .footer-info p { #section-ganaron .ganaron1 p {
font-size: 14px; color: #3366ff;
font-family: var(--font-primary); font-size: 1rem;
font-family: var(--font-secondary);
margin: 0 0 30px 0;
padding: 0;
font-style: unset;
} }
.footer .social-links a { #section-ganaron .ganaron-anuncios {
margin: 0 0 70px 0;
display: flex; display: flex;
align-items: center; width: 100%;
justify-content: center; justify-content: space-between;
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;
}
.footer .social-links a:hover {
color: #fff;
border-color: #fff;
}
.footer h4 {
font-size: 16px;
font-weight: bold;
position: relative;
padding-bottom: 12px;
}
.footer .footer-links {
margin-bottom: 30px;
}
.footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
} }
.footer .footer-links ul i { #section-ganaron .ganaron-anuncios img {
padding-right: 2px; width: 200px;
color: rgba(0, 131, 116, 0.8);
font-size: 12px;
line-height: 0;
} }
.footer .footer-links ul li { #section-ganaron .ganaron2 {
padding: 10px 0;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
} }
.footer .footer-links ul li:first-child { #section-ganaron .ganaron2 .card-testimonial {
padding-top: 0; width: 70%;
background-color: #3366ff;
border-radius: 30px;
overflow: hidden;
} }
.footer .footer-links ul a { #section-ganaron .ganaron2 .card-testimonial .card-video {
color: rgba(255, 255, 255, 0.7); width: 100%;
transition: 0.3s; height: 200px;
display: inline-block; position: relative;
line-height: 1; overflow: hidden;
} }
.footer .footer-links ul a:hover { #section-ganaron .ganaron2 .card-testimonial video {
color: #fff; width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: center 15%;
} }
.footer .footer-contact p { #section-ganaron .ganaron2 .card-testimonial .card-text {
line-height: 26px; width: 100%;
} }
.footer .copyright { #section-ganaron .ganaron2 .card-testimonial .card-text p {
color: #caf024;
text-align: center; text-align: center;
font-size: 1.5rem;
font-weight: bold;
padding: 15px 0 6px 0;
} }
.footer .credits { /* ===== Tablets ===== */
padding-top: 4px; @media (max-width: 991px) and (min-width: 768px) {
text-align: center; #section-ganaron {
font-size: 13px; padding: 0 5%;
} justify-content: space-between;
gap: 0;
}
.footer .credits a { #section-ganaron .ganaron1 {
color: #fff; width: 60%;
} }
#section-testimonial .title{ #section-ganaron .ganaron1 h1 {
background-color: #7d33e2; font-size: 3rem;
color: white; }
#section-ganaron .ganaron-anuncios img {
width: 230px;
}
#section-ganaron .ganaron2 {
width: 40%;
}
} }
#section-testimonial .title h2{ /* ===== Móviles ===== */
color: white; @media (max-width: 767px) {
font-weight: bold; #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);
}
#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: space-between;
padding-top: 20px;
background-color: #2d64ff;
}
#section-faq .faq-s .faq-s-1 .divider {
width: 1.5px;
height: 60px;
background-color: #dbff4c;
}
#section-faq .faq-s .faq-s-1 button {
background-color: transparent;
border: 1.8px solid #dbff4c;
color: #dbff4c;
font-weight: bold;
font-size: 1.5rem;
padding: 2px 10px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
#section-faq .faq-s .faq-s-1 button:hover {
background-color: #d4ff4f;
color: #2d64ff;
}
#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;
}
#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%;
}
#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;
}
/* ===== Tablets ===== */
@media (max-width: 991px) and (min-width: 768px) {
.footer .footer2 a {
font-size: 1.2rem;
}
}
/* ===== 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;
}
}
/*--------------------------------------------------------------
# Pagina Preguntas frecuentes
--------------------------------------------------------------*/
#preguntas-frecuentes {
width: 100%;
display: flex;
margin-top: 100px;
}
#preguntas-frecuentes .preguntas-frecuentes-1 {
width: 30%;
background-color: #ccff00;
padding: 50px 20px;
}
#preguntas-frecuentes .preguntas-frecuentes-1 h1 {
color: #2d64ff;
font-size: 2rem;
font-weight: bold;
margin: 0;
}
#preguntas-frecuentes .preguntas-frecuentes-1 p {
color: #2d64ff;
font-size: 1.4rem;
margin: 0;
}
#preguntas-frecuentes .preguntas-frecuentes-2 {
width: 70%;
padding: 50px;
display: flex;
flex-direction: column;
gap: 15px;
}
#preguntas-frecuentes .preguntas-frecuentes-2 .pf-card {
width: 100%;
border: 2px solid #2d64ff;
border-radius: 10px;
padding: 10px 30px;
}
#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;
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>
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>
<script>
fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json())
.then((data) => {
const faqsContainer = document.querySelector(
'.preguntas-frecuentes-2'
);
faqsContainer.innerHTML = ''; // Limpiamos el contenedor
const faqsOrdenadas = data.data.faqs
.filter((faq) => faq.status === true)
.sort((a, b) => a.id - b.id); // Orden por ID ascendente
faqsOrdenadas.forEach((faq) => {
const pfCard = document.createElement('div');
pfCard.classList.add('pf-card');
pfCard.innerHTML = `
<div>
<h1 class="titleCard">${faq.question}</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">${faq.answer.replace(/\n/g, '<br>')}</span>
`;
faqsContainer.appendChild(pfCard);
});
// Volver a agregar los listeners para el toggle
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);
});
</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>
// 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>
</html>
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Universidad CNCI | GPI</title> <title>Universidad CNCI | GPI</title>
<meta content="" name="description"> <meta content="" name="description" />
<meta content="" name="keywords"> <meta content="" name="keywords" />
<!-- Favicons --> <!-- Favicons -->
<link href="assets/img/icono.png" rel="icon"> <link href="assets/img/icono.png" rel="icon" />
<link href="assets/img/icono.png" rel="apple-touch-icon"> <link href="assets/img/icono.png" rel="apple-touch-icon" />
<!-- Google Fonts --> <!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <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" 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"> rel="stylesheet"
/>
<!-- Vendor CSS Files --> <!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> href="assets/vendor/bootstrap/css/bootstrap.min.css"
<link href="assets/vendor/aos/aos.css" rel="stylesheet"> rel="stylesheet"
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"> />
<link href="assets/vendor/swiper/swiper-bundle.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 --> <!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet"> <link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet"> <link href="assets/css/custom.css" rel="stylesheet" />
</head>
</head>
<body>
<body>
<header id="header" class="header d-flex align-items-center"> <header id="header" class="header d-flex align-items-center">
<nav id="navbar" class="navbar">
<div <div class="nav-1">
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"> <a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/Logo Comunidad Promofenix.png" alt=""> <img src="assets/img/nuevologo.webp" alt="" />
</a> </a>
<nav id="navbar" class="navbar"> </div>
<div class="nav-2">
<ul> <ul>
<li><a href="https://promofenix.com/register" class="btn-register">Regístrate</a></li> <li>
<li class="ps-3 ps-md-0"><a href="https://promofenix.com/login" class="btn-sesion"> <a href="https://promofenix.com/register" class="btn-register"
<p>Inicio de sesión</p><i class="bi bi-person"></i> >Únete</a
</a></li> >
</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> </ul>
</nav><!-- .navbar -->
</div> </div>
</header><!-- End Header --> </nav>
<!-- .navbar -->
</header>
<!-- End Header -->
<!-- End Header --> <!-- End Header -->
<!-- Menú desplegable -->
<nav id="sideMenu" class="side-menu">
<div class="side-menu-content">
<div class="side-options"
><a href="index.html">¿Qué es PROMOFÉNIX?</a></div
>
<div class="side-options"
><a href="#">Programa de bonificaciones</a></div
>
<div class="side-options"><a href="#">Experiencias PROMOFÉNIX</a></div>
<div class="side-options"><a href="#">Registrar referido</a></div>
</div>
</nav>
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero" class="hero"> <section id="hero" class="hero">
<div class=""> <div class="">
<img id="portada-img" src="assets/img/hero.png" class="img-fluid w-100" alt=""> <img
id="portada-img"
src="assets/img/hero.png"
class="img-fluid w-100"
alt=""
/>
</div> </div>
</section> </section>
<!-- End Hero Section --> <!-- End Hero Section -->
<main id="main"> <main id="main">
<section id="section-one" class="p-0"> <section id="section-one" class="p-0">
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<div class="d-flex flex-wrap justify-content-center"> <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"> <img
id="seccion1-img"
src="assets/img/que es.png"
class="img-fluid w-100"
alt="imagen1"
/>
</div> </div>
</div> </div>
</section> </section>
...@@ -76,107 +114,231 @@ ...@@ -76,107 +114,231 @@
<section id="section-secundary" class="p-0"> <section id="section-secundary" class="p-0">
<div class="position-relative"> <div class="position-relative">
<div class="row gy-5" data-aos="fade-in"> <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"> <img
id="seccion2-img"
src="assets/img/todito.png"
class="img-fluid w-100"
alt="imagen2"
/>
</div> </div>
</div> </div>
</section> </section>
<section id="section-testimonial" class="p-0"> <section id="section-ganaron">
<div class="text-center py-4 mb-4 title"> <div class="ganaron1">
<h2>Experencias PROMOFÉNIX</h2> <h1>Ellos ya ganarón</h1>
<P>¡Conviértete hoy en promotor!</P> <p>
</div> Descubre las historias de quienes
<div class="container"> <strong>ya están</strong> aprovechando
<div class="row gy-5"> <strong>PROMOFÉNIX.</strong> Conoce cómo sus recomendaciones se han
<div class="col-lg-3 "> convertido en <strong>ingresos adicionales</strong> y cómo tú
<div class="testimonial-item" data-aos="fade-up"> también puedes hacerlo.
<video src="assets/img/testimonials/GPI video 1.mp4" controls class="img-fluid" </p>
poster="assets/img/testimonials/gabriela torres.jpg"></video> <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> </div>
<div class="col-lg-3 "> <div class="ganaron2">
<div class="testimonial-item" data-aos="fade-up"> <div class="card-testimonial">
<video src="assets/img/testimonials/GPI video 2.mp4" controls class="img-fluid" <div class="card-video">
poster="assets/img/testimonials/ada zetina.jpg"></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>
<div class="card-text">
<p>¡Ve los testimoniales!</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> </div>
</div> </div>
<div class="col-lg-3 "> </section>
<div class="testimonial-item" data-aos="fade-up">
<video src="assets/img/testimonials/GPI video 4.mp4" controls class="img-fluid" <section id="section-faq">
poster="assets/img/testimonials/carlos banda.jpg"></video> <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>
<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> </div>
</div> </div>
<div class="faq-s">
</main><!-- End #main --> <div class="faq-s-1">
<h1 class="faq-s-title">Preguntas frecuentes</h1>
<!-- ======= Footer ======= --> <div class="divider"></div>
<footer id="footer" class="footer"> <a href="faq.html">
<button>Leer más</button>
<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> </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>
<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> </div>
<div class="faq-s-2">
<div class="col-lg-2 col-6 footer-links"> <div class="faq-s-table">
<h4>Menu</h4> <h1>¿De qué trata PromoFénix?</h1>
<ul> <p>
<li><a href="https://promofenix.com/register">Registro</a></li> ¡Se trata de recomendar a personas, como familiares, amigos o
</ul> 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>
<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>
<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>
</div>
</section>
<div class="container mt-4"> <section id="section-descubre">
<div class="d-flex justify-content-between flex-wrap"> <div class="descubre-1">
<div class="copyright"> <div class="descubre-card">
&copy; Copyright <strong><span>Universidad CNCI</span></strong>© 2023. <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="credits">
All Rights Reserved | <a href="">Terms and Conditions</a> | <a href="">Privacy Policy</a>
</div> </div>
<div class="descubre-card">
<div>
<img src="assets/img/2.webp" alt="" />
</div> </div>
<div>
<p> Conoce el programa de recompensas de bonificaciones </p>
</div> </div>
</div>
<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><!-- End Footer --> <!-- ======= 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 --> <!-- End Footer -->
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i <a
class="bi bi-arrow-up-short"></i></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> <div id="preloader"></div>
<script>
const toggleButton = document.getElementById('menuToggle');
const sideMenu = document.getElementById('sideMenu');
toggleButton.addEventListener('click', function (e) {
e.preventDefault();
sideMenu.classList.toggle('open');
});
</script>
<!-- Vendor JS Files --> <!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/aos/aos.js"></script>
...@@ -188,30 +350,72 @@ ...@@ -188,30 +350,72 @@
<!-- Template Main JS File --> <!-- Template Main JS File -->
<script> <script>
// Realizamos la petición a la API usando fetch
fetch('https://promofenix.com/api/module_landing/getModuleLanding') fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
// Actualizamos las imágenes dinámicamente // ✅ Actualiza imágenes y videos
document.getElementById('portada-img').src = data.data.portada.image_path; document.getElementById('portada-img').src =
document.getElementById('seccion1-img').src = data.data.seccion1.image_path; data.data.portada.image_path;
document.getElementById('seccion2-img').src = data.data.seccion2.image_path; document.getElementById('seccion1-img').src =
data.data.seccion1.image_path;
document.getElementById('seccion2-img').src =
data.data.seccion2.image_path;
const videoTestimonial = document.getElementById('video-testimonial');
videoTestimonial.src = data.data.videotestimonio.image_path;
videoTestimonial.poster = data.data.testimonio.image_path;
const videoTutorial1 = document.getElementById('video-tutorial1');
videoTutorial1.src = data.data.videotutorial1.image_path;
videoTutorial1.poster = data.data.tutorial1.image_path;
const videoTutorial2 = document.getElementById('video-tutorial2');
videoTutorial2.src = data.data.videotutorial2.image_path;
videoTutorial2.poster = data.data.tutorial2.image_path;
// ✅ INSERTAR SOLO LAS 3 PRIMERAS FAQS
const faqsContainer = document.querySelector('.faq-s-2');
faqsContainer.innerHTML = '';
const faqs = data.data.faqs.slice(0, 3); // Solo 3 preguntas
faqs.forEach((faq) => {
const div = document.createElement('div');
div.classList.add('faq-s-table');
const h1 = document.createElement('h1');
h1.textContent = faq.question;
const p = document.createElement('p');
const respuestaCorta =
faq.answer.length > 240
? faq.answer.slice(0, 240) + '...'
: faq.answer;
p.textContent = respuestaCorta;
div.appendChild(h1);
div.appendChild(p);
faqsContainer.appendChild(div);
});
}) })
.catch(error => { .catch((error) => {
console.error('Error al obtener los datos de la API:', error); console.error('Error al obtener los datos de la API:', error);
}); });
</script> </script>
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
<script> <script>
(function() { (function () {
var options = { var options = {
//facebook: "101500205926683", // Facebook page ID //facebook: "101500205926683", // Facebook page ID
whatsapp: '+52 1 81 8276 0690', // WhatsApp number whatsapp: '+52 1 81 8276 0690', // WhatsApp number
//telegram: "Incursocnci", // Telegram bot username //telegram: "Incursocnci", // Telegram bot username
//email: "contacto@incurso.mx ", // Email //email: "contacto@incurso.mx ", // Email
//call: "55 3970 8975", // Call phone number //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) company_logo_url:
greeting_message: 'Hola, Gracias por visitarnos. Elige una opción para obtener ayuda.', // Text of greeting message '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 call_to_action: '¿En qué podemos ayudarte?', // Call to action
button_color: '#48ff00', // Color of button button_color: '#48ff00', // Color of button
position: 'left', // Position may be 'right' or 'left' position: 'left', // Position may be 'right' or 'left'
...@@ -225,7 +429,7 @@ ...@@ -225,7 +429,7 @@
shift_vertical: 0, // Vertical position, px shift_vertical: 0, // Vertical position, px
shift_horizontal: 0, // Horizontal position, px shift_horizontal: 0, // Horizontal position, px
domain: 'promofenix.com', // site domain domain: 'promofenix.com', // site domain
key: 'q6iB0rBISbinJtbDXt0Ffw' // pro-widget key key: 'q6iB0rBISbinJtbDXt0Ffw', // pro-widget key
}; };
var proto = document.location.protocol, var proto = document.location.protocol,
host = 'getbutton.io', host = 'getbutton.io',
...@@ -234,14 +438,12 @@ ...@@ -234,14 +438,12 @@
s.type = 'text/javascript'; s.type = 'text/javascript';
s.async = true; s.async = true;
s.src = url + '/widget-send-button/js/init.js'; s.src = url + '/widget-send-button/js/init.js';
s.onload = function() { s.onload = function () {
WhWidgetSendButton.init(host, proto, options); WhWidgetSendButton.init(host, proto, options);
}; };
var x = document.getElementsByTagName('script')[0]; var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x); x.parentNode.insertBefore(s, x);
})(); })();
</script> </script>
</body>
</body>
</html> </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