update

Primeiros elementos - videos
Dreamer2h0 · Nov 6, 2023 · 43e73db · 43e73db
1 parent 1e42d2e
commit 43e73db
Show file tree

Hide file tree

Showing 9 changed files with 288 additions and 3 deletions.
diff --git a/img/kevin-durant.jpg b/img/kevin-durant.jpg
diff --git a/img/lebron-james.jpg b/img/lebron-james.jpg
diff --git a/img/stephen-curry.jpg b/img/stephen-curry.jpg
diff --git a/index.html b/index.html
@@ -32,14 +32,17 @@
                 <a class="nav-link active" aria-current="page" href="index.html">Home</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Vídeos</a>
+                <a class="nav-link" href="videos.html">Vídeos</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#">Galeria de Fotos</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#">Contato</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Jogos</a>
+              </li>
               <!--Nav Item disabled-->
               <li class="nav-item">
                 <a class="nav-link disabled" aria-disabled="true">Em Breve: Jogadores</a>

diff --git a/script.js b/script.js
@@ -16,10 +16,10 @@ for (var i = 0; i < sidenavItems.length; i++) {
   });
 }
 
-// Get the container element
+// Get the container element for the navbar menu
 var navbarContent = document.getElementById("navbarSupportedContent");
 
-// Get all buttons with class "side-menu" inside the container
+// Get all buttons with class "nav-link" inside the navbar container
 var navbarItems = navbarContent.getElementsByClassName("nav-link");
 
 // Loop through the buttons and add the active class to the current/clicked button

diff --git a/style.css b/style.css
@@ -72,6 +72,7 @@
   width: 400px;
   margin-left: 33%;
   padding: 16px;
+  border-radius: 35px;
 }
 
 .col {

diff --git a/videos.css b/videos.css
@@ -0,0 +1,141 @@
+@font-face {
+  font-family: 'old-school';
+  src: url('font/old_school_united_stencil/old_school_united_stencil.ttf');
+  font-weight: normal;
+}
+@font-face {
+  font-family: 'old-school';
+  src: url('font/old_school_united_stencil/old_school_united_stencil_italic.ttf');
+  font-style: italic;
+}
+
+.logo {
+  font-family: 'old-school';
+  font-style: italic;
+  font-size: 1.5rem;
+}
+
+#navbarSupportedContent .active {
+  color: #ff5900;
+}
+
+.conteudo {
+  margin: 0 81.5px 0 81.5px;
+  padding: 0 12px 0 12px;
+}
+
+.conteudo p {
+  text-align: justify;
+  text-indent: 12px;
+}
+/*
+.conteudo .basquete-img1, .basquete-img2 {
+  width: 400px;
+  margin-left: 33%;
+  padding: 16px;
+  border-radius: 35px;
+}
+*/
+
+* {box-sizing:border-box}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.3s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.slideshow-container > .active, .dot:hover {
+  background-color: #717171;
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: .5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-width: 460px) {
+  .sidenav {display: none;}
+  .conteudo {width: 100%; margin: 0px; padding: 0 12px 0 12px;}
+  #container-fluid, .all {margin: 0px;}
+  .col > .card {width: 8rem !important;}
+  .card-body > .card-title {font-size: 0.65rem;}
+  .card-body > .card-text {display: none !important;}
+  .conteudo .basquete-img1, .basquete-img2 {
+    width: 250px !important;
+    margin-left: 20% !important;
+    padding: 16px;
+  }
+}
diff --git a/videos.html b/videos.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dunk Blog</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="videos.css">
+    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
+  </head>
+  <body>
+    <!--Header-->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid" id="container-fluid">
+          <nav class="navbar bg-body-tertiary">
+            <div class="container-fluid">
+              <!--Logo-->
+              <a class="navbar-brand" href="index.html" style="color: #ff5900;">
+                <i class="fa-solid fa-xl fa-basketball d-inline-block align-text-top" alt="Logo" width="30" height="24" style="color: #ff5900; margin-top: 14px;"></i>
+                <span class="logo">Dunk Blog</span>
+              </a>
+            </div>
+          </nav>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <!--Nav Items-->
+              <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="index.html">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" href="videos.html">Vídeos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Galeria de Fotos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Contato</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Jogos</a>
+              </li>
+              <!--Nav Item disabled-->
+              <li class="nav-item">
+                <a class="nav-link disabled" aria-disabled="true">Em Breve: Jogadores</a>
+              </li>
+              <!--Dropdown Nav Item-->                
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <i class="fa-solid fa-gear" style="color: #ff5900;"></i>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="#">Tema</a></li>
+                    <li><a class="dropdown-item" href="#">Idioma</a></li>
+                  </ul>
+                </li>
+            </ul>
+            <!--Search Item-->
+            <form class="d-flex" role="search">
+              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+      </nav>
+
+      <!-- Slideshow container -->
+      <div class="slideshow-container">
+
+        <!-- Full-width images with number and caption text -->
+        <div class="mySlides fade">
+          <div class="numbertext">1 / 3</div>
+          <img src="img/lebron-james.jpg" style="width:100%">
+          <div class="text">Caption Text</div>
+        </div>
+
+        <div class="mySlides fade">
+          <div class="numbertext">2 / 3</div>
+          <img src="img/kevin-durant.jpg" style="width:100%">
+          <div class="text">Caption Two</div>
+        </div>
+
+        <div class="mySlides fade">
+          <div class="numbertext">3 / 3</div>
+          <img src="img/stephen-curry.jpg" style="width:100%">
+          <div class="text">Caption Three</div>
+        </div>
+
+        <!-- Next and previous buttons -->
+        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+        <a class="next" onclick="plusSlides(1)">&#10095;</a>
+      </div>
+      <br>
+
+      <!-- The dots/circles -->
+      <div style="text-align:center">
+        <span class="dot" onclick="currentSlide(1)"></span>
+        <span class="dot" onclick="currentSlide(2)"></span>
+        <span class="dot" onclick="currentSlide(3)"></span>
+      </div>
+
+    <script src="videos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/videos.js b/videos.js
@@ -0,0 +1,32 @@
+// Get the container element for the navbar menu
+var navbarContent = document.getElementById("navbarSupportedContent");
+
+// Get all buttons with class "nav-link" inside the navbar container
+var navbarItems = navbarContent.getElementsByClassName("nav-link");
+
+// Loop through the buttons and add the active class to the current/clicked button
+for (var i = 0; i < navbarItems.length; i++) {
+  navbarItems[i].addEventListener("click", function() {
+    // Remove the "active" class from all items
+    for (var j = 0; j < navbarItems.length; j++) {
+      navbarItems[j].classList.remove("active");
+    }
+    // Add the "active" class to the clicked item
+    this.classList.add("active");
+  });
+}
+
+let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+  slideIndex++;
+  if (slideIndex > slides.length) {slideIndex = 1}
+  slides[slideIndex-1].style.display = "block";
+  setTimeout(showSlides, 3000); // Change image every 2 seconds
+}