adicionando footer-navigation para celular

ifpi-picos · Jul 27, 2024 · 180cb6e · 180cb6e
1 parent 1adc45c
commit 180cb6e
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <link rel="stylesheet" href="src/css/styles.css">
     <title>Sidebar</title>
 </head>
@@ -24,16 +25,7 @@
             </div>
 
             <ul id="side_items">
-
-                <li class="side-item">
-                    <a href="#">
-                        <i class="fa-solid fa-user"></i>
-                        <span class="item-description">
-                            Usuários
-                        </span>
-                    </a>
-                </li>
-
+
                 <li class="side-item">
                     <a href="#">
                         <i class="fa-solid fa-bell"></i>
@@ -91,7 +83,7 @@
             <h1><span>U</span>GYM</h1>
             <div class="search-container">
                 <label for="search-input" class="search-icon"></label>
-                <input type="text" class="search-input" id="search-input" required />
+                <input type="text" class="search-input" id="search-input" placeholder="Barra de pesquisa" required />
             </div>
         </header>
 
@@ -154,6 +146,44 @@ <h2>NOSSOS <span>SERVIÇOS</span></h2>
             </div>
         </section>
 
+        <div class="navegacao">
+
+            <ul>
+                <li class="lista">
+                    <a href="#">
+                        <span class="icone"><i class="bi bi-person-fill"></i></span>
+                        <span class="texto">Perfil</span>
+                    </a>
+                </li>
+                <li class="lista">
+                    <a href="#">
+                        <span class="icone"><i class="bi bi-cart-fill"></i></span>
+                        <span class="texto">Carrinho</span>
+                    </a>
+                </li>
+                <li class="lista ativo">
+                    <a href="#">
+                        <span class="icone"><i class="bi bi-house-door-fill"></i></span>
+                        <span class="texto">Início</span>
+                    </a>
+                </li>
+
+                <li class="lista">
+                    <a href="#">
+                        <span class="icone">  <i class="fa-solid fa-chart-line"></i></span>
+                        <span class="texto">Evolução</span>
+                    </a>
+                </li>
+
+                <li class="lista">
+                    <a href="#">
+                        <span class="icone"><i class="fa-solid fa-gear"></i></span>
+                        <span class="texto">Config.</span>
+                    </a>
+                </li>
+                <div class="indicador"></div>
+            </ul>
+        </div><!--navegacao-->
 
     </main>
     <script src="src/javascript/script.js"></script>

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -24,17 +24,13 @@ hr{
 }
 
 /* Estilos do Conteúdo Principal */
-main {
-    padding: 20px;
-    z-index: 1;
-    padding-left: calc(82px + 20px);
-}
+
 
 /* Estilizando o span dentro da tag h1 em main */
 header{
     display: flex;
     font-size: 1.3rem;
-    margin-left: 8px;
+    margin-left: 120px;
 }
 header h1 span {
     color: red;
@@ -84,11 +80,13 @@ header h1 span {
     outline: none;
     padding-left: 40px;
     transition: all 0.7s;
+    border: solid 1px red;
 }
 
 .search-input:focus {
     width: 250px;
     box-shadow: 2px 2px 5px #777;
+    border: solid 1px red;
 }
 
 .search-input:valid {
@@ -271,7 +269,8 @@ header h1 span {
 
 /* Estilizando a seção do slider */
 section.slider {
-    width: 100%;
+    margin-left: 9%;
+    width: 90%;
     height: auto;
     padding: 0 !important;
     overflow: hidden;
@@ -345,8 +344,12 @@ section.slider {
 #radio1:checked ~ .nav-auto .auto-btn1,
 #radio2:checked ~ .nav-auto .auto-btn2,
 #radio3:checked ~ .nav-auto .auto-btn3 {
+
     background-color: red;
 }
+.auto-btn1, .auto-btn2, .auto-btn3, .manual-btn{
+    margin-right: 10%;
+}
 
 /* Estilizando o primeiro slide quando o radio1 está marcado */
 #radio1:checked ~ .primeiro {
@@ -362,7 +365,9 @@ section.slider {
 #radio3:checked ~ .primeiro {
     margin-left: -50%;
 }
-
+.services{
+    padding-left: 6%;
+}
 .services h2{
     text-align: center;
     margin-top: 10%;
@@ -383,10 +388,9 @@ section.slider {
 }
 .feature{
     border-radius: 29px 29px 141px 29px;
-    -webkit-border-radius: 29px 29px 141px 29px;
-    -moz-border-radius: 29px 29px 141px 29px;
+    -webkit-border-radius: 29px 29px 141px 19px;
+    -moz-border-radius: 29px 29px 141px 19px;
     border: 3px solid #ff0000;
-
     height: 80px;
     width: 80px;
 }
@@ -409,6 +413,95 @@ section.slider {
     transition: 1.3s;
 }
 
+.navegacao{
+    bottom: 0;
+    width: 100%;
+    height: 70px;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    display: none;
+}
+
+.navegacao ul{
+    width: 350px;
+    display: flex;
+}
+
+.navegacao ul li{
+    width: 70px;
+    height: 70px;
+    list-style-type: none;
+    position: relative;
+    z-index: 1;
+}
+
+.navegacao ul li a{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-decoration: none;
+    position: relative;
+}
+
+.navegacao ul li a .icone{
+    display: block;
+    line-height: 75px;
+    font-size: 20px;
+    color: #282828;
+    position: relative;
+    transition: .5s;
+}
+
+.navegacao ul li a .texto{
+    color: #282828;
+    position: absolute;
+    opacity: 0;
+    transition: .5s;
+    transform: translateY(20px);
+}
+
+.navegacao ul li.ativo a .icone{
+    transform: translateY(-35px);
+    color: red;
+}
+
+.navegacao ul li.ativo a .texto{
+    opacity: 1;
+    transform: translateY(10px);
+}
+
+.indicador{
+    width: 70px;
+    height: 70px;
+    background-color: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: -50%;
+    transition: .5s;
+}
+
+.navegacao ul li:nth-child(1).ativo ~ .indicador{
+    transform: translateX(calc(70px * 0));
+}
+.navegacao ul li:nth-child(2).ativo ~ .indicador{
+    transform: translateX(calc(70px * 1));
+}
+.navegacao ul li:nth-child(3).ativo ~ .indicador{
+    transform: translateX(calc(70px * 2));
+}
+.navegacao ul li:nth-child(4).ativo ~ .indicador{
+    transform: translateX(calc(70px * 3));
+}
+.navegacao ul li:nth-child(5).ativo ~ .indicador{
+    transform: translateX(calc(70px * 4));
+}
+
+
 
 /* Media query para telas com largura máxima de 900px */
 @media screen and (max-width: 900px) {
@@ -426,15 +519,32 @@ section.slider {
     .img-mobile {
         display: block;
     }
+    section.slider {
+        margin-left: 5%;
+    }
+    .main {
+        padding: 20px;
+        z-index: 1;
+        padding-left: calc(82px + 20px);
 
+    }
+    header{
+        margin-left: 25px;
+    }
     /* Ajustando a margem superior para os botões de navegação */
     .nav-auto,
     .nav-manual {
-        margin-top: 50%;
+        margin-top: 60%;
+
     }
-    .services h2{
+    .auto-btn3, .auto-btn2, .auto-btn1, .manual-btn{
+        margin-right: 5%;
+    }
+    .services h2 {
         margin-top: 20%;
+        text-align: center;
     }
+
     .features {
         display: flex; /* Exibe os itens em linha */
         flex-wrap: wrap; /* Permite que os itens sejam quebrados em várias linhas */
@@ -454,4 +564,17 @@ section.slider {
         width: 200px;
         box-shadow: 2px 2px 5px #777;
     }
+    #sidebar{
+        display: none;
+    }
+    .navegacao{
+        display: flex;
+        position: fixed;
+        bottom: 0;
+        width: 100%; /* Para garantir que a navegação ocupe toda a largura da tela */
+        background-color: #fff; /* Adicione um fundo para garantir que o conteúdo abaixo não seja visível */
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Opcional: Adicione uma sombra para destacar a navegação */
+        z-index: 1000; /* Para garantir que a navegação fique acima de outros elementos */
+
+    }
 }
diff --git a/src/javascript/script.js b/src/javascript/script.js
@@ -23,3 +23,15 @@ function proximaImg(){
 }
 
 
+const lista = document.querySelectorAll('.lista')
+
+function ativaLink(){
+    for(let i of lista){
+        i.classList.remove('ativo')
+    }
+    this.classList.add('ativo')
+}
+
+for(let i of lista){
+    i.addEventListener('click', ativaLink)
+}