V3.0

mauricio-tonny · Feb 23, 2024 · 73900fa · 73900fa
1 parent 4fa08ce
commit 73900fa
Show file tree

Hide file tree

Showing 26 changed files with 20,074 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
 # oficinadodev.com.br
 
-Site principal OFICINADODEV, dele direciona para os tutoriais e repositório oficial do GitHub.
+Site principal OFICINADODEV, desenvolvido para direcionar o usuário para os tutoriais de usabilidade das plataformas: WordPress, WooCommerce, Magento 1 e Magento 2.
 
-Desenvolvido em HTML + CSS + BootStrap + JavaScript
+Site apresenta os principais cursos e certificações que realizei no decorrer do tempo e também serve de ferramenta para constante aprendizado, você pode ver os detalhes de cada versão na página de releases ou clicando <a href="https://github.com/mauricio-tonny/oficinadodev.com.br/releases">aqui</a>.
+
+## Detalhes do projeto:
+
+Desenvolvido em HTML + CSS + BootStrap + JavaScript
+
+<hr>
diff --git a/css/style.css b/css/style.css
@@ -2,7 +2,7 @@
 
 /*
 
-Version : 1.5
+Version : 3.0
 Author  : github.com/mauricio-tonny
 
 */
@@ -27,9 +27,14 @@ Author  : github.com/mauricio-tonny
 /* GLOBAL
 ----------------------*/
 
+@font-face {
+    font-family: 'Mauricio';
+    src: url('../fonts/Skyfall-Regular.woff') format('woff');        
+}
+
 body {
     font-family: 'Rubik', sans-serif, FontAwesome;
-    position: relative;
+    position: relative;   
 }
 
 a {
@@ -209,9 +214,14 @@ p.lead {
 
 /* MEGAMENU
 ----------------------*/
-
+.fa-code {
+    font-size: 2.0rem;
+}
 .img-fluid.logo {
-    max-width: 85%;
+    /* max-width: 85%; */
+    font-family: 'Mauricio';
+    font-size: 1.8rem;
+
 }
 .nav-menu {
     padding: 1rem 0;
@@ -467,6 +477,21 @@ header {
     border-color: #194756 #faf6fb #FFF;
     color: #194756;
 }
+.section#parceiros {
+    padding: 40px 0 20px;
+}
+
+.parceiros {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+}
+.img-parceiros {
+    width: 150px;
+    height: 150px;
+}
 
 
 /*  QUEM SOU

diff --git a/fonts/Skyfall-Regular.eot b/fonts/Skyfall-Regular.eot
diff --git a/fonts/Skyfall-Regular.svg b/fonts/Skyfall-Regular.svg
diff --git a/fonts/Skyfall-Regular.woff b/fonts/Skyfall-Regular.woff
diff --git a/fonts/webfonts_Skyfall-Regular.zip b/fonts/webfonts_Skyfall-Regular.zip
diff --git a/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.eot b/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.eot
diff --git a/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.svg b/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.svg
diff --git a/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.woff b/fonts/webfonts_Skyfall-Regular/Skyfall-Regular.ttf.woff
diff --git a/fonts/webfonts_Skyfall-Regular/example.html b/fonts/webfonts_Skyfall-Regular/example.html
diff --git a/fonts/webfonts_Skyfall-Regular/images/bgtile.gif b/fonts/webfonts_Skyfall-Regular/images/bgtile.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/button.gif b/fonts/webfonts_Skyfall-Regular/images/button.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/fontboxbottom.gif b/fonts/webfonts_Skyfall-Regular/images/fontboxbottom.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/fontboxtile.gif b/fonts/webfonts_Skyfall-Regular/images/fontboxtile.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/fontboxtop.gif b/fonts/webfonts_Skyfall-Regular/images/fontboxtop.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/foot.gif b/fonts/webfonts_Skyfall-Regular/images/foot.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/foottile.gif b/fonts/webfonts_Skyfall-Regular/images/foottile.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/free.gif b/fonts/webfonts_Skyfall-Regular/images/free.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/headertile.gif b/fonts/webfonts_Skyfall-Regular/images/headertile.gif
diff --git a/fonts/webfonts_Skyfall-Regular/images/logo.gif b/fonts/webfonts_Skyfall-Regular/images/logo.gif
diff --git a/fonts/webfonts_Skyfall-Regular/install-a-webfont.txt b/fonts/webfonts_Skyfall-Regular/install-a-webfont.txt
@@ -0,0 +1,24 @@
+Installing Webfonts
+
+1. Upload the files from this zip to your domain.
+2. Add this code to your website:
+
+@font-face {
+    font-family: 'Skyfall-Regular';
+    src:url('Skyfall-Regular.ttf.woff') format('woff'),
+        url('Skyfall-Regular.ttf.svg#Skyfall-Regular') format('svg'),
+        url('Skyfall-Regular.ttf.eot'),
+        url('Skyfall-Regular.ttf.eot?#iefix') format('embedded-opentype'); 
+    font-weight: normal;
+    font-style: normal;
+}
+3. Integrate the fonts into your CSS:
+Add the font name to your CSS styles. For example:
+
+h1 { 
+   font-family: 'Skyfall-Regular';
+}  
+
+Troubleshooting Webfonts
+1. You may be using the fonts on different domain or subdomain.
+2. Check if you have link the fonts properly in the CSS.
diff --git a/fonts/webfonts_Skyfall-Regular/webfonts.ffonts.net.htm b/fonts/webfonts_Skyfall-Regular/webfonts.ffonts.net.htm
@@ -0,0 +1,21 @@
+<HTML>
+<HEAD>
+<TITLE>Webfonts www.FFonts.net - Redirect</TITLE>
+<meta http-equiv="refresh" content="1;url=http://webfonts.ffonts.net">
+<script language="javascript">
+<!-- 
+//location.replace("http://webfonts.ffonts.net");
+-->
+</script>
+</HEAD>
+
+<BODY>
+<CENTER>
+
+<FONT FACE="Arial, Sans Serif, Verdana" SIZE=6>If this page does not automatically redirect you, click below to go to the Webfonts FFonts homepage</FONT>
+<BR><BR>
+<FONT FACE="Arial, Sans Serif, Verdana" SIZE=6><A HREF="http://webfonts.ffonts.net" TARGET="_top">http://webfonts.ffonts.net</A></FONT>
+
+</CENTER>
+</BODY>
+</HTML>
diff --git a/fonts/webfonts_Skyfall-Regular/webfonts.ffonts.net.txt b/fonts/webfonts_Skyfall-Regular/webfonts.ffonts.net.txt
@@ -0,0 +1,10 @@
+Download Webfonts from webfonts.ffonts.net:
+
+
+
+http://www.ffonts.net
+
+
+
+
+Free WebFonts for your website
diff --git a/images/scrum-logo.png b/images/scrum-logo.png
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!doctype html>
-<html lang="pt">
+<!DOCTYPE HTML>
+<html lang="pt-br">
 <!--
 
-Author  : github.com/mauricio-tonny
+Author: github.com/mauricio-tonny
 
  -->
 
@@ -32,8 +32,8 @@
     <script src="js/owl.carousel.min.js"></script>
     <script src="js/script.js"></script>
     <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>   
-
+    <script src="js/bootstrap.bundle.min.js"></script>    
+    
     <!-- Google tag (gtag.js) Mauricio -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-THXSR1J6PF"></script>
     <script>
@@ -55,8 +55,8 @@
                 <div class="col-md-12">
                     <nav class="navbar navbar-dark navbar-expand-lg" role="navigation">
                         <!-- logo -->
-                        <a class="navbar-brand" href="index.html" title="OficinaDoDEV - sua oficina de desenvolvimento">
-                            <img src="images/logo_oficinadodev.png" width="240" height="65" class="img-fluid logo" alt="logo">
+                        <a class="navbar-brand" href="index.html" title="OficinaDoDEV - Oficina de Desenvolvimento">
+                            <span class="fa-code mr-2"></span><span class="img-fluid logo" alt="logo">Oficina do DEV</span>                            
                         </a>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menu de navegação">
                             <span class="navbar-toggler-icon"></span>
@@ -67,7 +67,7 @@
                                 <li class="nav-item"><a class="nav-link" href="#tutoriais">TUTORIAIS</a></li>
                                 <li class="nav-item"><a class="nav-link" href="#sobre">QUEM SOU EU</a></li>
                                 <li class="nav-item"><a class="nav-link" href="#fazemos">O QUE FAÇO</a></li>
-                                <li class="nav-item"><a class="nav-link" href="#cursos">CURSOS</a></li>
+                                <li class="nav-item"><a class="nav-link" href="#cursos">CURSOS</a></li>                                
                                 <li class="nav-item"><a class="nav-link" href="#contact">CONTATO</a></li>
                                 <li class="nav-item">
                                     <a href="https://api.whatsapp.com/send?phone=5543999562536&text=Ol%C3%A1,%20(OficinaDoDEV)" target="_blank" class="btn btn-outline-light my-3 my-sm-0 ml-lg-3">Falar no WhatsApp</a>
@@ -84,7 +84,7 @@
     <header class="bg-gradient" id="home">
         <div class="container mt-5">
             <h1>Bem vindo à Oficina do DEV !</h1>
-            <p class="tagline">Criado e mantido por: Mauricio Silva. </p>
+            <p class="tagline">Criado e mantido por: Mauricio Silva. </p>            
         </div>
         <div class="img-holder mt-3">
             <img src="images/background_hd650.png" width="650" height="433" alt="Imagem de fundo da Oficina do DEV" class="img-fluid">
@@ -360,7 +360,7 @@ <h2>O que seria suporte?</h2>
                     <div class="AboutDescription">
                         <p class="zz_5 mt-4 mb-2">Customer Experience Management</p>
                         <p class="blockquote">Abreviado pela sigla CXM, é a gestão do Customer Experience (CX) que, por sua vez, consiste na experiência que um cliente tem com determinada marca ou produto.</p>
-                        <p class="blockquote">É uma metodologia estratégica que tem por objetivo implantar e otimizar o Customer Experience nas empresas. A gestão experiência do cliente compreende que CX deve ser monitorado de perto. Para isso, porém, você precisa lidar com dados, métricas e pesquisas que ajudem a entender em quais pontos é possível melhorar, onde estão as falhas e como você pode tornar o seu cliente ainda mais feliz e cativo. </p>                        
+                        <p class="blockquote">É uma metodologia estratégica que tem por objetivo implantar e otimizar o Customer Experience nas empresas. A gestão experiência do cliente compreende que CX deve ser monitorado de perto. Lidar com dados, métricas e pesquisas que ajudem a entender em quais pontos é possível melhorar. </p>                        
                     </div>
                     <div class="AboutPicture">
                         <img src="images/fiap-logo.png" width="150" height="150" alt="FIAP" class="client-img">
@@ -394,7 +394,7 @@ <h2>O que seria suporte?</h2>
                         $('.testimonials').owlCarousel({
                             loop: true,
                             margin: 10,
-                            responsiveClass: true,
+                            responsiveClass: false,
                             autoplay: true, // Ativar autoplay
                             autoplayTimeout: 6000, // Tempo de espera entre slides (em milissegundos)
                             autoplayHoverPause: false, // Pausar quando mouse em cima
@@ -429,6 +429,8 @@ <h2>O que seria suporte?</h2>
     </div>
     <!-- // end .section -->
 
+
+
     <div class="light-bg py-5" id="contact">
         <div class="container">
             <div class="row">
@@ -441,31 +443,43 @@ <h2>O que seria suporte?</h2>
                     </div>
                     <div class="d-block d-sm-inline-block">
                         <p class="mb-0">
-                            <span class="fa-whatsapp mr-2"></span> <a href="https://api.whatsapp.com/send?phone=5543999562536&text=Ol%C3%A1,%20(OficinaDoDEV)" target="_blank">(43) 9 9956-2536</a>
+                            <span class="fa-whatsapp mr-2"></span> <a href="https://api.whatsapp.com/send?phone=5543999562536&text=Ol%C3%A1,%20(OficinaDoDEV)" target="_blank" title="Continuar no WhatsApp">(43) 9 9956-2536</a>
                         </p>
                     </div>
 
                 </div>
                 <div class="col-lg-6">
                     <div class="social-icons">
-                        <a aria-label="Facebook" href="https://www.facebook.com/mauricio.tonny/" target="_blank"><span class="ti-facebook"></span></a>
-                        <a aria-label="Instagram" href="https://www.instagram.com/mauricio.tonny/" target="_blank"><span class="ti-instagram"></span></a>
-                        <a aria-label="Linkein" href="https://www.linkedin.com/in/mauriciotonny-silva/" target="_blank"><span class="ti-linkedin"></span></a>
-                        <a aria-label="GitHub" href="https://github.com/mauricio-tonny" target="_blank"><span class="ti-github"></span></a>
+                        <a aria-label="Facebook" href="https://www.facebook.com/mauricio.tonny/" target="_blank" title="Facebook"><span class="fa-facebook"></span></a>
+                        <a aria-label="Instagram" href="https://www.instagram.com/mauricio.tonny/" target="_blank" title="Instagram"><span class="fa-instagram"></span></a>
+                        <a aria-label="Linkein" href="https://www.linkedin.com/in/mauriciotonny-silva/" target="_blank" title="LinkedIn"><span class="fa-linkedin"></span></a>
+                        <a aria-label="Duolingo" href="https://www.duolingo.com/profile/mauriciotonny" target="_blank" title="Duolingo"><span class="fa-comments"></span></a>
+                        <a aria-label="GitHub" href="https://github.com/mauricio-tonny" target="_blank" title="GitHub"><span class="fa-github"></span></a>                        
                     </div>
                 </div>
             </div>
 
         </div>
 
     </div>
-    <!-- // end .section -->
+    <!-- // end .section -->   
+
     <footer class="my-footer text-center">
         <!-- Copyright -->
         <p class="mb-2"><small>TODOS OS DIREITOS RESERVADOS ©</small></p>
         <p class="mb-2"><small>DESENVOLVIDO POR <a href="https://github.com/mauricio-tonny" target="_blank" >MAURICIO SILVA</a></small></p>
-        <p class="mb-2 zz_version"><a href="https://github.com/mauricio-tonny/oficinadodev.com.br/releases" target="_blank"><span>Versão: 2.9</span></a></p>
-    </footer>
+        <p class="mb-2 zz_version">
+            <a id="meuLink" href="https://github.com/mauricio-tonny/oficinadodev.com.br/releases" target="_blank">
+                <span id="meuSpan">Versão: V3.0</span>
+            </a>
+        </p>
+    </footer>    
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            atualizarLink();
+        });
+    </script>
 
     <!-- jQuery and Bootstrap -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

diff --git a/js/script.js b/js/script.js
@@ -1,11 +1,7 @@
 /*
 
-Style   : MobApp Script JS
-Version : 1.0
-Author  : Surjith S M
-URI     : https://surjithctly.in/
-
-Copyright © All rights Reserved 
+Version : 3.0
+Author  : github.com/mauricio-tonny
 
 */
 
@@ -109,4 +105,27 @@ $(function() {
         });
     }
 
-}); /* End Fn */
+}); /* End Fn */
+
+function atualizarLink() {
+    // Selecione o elemento <span>
+    var meuSpan = document.getElementById('meuSpan');
+
+    // Adicione um evento de clique ao <span>
+    meuSpan.addEventListener('click', function(event) {
+        // Evite o comportamento padrão do link
+        event.preventDefault();
+
+        // Obtenha o conteúdo do <span> (por exemplo, "Versão: V3.0")
+        var conteudoDoSpan = this.textContent;
+
+        // Remova "Versão: " e obtenha apenas a versão (por exemplo, "V3.0")
+        var versao = conteudoDoSpan.replace('Versão: ', '');
+
+        // Construa a URL com a versão
+        var novaURL = "https://github.com/mauricio-tonny/oficinadodev.com.br/releases/" + versao;
+
+        // Abra a nova URL em uma nova aba
+        window.open(novaURL, '_blank');
+    });
+}