Skip to content

GitLab

Commit b2cececb authored by Ulises Pineda's avatar Ulises Pineda
Browse files

The layout and basic functionalities of the secondary splash are completed.

parent 687e8be4
Hide whitespace changes
Inline Side-by-side
Showing with 452 additions and 101 deletions
css/styles.css
View file @ b2cececb
......@@ -8,43 +8,163 @@
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto.woff2') format('woff2'),
url('/fonts/roboto.woff') format('woff');
src: url('/fonts/Roboto-Regular.ttf') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--secondary-color);
color: var(--primary-color);
}
.countdown {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
color: white;
border: 2px solid var(--text-color);
}
#first-screen {
display: none;
@media (max-width: 768px) {
.countdown {
height: 30px;
width: 30px;
}
}
#second-screen {
display: none;
.main-container {
width: 100%;
height: 90vh;
}
.main-logo-container {
height: 170px;
width: 170px;
}
#third-screen {
@media (max-width: 677px) {
.main-logo-container {
width: 100px;
height: 100px;
}
}
.secondary-logo-container {
width: 180px;
height: 90px;
}
@media (max-width: 677px) {
.secondary-logo-container {
width: 140px;
height: 70px;
}
}
.main-logo-container img,
.secondary-logo-container img{
width: 100%;
}
.image-screen-container {
border: 4px solid var(--text-color);
border-radius: 10px;
overflow: hidden;
height: auto;
width: 80%;
}
.image-screen-container img {
width: 100%;
}
.error-alert {
color: red;
font-size: 20px;
font-weight: bold;
}
.display-active {
display: block;
}
/*Estilos de primera pantalla*/
.main-container {
.display-inactive {
display: none;
}
/*---------------------Estilos del pop up de terminos y condiciones--------------*/
.terms-block {
width: 100%;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.terms-dialog {
padding: 15px;
height: 70%;
width: 35%;
color: var(--primary-color);
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 10px;
border: 3px solid var(--primary-color);
}
.terms-dialog p {
text-transform: uppercase;
line-height: 1.5;
}
.selct-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.terms-button {
background-color: var(--primary-color);
color: white;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
border: none;
outline: none;
border-radius: 10px;
padding: 7px 20px;
margin-top: 10px;
cursor: pointer;
}
@media (min-width: 678px) and (max-width: 1024px) {
.terms-dialog {
width: 70%;
}
}
@media (max-width: 677px) {
.terms-dialog {
width: 80%;
}
}
/*Estilos de primera pantalla*/
.first-block {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
height: 60vh;
}
.content-block-container {
......@@ -55,16 +175,19 @@ body {
height: 100%;
}
.content-block-container {
.info-block-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
flex-direction: column;
transform: translateX(4vw);
}
.link-container {
display: flex;
gap: 30px;
width: 100%;
transform: translateY(-50px);
}
.main-link {
......@@ -75,36 +198,26 @@ body {
width: 50%;
}
.main-link a {
color: white;
text-decoration: none;
font-size: 25px;
.icon {
height: 30px;
width: 30px;
}
.secondary-logo-container {
border: 1px solid var(--primary-color);
width: 180px;
height: 90px;
}
.main-logo-container {
border: 1px solid var(--primary-color);
height: 170px;
width: 170px;
.icon img {
width: 100%;
}
.image-screen-container {
border: 4px solid var(--text-color);
border-radius: 10px;
height: 320px;
width: 550px;
.main-link a {
color: white;
text-decoration: none;
font-size: 25px;
}
.second-block {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
justify-content: space-around;
height: 30vh;
}
.main-button {
......@@ -115,52 +228,118 @@ body {
border-radius: 10px;
font-size: 20px;
letter-spacing: 2px;
transform: translateY(-100px);
cursor: pointer;
display: none;
}
/*Estilos de segunda pantalla*/
@media (min-width: 768px) and (max-width: 1024px) {
.first-block {
flex-direction: column;
}
.content-block-container {
width: 85%;
}
.second-block {
flex-direction: column;
}
.info-block-container {
gap: 17px;
transform: translateX(0vw);
}
}
.third-block {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
@media (max-width: 767px) {
.first-block {
flex-direction: column;
}
.content-block-container {
width: 95%;
}
.info-block-container {
gap: 15px;
transform: translateX(-7vw);
}
.main-link a {
font-size: 14px;
}
#first-countdown {
display: none;
}
}
.fourth-block {
/*Estilos de segunda pantalla*/
.third-block {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
justify-content: space-around;
width: auto;
height: 90vh;
}
.second-logo-container {
display: flex;
transform: translateX(10vw);
width: 180px;
height: 90px;
padding: 10px 0;
border: 1px solid var(--primary-color);
}
.video-container {
max-width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60%;
height: 90%;
padding: 10px;
color: white;
letter-spacing: 2px;
text-align: center;
border: 4px solid var(--text-color);
letter-spacing: 2px;
border-radius: 10px;
padding: 10px;
margin: 20px 0;
border: 4px solid var(--text-color);
}
.frame-video {
height: 30vw;
width: auto;
overflow: hidden;
}
@media (max-width: 1024px) {
.third-block {
flex-direction: column;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.video-container {
width: 85%;
height: 50%;
transform: translateY(-6vh);
}
.frame-video {
height: 38vh;
}
}
@media (max-width: 767px) {
.video-container {
width: 85%;
height: 60%;
font-size: 14px;
}
.frame-video {
height: 25vh;
}
}
/*Estilos de tercera pantalla*/
.fifth-block {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 60vh;
height: 58vh;
gap: 30px;
}
......@@ -173,30 +352,27 @@ body {
}
.second-image-screen-container img {
border: 4px solid var(--text-color);
display: flex;
border-radius: 10px;
height: 400px;
width: 720px;
}
.sixth-block {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
height: 30vh;
gap: 100px;
}
.logo-container-third-screen {
display: flex;
width: 180px;
height: 90px;
padding: 10px 0;
border: 1px solid var(--primary-color);
@media (max-width: 1024px) {
.fifth-block {
flex-direction: column;
}
}
@media (max-width: 768px) {
.sixth-block {
flex-direction: column;
justify-content: center;
}
}
/*---------------Estilos del footer---------------*/
.footer {
width: 100%;
height: 10vh;
......@@ -206,4 +382,10 @@ body {
justify-content: center;
align-items: center;
text-align: center;
}
@media (max-width: 677px) {
.footer {
font-size: 12px;
}
}
\ No newline at end of file
index.html
View file @ b2cececb
......@@ -6,86 +6,115 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="shortcut icon" href="/public/img/ABEJA BEE.svg" type="image/x-icon">
<title>Ualabi | BeeTelecom</title>
</head>
<body>
<main class="main-container">
<section id="first-screen" class="section-container">
<section id="terms-screen" class="display-active">
<div class="terms-block">
<div class="terms-dialog">
<div class="main-logo-container">
<img src="/public/img/BEEFI-ZONE- 1.gif" alt="logo BeefiTelecom">
</div>
<p id="text-terms">Para iniciar la navegación debes aceptar nuestra política de privacidad y términos y condiciones</p>
<div class="selct-container">
<input type="checkbox" name="" id="terms-checkbox">
<span>Acepto términos y condiciones</span>
</div>
<div class="selct-container">
<input type="checkbox" name="" id="privacy-checkbox">
<span>Acepto la política de privacidad</span>
</div>
<button
class="terms-button"
id="terms-button"
>
Conectarse
</button>
</div>
</div>
</section>
<section id="first-screen" class="section-container display-inactive">
<div class="first-block">
<div class="content-block-container">
<div class="main-logo-container">
<img src="#">
<img src="/public/img/BEEFI-ZONE- 1.gif" alt="logo BeefiTelecom">
</div>
</div>
<div class="content-block-container">
<div class="image-screen-container">
<img src="#">
<img src="/public/img/Archivo actual (1).png" alt="marketing image">
</div>
</div>
</div>
<div class="second-block">
<div class="content-block-container">
<button class="main-button">Conectar</button>
<div class="main-button-container">
<div class="countdown" id="first-countdown">1</div>
</div>
<div class="content-block-container">
<div class="info-block-container">
<div class="link-container">
<div class="main-link">
<div class="icon">
<img src="">
<img src="/public/img/ICONOS_PHONE.svg" alt="Ícono de teléfono">
</div>
<a href="#" class="link"> 800 578 2323</a>
</div>
<div class="main-link">
<div class="icon">
<img src="">
<img src="/public/img/ICONOS_WEB.svg" alt="Ícono de sitio web">
</div>
<a href="#" class="link"> beefitelecom.mx</a>
<a href="#" class="link"> beetelecom.mx</a>
</div>
</div>
<div class="secondary-logo-container">
<img src="#">
<img src="/public/img/Powerd-by-BeeTelecom.png" alt="Poweered by logo">
</div>
</div>
</div>
</section>
<section id="second-screen" class="section-container">
<section id="second-screen" class="section-container display-inactive">
<div class="third-block">
<div class="content-block-container">
<div class="second-logo-container">
<img src="#">
</div>
<div class="main-logo-container">
<img src="/public/img/BEEFI-ZONE- 1.gif" alt="logo BeefiTelecom">
</div>
</div>
</div>
<div class="fourth-block">
<div class="video-container">
<p>Al finalizar el video disfrutarás de tu conexión</p>
<img src="#">
<div class="countdown">04</div>
<div class="frame-video">
<video
src="/public/video/LA_ESTANCIA_CORTES.mp4"
height="100%"
id="video-player"
muted
loop
>
</video>
</div>
<div class="countdown" id="second-countdown">1</div>
</div>
</div>
</section>
<section id="third-screen" class="section-container">
<section id="third-screen" class="section-container display-inactive">
<div class="fifth-block">
<div class="first-image-screen-container">
<img src="#">
<div class="image-screen-container">
<img src="/public/img/RENTA-DE-ESPACIOS_result.webp" alt="Imagen promocional terecera pantalla">
</div>
<div class="second-image-screen-container">
<img src="#">
<div class="image-screen-container">
<img src="/public/img/Archivo actual (1).png" alt="Imagen promocional tercera pantalla">
</div>
</div>
<div class="sixth-block">
<div class="logo-container-third-screen">
<img src="#">
<div class="secondary-logo-container">
<img src="/public/img/Powerd-by-BeeTelecom.png" alt="Powerd-by-BeeTelecom">
</div>
<div class="countdown">03</div>
<div class="countdown" id="third-countdown">1</div>
</div>
</section>
</main>
......
js/scripts.js
View file @ b2cececb
document.addEventListener("DOMContentLoaded", function () {
console.log("DOM completamente cargado y analizado");
//Variables generales
const d = document;
const termsButton = d.getElementById('terms-button');
const termsCheckbox = d.getElementById('terms-checkbox');
const privacyCheckbox = d.getElementById('privacy-checkbox');
const textTerms = d.getElementById('text-terms');
const termsScreen = d.getElementById('terms-screen');
const firstScreen = d.getElementById('first-screen');
const secondScreen = d.getElementById('second-screen');
const thirdScreen = d.getElementById('third-screen');
const videoPlayer = d.getElementById('video-player');
const firstCountdown = d.getElementById('first-countdown');
const secondCountdown = d.getElementById('second-countdown');
const thirdCountdown = d.getElementById('third-countdown');
//Función que maneja la aceptación de términos y condiciones
const handleTermsConditions = () => {
termsButton.addEventListener('click', ()=>{
if(!termsCheckbox.checked || !privacyCheckbox.checked) {
textTerms.classList.add('error-alert');
textTerms.textContent = '¡ Es necesario que aceptes los términos y condiciones para que puedas navegar !';
}
else {
console.log('Comienza a navegar !!');
termsScreen.classList.remove('display-active');
termsScreen.classList.add('display-inactive');
handleScreens();
}
})
};
//Función que maneja las pantallas
const handleScreens = () => {
firstScreen.classList.remove('display-inactive');
firstScreen.classList.add('display-active');
resetCountDown();
handleCountDown(firstCountdown);
setTimeout(() => {
resetCountDown();
firstScreen.classList.remove('display-active');
firstScreen.classList.add('display-inactive');
secondScreen.classList.remove('display-inactive');
secondScreen.classList.add('display-active');
videoPlayer.setAttribute('autoplay', '');
videoPlayer.play();
handleCountDown(secondCountdown);
setTimeout(() => {
videoPlayer.removeAttribute('autoplay');
videoPlayer.pause();
secondScreen.classList.remove('display-active');
secondScreen.classList.add('display-inactive');
resetCountDown();
thirdScreen.classList.remove('display-inactive');
thirdScreen.classList.add('display-active');
handleCountDown(thirdCountdown);
}, 5000);
}, 3000);
};
//Función que maneja el countdown
let counterInterval = null;
const handleCountDown = (countdown) => {
let counter = parseInt(countdown.textContent);
if(counterInterval) {
clearInterval(counterInterval);
}
setInterval(() => {
counter ++;
countdown.textContent = counter;
}, 1000);
};
const resetCountDown = () => {
if(counterInterval) {
clearInterval(counterInterval);
counterInterval = null;
}
};
handleTermsConditions();
});
public/img/ABEJA BEE.svg 0 → 100644
View file @ b2cececb
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 389.5">
<defs>
<style>
.cls-1 {
fill: #ffbe00;
}
.cls-2 {
fill: #58585b;
}
.cls-3 {
fill: #fff;
}
</style>
</defs>
<path class="cls-3" d="M399.43,267.62c-1.31-5.62-4.73-10.39-9.63-13.44l-47.13-29.3c-3.43-2.13-7.37-3.25-11.4-3.25-1.31,0-2.61.12-3.87.34-1.47-5.17-4.76-9.54-9.36-12.4l-9.48-5.89c7.33-19.02,7.71-39.95.96-59.36-1.13-13.56,7.09-26.02,19.78-30.45.13,1.03.31,2.06.55,3.08,1.73,7.41,6.24,13.7,12.7,17.71,4.52,2.81,9.72,4.3,15.03,4.3,9.92,0,18.96-5.02,24.18-13.42,4.03-6.46,5.29-14.09,3.57-21.5-1.73-7.41-6.24-13.7-12.87-17.81-10.06-6.01-21.55-9.18-33.23-9.18-4.95,0-9.92.57-14.78,1.7-16.81,3.91-31.11,14.31-40.09,28.52-3.37-2.91-6.95-5.55-10.73-7.9-3.23-2.01-6.58-3.79-10.06-5.35,8.97-14.4,12.07-31.94,8.13-48.86-4.02-17.24-14.61-31.76-29.76-40.87-4.52-2.81-9.72-4.3-15.03-4.3-9.91,0-18.96,5.02-24.2,13.43-4.02,6.46-5.28,14.09-3.56,21.49,1.73,7.4,6.24,13.69,12.69,17.7,4.52,2.81,9.72,4.3,15.03,4.3,3.82,0,7.52-.75,10.92-2.15,2.32,13.17-4.4,26.13-16.5,31.88-21.63,1.7-42.06,11.66-56.72,27.52l-9.5-5.9c-3.43-2.13-7.38-3.25-11.4-3.25-1.32,0-2.61.11-3.87.34-1.47-5.17-4.76-9.54-9.36-12.4l-47.13-29.29c-3.43-2.14-7.37-3.26-11.41-3.26-7.53,0-14.39,3.81-18.36,10.19l-16.56,26.6c-3.05,4.9-4.01,10.69-2.7,16.31.11.45.22.9.36,1.34-6.1,1-11.47,4.54-14.81,9.9l-16.56,26.6c-3.05,4.9-4.01,10.69-2.7,16.3,1.31,5.62,4.73,10.39,9.63,13.44l47.13,29.3c3.43,2.13,7.38,3.25,11.4,3.25,1.32,0,2.61-.11,3.87-.34,1.47,5.16,4.76,9.54,9.36,12.4l6.7,4.16c-1.54,3.27-2.99,6.54-4.31,9.81-.03.06-.07.11-.1.17-1.09,2.73-2.1,5.47-3.05,8.21-.43,1.23-.81,2.44-1.21,3.66-.61,1.9-1.19,3.8-1.73,5.7-.38,1.34-.79,2.69-1.13,4.02-.65,2.49-1.24,4.98-1.76,7.46-.01.05,0,.11-.02.16-6.99,33.38-2.2,63.96,13.52,84.34l-.8,24.34c-.13,4.07,1.92,7.9,5.38,10.06,1.84,1.14,3.93,1.72,6.03,1.72,1.84,0,3.69-.45,5.38-1.34l21.57-11.52c4.5.9,9.12,1.51,13.96,1.51h0c28.1,0,58.5-15.22,84.21-41.43.31-.31.61-.63.91-.94,1.35-1.4,2.7-2.82,4.03-4.28.27-.29.54-.56.8-.85.05-.06.07-.13.12-.19,2.35-2.63,4.65-5.34,6.9-8.16l7.56,4.7c3.43,2.13,7.37,3.26,11.4,3.26,1.31,0,2.61-.11,3.87-.34,1.47,5.16,4.76,9.54,9.36,12.4l47.13,29.3c3.43,2.13,7.37,3.26,11.4,3.26,7.53,0,14.39-3.81,18.36-10.19l16.57-26.61c3.04-4.89,4-10.68,2.69-16.3-.11-.45-.23-.9-.36-1.34,6.1-1,11.48-4.55,14.81-9.9l16.56-26.6c3.05-4.9,4.01-10.69,2.7-16.31ZM293.68,276.12c-.03-.1-.06-.2-.09-.3.11-.02.22-.04.32-.06.03.1.06.2.09.3-.11.02-.22.04-.32.06Z"/>
<path class="cls-1" d="M199.81,294.47c-8.33-5.18-10.89-16.17-5.71-24.5l16.56-26.61c3.27-5.25,8.92-8.39,15.12-8.39.79,0,1.57.05,2.35.16-1.18-1.77-2.05-3.75-2.55-5.88-1.08-4.63-.29-9.4,2.22-13.43l16.56-26.6c3.27-5.25,8.93-8.39,15.12-8.39.63,0,1.26.06,1.88.13-4.61-11.65-11.97-21.15-22.07-27.43-9.96-6.19-21.55-8.59-33.85-7.69,1.24,1.81,2.16,3.84,2.67,6.04,1.08,4.63.29,9.4-2.22,13.43l-16.56,26.6c-3.27,5.25-8.92,8.39-15.12,8.39h0c-.79,0-1.57-.05-2.35-.16,1.18,1.76,2.05,3.75,2.55,5.88,1.08,4.63.29,9.4-2.22,13.43l-16.56,26.6c-3.27,5.25-8.92,8.39-15.12,8.39-3.32,0-6.57-.93-9.39-2.69l-31.1-19.33c-25.26,51.95-21.28,106.06,11.47,126.42,32.75,20.36,83.08,0,118.56-45.59l-30.22-18.79Z"/>
<path d="M245.49,144.57c14.94,9.29,24.66,24.28,29.15,42.5l22.71,14.12c7.29-17.7,7.3-37.08.97-54.32-2.52-20.59,10.84-40.19,31.52-45.01,4.58-1.06,9.15-1.32,13.58-.86-.11.16-.21.33-.32.49-4.98,8-2.53,18.52,5.48,23.49,8,4.98,18.52,2.53,23.5-5.47,4.98-8,2.53-18.51-5.47-23.49h0c-11.47-6.85-25.52-9.43-39.56-6.16-19.68,4.58-34.2,19.48-39.32,37.63-5.39-7.12-12.08-13.43-20.12-18.43-7.42-4.61-15.35-7.69-23.43-9.48,14.02-12.61,20.99-32.18,16.41-51.83-3.42-14.67-12.58-26.51-24.55-33.69l-.12-.08c-8-4.98-18.52-2.53-23.51,5.47-4.98,8-2.52,18.51,5.48,23.49,8.01,4.98,18.53,2.53,23.51-5.47.27-.43.51-.87.74-1.31h0c2.98,4.21,5.2,9.06,6.45,14.39,4.65,19.95-6.13,39.84-24.53,47.34-19.7,1.05-38.71,9.83-52.29,25.23l22.7,14.11c18.34-4.03,36.09-1.95,51.04,7.34Z"/>
<path class="cls-2" d="M93.96,170.82l-16.56,26.6c-2.97,4.78-9.26,6.24-14.04,3.27l-47.13-29.3c-4.78-2.97-6.25-9.26-3.27-14.03l16.56-26.6c2.97-4.78,9.26-6.24,14.04-3.27l47.13,29.3c4.78,2.97,6.25,9.26,3.27,14.03M127.68,116.67c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M165.73,215.43c2.97-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.05,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M199.44,161.28c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6"/>
<path class="cls-2" d="M281.56,287.44l-16.56,26.6c-2.97,4.78-9.26,6.24-14.04,3.27l-47.13-29.3c-4.78-2.97-6.25-9.26-3.27-14.03l16.56-26.6c2.97-4.78,9.26-6.24,14.04-3.27l47.13,29.3c4.78,2.97,6.25,9.26,3.27,14.03M315.28,233.29c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M353.33,332.05c2.97-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.05,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M387.04,277.9c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6"/>
<path class="cls-1" d="M283.94,153.53c-4.94.15-9.07-3.73-9.22-8.67-.11-3.45,1.78-6.48,4.6-8.05-11.55-16.19-30.41-26.72-51.59-26.93,0,.02,0,.04,0,.06.15,4.94-3.73,9.07-8.67,9.22-4.36.13-8.07-2.87-9-6.96-9.37,2.57-17.88,7.14-25,13.3-.18.16-.36.32-.54.47.23-.07.46-.13.7-.2,24.35-6.91,48.03-4.6,67.36,7.41,18.94,11.78,31.37,31.41,36.15,55.6.11.55.21,1.11.32,1.66.12-.46.24-.92.35-1.38,1.34-5.52,1.97-11.3,1.77-17.26-.23-6.72-1.49-13.16-3.61-19.17-1.1.53-2.32.86-3.62.9Z"/>
<path class="cls-2" d="M281.56,287.44l-16.56,26.6c-2.97,4.78-9.26,6.24-14.04,3.27l-47.13-29.3c-4.78-2.97-6.25-9.26-3.27-14.03l16.56-26.6c2.97-4.78,9.26-6.24,14.04-3.27l47.13,29.3c4.78,2.97,6.25,9.26,3.27,14.03M315.28,233.29c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M353.33,332.05c2.97-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.05,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6M387.04,277.9c2.98-4.78,1.51-11.06-3.27-14.03l-47.13-29.3c-4.78-2.97-11.07-1.51-14.04,3.27l-16.56,26.6c-2.98,4.78-1.51,11.06,3.27,14.03l47.13,29.3c4.78,2.97,11.07,1.51,14.04-3.27l16.56-26.6"/>
<path d="M170.56,263.93c-6.6-4.1-12.73-8.74-18.49-13.78,1.36-1.17,2.57-2.53,3.55-4.1l2.72-4.36c5.53,4.89,11.43,9.37,17.78,13.32,6.65,4.13,13.59,7.61,20.76,10.48l-2.79,4.48c-.97,1.55-1.66,3.2-2.1,4.88-7.39-3.01-14.56-6.63-21.44-10.91ZM174.85,210.54c6.35,5.15,13.01,9.95,20.04,14.32,7.35,4.57,14.94,8.58,22.72,12.11,2.48-1.28,5.27-2,8.18-2,.79,0,1.57.05,2.35.16-1.18-1.77-2.05-3.75-2.55-5.88-.02-.09-.03-.18-.05-.27-8.63-3.71-17.01-8.03-25.09-13.05-7.82-4.86-15.18-10.26-22.12-16.13-1.33.31-2.7.49-4.11.49h0c-.79,0-1.57-.05-2.35-.16,1.18,1.76,2.05,3.75,2.55,5.88.35,1.5.48,3.02.44,4.53ZM131.42,326.82c-24.96-15.52-37.14-46.17-36.56-82.75-3.66,9.13-6.43,18.25-8.3,27.15,4.75,28.13,17.87,51.2,39.3,64.53,21.44,13.32,47.95,14.88,75.3,6.71,7.09-5.55,13.98-11.97,20.49-19.2.07-.08.14-.16.22-.24-.09.05-.19.1-.28.14-32.48,16.55-65.28,19.13-90.16,3.65ZM216.65,304.94c-22.82,1.58-44.26-2.92-62.67-14.36-18.41-11.44-31.93-28.68-40.59-49.83l-13.36-8.31c-.11.23-.23.45-.34.68,8.94,28.5,25.18,51.74,48.74,66.39,23.56,14.64,51.6,18.93,81.14,14.34.16-.2.3-.41.46-.61l-13.36-8.31ZM111.82,359.04c-.11-.07-.23-.13-.34-.2-.11-.07-.22-.15-.33-.22-3.98-2.52-7.54-5.54-10.66-9-.02-.02-.04-.04-.06-.06v.07s-.35,10.64-.35,10.64l-.59,17.82,15.74-8.4,9.45-5.05c-4.51-1.27-8.82-3.13-12.87-5.6Z"/>
</svg>
\ No newline at end of file
public/img/ICONOS_PHONE.svg 0 → 100644
View file @ b2cececb
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<defs>
<style>
.cls-1 {
fill: #fecd00;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) -->
<g>
<g id="Capa_1">
<g>
<path class="cls-1" d="M23.9,34c3.3,9.6,7,17.7,12.2,24.7,9.7,12.8,21.3,20.6,26.6,22.8,8.1,3.4,11.8,0,11.8,0,0,0-11.9-12.9-14.9-16.9-1.5,2.5-3,2.9-4.7,1.3-10.5-8-15.6-18.1-15.6-18.1-3.7-5.5-.5-7.9-.5-7.9l-12.9-19.1c-2.8,2-4.8,4.8-2.1,13.2"/>
<path class="cls-1" d="M37.1,20.6c-4.5-5-8.6-1.6-8.6-1.6,0,0,9.4,14.6,12.9,19.5,5.1-4.5.2-12.8-4.3-17.9"/>
<path class="cls-1" d="M61.9,62.7l15.2,16.6s3.6-5.7,0-9.4c-3.5-3.7-7.6-8.4-7.6-8.4,0,0-3.8-3.5-7.7,1.2"/>
</g>
</g>
</g>
</svg>
\ No newline at end of file
public/img/ICONOS_WEB.svg 0 → 100644
View file @ b2cececb
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<defs>
<style>
.cls-1 {
fill: #fecd00;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) -->
<g>
<g id="Capa_1">
<path class="cls-1" d="M50,17.4c-17.1,0-31,14.6-31,32.6s13.9,32.6,31,32.6,31-14.6,31-32.6-13.9-32.6-31-32.6M72.2,68.2c-.9-.9-3.4-3.1-7.7-4.8,1.3-5.1,1.7-9.7,1.8-11.9h11.7c-.3,6.3-2.4,12-5.8,16.7M27.5,32.2c1.1,1,3.3,2.5,7.3,3.8-1,3.5-1.7,7.6-1.8,12.6h-11c.3-6.1,2.3-11.7,5.6-16.3M48.5,21.3v13.9c-4.1-.1-7.4-.6-10-1.2,3.2-8.6,8.5-11.8,9.6-12.5,0,0,.4-.3.4-.3ZM51.5,38.2c4.2,0,7.6-.5,10.3-1.2.9,3.2,1.5,7,1.6,11.5h-11.9v-10.4h0ZM51.5,35.3v-13.5c1.5.9,6.4,4.4,9.4,12.5-2.5.6-5.6,1-9.4,1M48.5,38.1v10.4h-12.6c.1-4.6.7-8.5,1.7-11.7,2.9.7,6.5,1.2,10.9,1.3M33,51.4c.1,2.3.5,7,1.9,12.1-3.8,1.4-6.4,3.1-7.6,4-3.1-4.6-5.1-10.1-5.4-16.1,0,0,11,0,11,0ZM35.9,51.4h12.6v9.4c-4.2.2-7.8.8-10.8,1.7-1.2-4.7-1.6-9-1.7-11.1M48.5,63.8v15.3c-5.2-2.5-8.2-8-10-13.6,2.8-.8,6.1-1.5,10-1.6M51.5,78.7v-14.9c3.7.1,6.8.7,9.4,1.5-1.7,5.4-4.6,10.8-9.4,13.5M51.5,60.9v-9.4h11.9c-.1,2.1-.5,6.4-1.7,11-2.8-.8-6.2-1.4-10.2-1.5M66.3,48.5c-.1-4.8-.8-8.9-1.7-12.4,4.1-1.5,6.3-3.4,7.3-4.7,3.6,4.7,5.8,10.6,6.1,17.1h-11.7ZM70,29.2c-.5.7-2.2,2.7-6.3,4.2-2.4-6.7-6-10.6-8.6-12.6,5.8,1.1,10.9,4.2,14.9,8.4M43.9,21c-2.5,2.1-5.9,5.9-8.3,12.3-3.7-1.2-5.6-2.7-6.4-3.3,3.8-4.4,8.9-7.6,14.6-9M29.1,69.8c1-.7,3.3-2.2,6.6-3.5,1.5,4.6,3.8,9.2,7.4,12.5-5.5-1.5-10.3-4.7-14-9M56,79c3.8-3.3,6.2-8.1,7.7-12.8,4.1,1.7,6.2,3.8,6.7,4.2-3.8,4.3-8.8,7.3-14.4,8.6"/>
</g>
</g>
</svg>
\ No newline at end of file
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 to comment