Add files via upload

CloRevollo · Apr 14, 2023 · 2a6e3b8 · 2a6e3b8
1 parent 6fdeb3f
commit 2a6e3b8
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 0 deletions.
diff --git a/assets/video/BACityBusinessCut.mp4 b/assets/video/BACityBusinessCut.mp4
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,90 @@
+
+/*Seccion con BG de "VIDEO" Y "CONTADOR en JS"*/
+
+.section-video {
+    position: relative;
+    width: 100%;
+    padding: 130px 0;
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center;
+}
+
+video{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
+.full-image {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.full-image .to-bottom {
+    object-position: bottom;
+}
+
+.grayscale {
+    filter: grayscale(100%);
+}
+
+.container-section-number {
+    position: relative;
+    color: white;
+    text-shadow: 0 0 5px black;
+}
+
+.pre-title {
+    width: fit-content;
+    margin: auto;
+    padding-bottom: 15px;
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--bs-orange);
+}
+
+.titulo-numeros {
+    font-size: 2rem;
+    padding: 15px;
+}
+
+.resaltador{
+    background-color: var(--bs-orange);
+}
+
+.counter-bubble {
+    position: relative;
+    width: 110px;
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    box-sizing: border-box;
+    height: 70px;
+    vertical-align: middle;
+    margin: 15px;
+}
+
+.number {
+    font-size: 3rem;
+    position: absolute;
+    top: 25px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    line-height: 40px;
+    font-weight: 700;
+    color: var(--bs-orange);
+    padding-bottom: 20px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
+
+    <title>Contador JS</title>
+
+</head>
+<body>
+
+    <!--SECCION con fondo con VIDEO y CONTADOR JS-->
+
+    <section class="section-video counter">
+        <video class="full-image to-bottom grayscale" playsinline autoplay muted loop>
+            <source src="assets/video/BACityBusinessCut.mp4" type="video/mp4">
+        </video>
+
+        <div class="container-section-number">
+            <div class="row mb-md-5 text-center">
+                <div class="col-12">
+                    <span class="pre-title">Eficacia, Competencia, Profesionalismo</span>
+                    <h2 class="titulo-numeros">Los <span class="resaltador"><span>Resultados</span></span> se ven en nuestros Números</h2>
+                </div>
+            </div>
+            <div class="row justify-content-center text-center">
+                <div class="col-12 col-md-6 col-lg-3 item">
+                    <div class="numero counter-bubble">
+                        <span class="number" data-value="1180">000</span>
+                    </div>
+                    <h4>Proyectos Realizados</h4>
+                </div>
+                <div class="col-12 col-md-6 col-lg-3 item">
+                    <div class="numero counter-bubble">
+                        <span class="number" data-value="320">000</span>
+                    </div>
+                    <h4>Reconocimientos</h4>
+                </div>
+                <div class="col-12 col-md-6 col-lg-3 item">
+                    <div class="numero counter-bubble">
+                        <span class="number" data-value="790">000</span>
+                    </div>
+                    <h4>Clientes Satisfechos</h4>
+                </div>
+                <div class="col-12 col-md-6 col-lg-3 item">
+                    <div class="numero counter-bubble">
+                        <span class="number" data-value="25">0</span>
+                    </div>
+                    <h4>Años de Experiencia</h4>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Bootstrap core JavaScript ================================================== -->
+    <script src="https://code.jquery.com/jquery-3.6.4.slim.js" integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+
+    <!-- Contador en JavaScript -->
+    <script src="js/counter.js"></script>
+
+</body>
+</html>
diff --git a/js/counter.js b/js/counter.js
@@ -0,0 +1,22 @@
+/* CONTADOR JS*/
+
+let valueDisplays = document.querySelectorAll(".number");
+let interval = 5000;
+
+/*console.log(valueDisplays);*/
+
+valueDisplays.forEach((valueDisplay) => {
+    let startValue = 0;
+
+    let endValue = parseInt(valueDisplay.getAttribute("data-value"));
+    /*console.log(endValue);*/
+    let duration = Math.floor(interval / endValue);
+
+    let counter = setInterval(function () {
+        startValue += 1;
+        valueDisplay.textContent = startValue;
+        if (startValue == endValue) {
+            clearInterval(counter);
+        }
+    }, duration);
+});