Adicionando novos recursos

Phrdavis · web-flow · commit 7bf99d6c76ee · 2023-11-10T10:42:44.000-03:00
diff --git a/Tecnologia.js b/Tecnologia.js
@@ -0,0 +1,11 @@
+class Tecnologia{
+
+    exibeTecnologia(imagem){
+
+        var divTecnologia = document.getElementById("tecs");
+
+        divTecnologia.innerHTML += `<div class="col-md-2 text-center"><img src="images/${imagem}.png" class="mx-auto" style="height: 5em;" alt="${imagem}"></div>`
+
+    }
+
+}
diff --git a/exibeTecnologias.js b/exibeTecnologias.js
@@ -0,0 +1,15 @@
+
+var tecnologia = new Tecnologia();
+
+tecnologia.exibeTecnologia('azure');
+tecnologia.exibeTecnologia('mysql');
+tecnologia.exibeTecnologia('bootstrap logo');
+tecnologia.exibeTecnologia('css');
+tecnologia.exibeTecnologia('html');
+tecnologia.exibeTecnologia('js');
+tecnologia.exibeTecnologia('php logo');
+tecnologia.exibeTecnologia('figma');
+tecnologia.exibeTecnologia('gimp');
+tecnologia.exibeTecnologia('java');
+tecnologia.exibeTecnologia('python');
+tecnologia.exibeTecnologia('vscode');
diff --git a/index.html b/index.html
@@ -308,55 +308,10 @@ <h1 class="text-warning"  data-anime= "up"><strong>Tecnologias</strong></h1>
             </div>
             <!-- Carrosel de Tecnologias -->
             <div data-anime= "up" class="d-flex justify-content-center align-items-center bg-secondary-subtle" style="width: 99vw;">
-                <div class="py-5 row g-3 gy-5 justify-content-center align-items-center" data-anime= "up">
-                    <!-- Azure Data Studio -->
-                      
-                    <div class="col-md-2 text-center"><img src="images/azure.png" class="mx-auto" style="height: 5em;" alt="Azure Data Studio"></div>
-                    
-                    <!-- MySQL -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/mysql.png" class="mx-auto" style="height: 5em;" alt="MySQL"></div>
-                    
-                    <!-- Bootstrap -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/bootstrap logo.png" class="mx-auto" style="height: 5em;" alt="Bootstrap"></div>
-                    
-                    <!-- CSS -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/css.png" class="mx-auto" style="height: 5em;" alt="CSS"></div>
-                    
-                    <!-- HTML -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/html.png" class="mx-auto" style="height: 5em;" alt="HTML"></div>
-                    
-                    <!-- Java Script -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/js.png" class="mx-auto" style="height: 5em;" alt="JavaScript"></div>
-                    
-                    <!-- PHP -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/php logo.png" class="mx-auto" style="height: 5em;" alt="PHP"></div>
-                    
-                    <!-- Figma -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/figma.png" class="mx-auto" style="height: 5em;" alt="Figma"></div>
-                    
-                    <!-- Gimp -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/gimp.png" class="mx-auto" style="height: 5em;" alt="Gimp"></div>
-                    
-                    <!-- Java -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/java.png" class="mx-auto" style="height: 5em;" alt="Java"></div>
-                    
-                    <!-- Python -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/python.png" class="mx-auto" style="height: 5em;" alt="Python"></div>
-                    
-                    <!-- Visual Studio Code -->
-                    
-                    <div class="col-md-2 text-center"><img src="images/vscode.png" class="mx-auto" style="height: 5em;" alt="Visual Studio Code"></div>
-                      
+                <div class="py-5 row g-3 gy-5 justify-content-center align-items-center" id="tecs" data-anime= "up">
+
+                    <!-- Espaço destinado as tecnologias inseridas via script -->
+
                 </div>
             </div>
         </div>
@@ -768,6 +723,9 @@ <h2 class="text-warning fs-4 text-center text-lg-start mt-5">
 
     <script src="Projeto.js"></script>
     <script src="exibeProjetos.js"></script>
+    
+    <script src="Tecnologia.js"></script>
+    <script src="exibeTecnologias.js"></script>
 
 
     <!-- Script Bootstrap -->
