Skip to content

Commit

Permalink
update header
Browse files Browse the repository at this point in the history
  • Loading branch information
@otaviossousa
otaviossousa committed Jul 30, 2024
1 parent 7b9fd30 commit 00ed48e
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 156 deletions.
64 changes: 44 additions & 20 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ header {
height: auto;
}

.container-header {
.container-header-1 {
display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -74,7 +74,10 @@ header {
}

.navbar-nav .nav-link {
margin-right: 60px;
margin-right: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.navbar-nav {
Expand All @@ -83,54 +86,75 @@ header {
flex-wrap: nowrap;
}

.header-main-menu-button {
display: flex;
align-items: center;
margin-right: 20px;
}

.second-container {
.container-header-2 {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}



/* Responsividade */
@media (max-width: 768px) {
.container-header {
flex-direction: row;
.container-header-1 {
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-content: center;
width: 100%;
}

.header-site-logo {
flex: 0 1 auto;
margin-bottom: 10px;
}

.search-bar {
flex: 1;
max-width: 100%;
margin: 0 10px;
margin: 0 10px 10px 10px;
}

.icons {
flex: 0 1 auto;
display: flex;
justify-content: flex-end;
justify-content: center;
margin-bottom: 10px;
}

/* Segundo container*/

.second-container {
.container-header-2 {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap; /* Garante que os itens não quebrem para uma nova linha */
justify-content: center;
flex-wrap: nowrap;
width: 100%;
}

.navbar-nav {
flex-direction: column;
align-items: center;
justify-content: center;
}

.navbar-nav .nav-link {
margin-right: 0;
margin-bottom: 10px;
}
}

@media (max-width: 480px) {
.navbar-nav .nav-link {
margin-right: 0;
margin-bottom: 5px;
font-size: 0.9rem;
}

.search-bar input {
padding-right: 30px;
}

.icons img {
width: 30px;
}
}
/* ------------------------------------------------------------< Main >--------------------------------------------------------------- */

Expand Down
89 changes: 21 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,107 +21,61 @@
</head>
<body>
<div class="header">
<!-- Cabeçalho-->
<!-- Cabeçalho -->
<header>
<!-- Primeiro Container-->
<div class="container-header grid-container">
<!-- Logo da loja-->
<!-- Primeiro Container -->
<div class="container-header-1 grid-container">
<!-- Logo da loja -->
<div class="header-site-logo">
<a href="index.html">
<img id="logo-ng-store" src="images/logo/logo-ng-store.png" alt="Logo da Loja"/>
<img id="logo-ng-store" src="images/logo/logo-ng-store.png" alt="Logo da Loja" />
</a>
</div>

<!-- Barra de Pesquisa-->
<div class="container">
<!-- Barra de Pesquisa-->
<div class="search-bar">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Digite o que você procura..." aria-label="Pesquisar" />
<img src="images/icones/icone-pesquisa.png" alt="Ícone Pesquisa" class="search-icon" />
</form>
</div>

<!-- Barra de Pesquisa -->
<div class="search-bar">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Digite o que você procura..." aria-label="Pesquisar" />
<img src="images/icones/icone-pesquisa.png" alt="Ícone Pesquisa" class="search-icon" />
</form>
</div>

<!-- Ícones (Login, Favoritos, Carrinho) -->
<div class="icons">
<div class="login-icon">
<a href="login.html">
<img src="images/icones/icone-login.png" alt="Ícone Login" />
</a>
</div>

<div class="favorites-icon">
<a href="/favoritos.html">
<img src="images/icones/icone-favoritos.png" alt="Ícone Favoritos" />
</a>
</div>

<div class="cart-icon">
<a href="/carrinho.html">
<img src="images/icones/icone-carrinho.png" alt="Ícone Carrinho" />
</a>
</div>
</div>
</div>

<!-- Segundo Container -->
<div class="grid-container second-container">
<!-- Menu de Departamentos -->
<div class="header-main-menu-button">
<button
id="btnzin"
class="btn"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBothOptions"
aria-controls="offcanvasWithBothOptions">
<img src="images/icones/icone-menu.png" alt="Ícone Menu" />
</button>
<span>DEPARTAMENTOS</span>
<div
class="offcanvas offcanvas-start"
data-bs-scroll="true"
tabindex="-1"
id="offcanvasWithBothOptions"
aria-labelledby="offcanvasWithBothOptionsLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
Backdrop with scrolling
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>
Try scrolling the rest of the page to see this option in action.
</p>
</div>
</div>
</div>

<div class="container-header-2 grid-container">
<!-- Menu de Categorias -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/dept.html">DEPARTAMENTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/categoria1.html">PROMOÇÕES</a>
</li>
Expand All @@ -143,7 +97,6 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
</nav>
</div>
</header>

</div>

<div class="main">
Expand Down
90 changes: 22 additions & 68 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,107 +21,61 @@
</head>
<body>
<div class="header">
<!-- Cabeçalho-->
<!-- Cabeçalho -->
<header>
<!-- Primeiro Container-->
<div class="container-header grid-container">
<!-- Logo da loja-->
<!-- Primeiro Container -->
<div class="container-header-1 grid-container">
<!-- Logo da loja -->
<div class="header-site-logo">
<a href="index.html">
<img id="logo-ng-store" src="images/logo/logo-ng-store.png" alt="Logo da Loja"/>
<img id="logo-ng-store" src="images/logo/logo-ng-store.png" alt="Logo da Loja" />
</a>
</div>

<!-- Barra de Pesquisa-->
<div class="container">
<!-- Barra de Pesquisa-->
<div class="search-bar">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Digite o que você procura..." aria-label="Pesquisar" />
<img src="images/icones/icone-pesquisa.png" alt="Ícone Pesquisa" class="search-icon" />
</form>
</div>

<!-- Barra de Pesquisa -->
<div class="search-bar">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Digite o que você procura..." aria-label="Pesquisar" />
<img src="images/icones/icone-pesquisa.png" alt="Ícone Pesquisa" class="search-icon" />
</form>
</div>

<!-- Ícones (Login, Favoritos, Carrinho) -->
<div class="icons">
<div class="login-icon">
<a href="login.html">
<img src="images/icones/icone-login.png" alt="Ícone Login" />
</a>
</div>

<div class="favorites-icon">
<a href="/favoritos.html">
<img src="images/icones/icone-favoritos.png" alt="Ícone Favoritos" />
</a>
</div>

<div class="cart-icon">
<a href="/carrinho.html">
<img src="images/icones/icone-carrinho.png" alt="Ícone Carrinho" />
</a>
</div>
</div>
</div>

<!-- Segundo Container -->
<div class="grid-container second-container">
<!-- Menu de Departamentos -->
<div class="header-main-menu-button">
<button
id="btnzin"
class="btn"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBothOptions"
aria-controls="offcanvasWithBothOptions">
<img src="images/icones/icone-menu.png" alt="Ícone Menu" />
</button>
<span>DEPARTAMENTOS</span>
<div
class="offcanvas offcanvas-start"
data-bs-scroll="true"
tabindex="-1"
id="offcanvasWithBothOptions"
aria-labelledby="offcanvasWithBothOptionsLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
Backdrop with scrolling
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>
Try scrolling the rest of the page to see this option in action.
</p>
</div>
</div>
</div>

<div class="container-header-2 grid-container">
<!-- Menu de Categorias -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/dept.html">DEPARTAMENTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/categoria1.html">PROMOÇÕES</a>
</li>
Expand All @@ -143,7 +97,7 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
</nav>
</div>
</header>
</div>
</div>

<div class="main">
<!-- Conteúdo -->
Expand Down

0 comments on commit 00ed48e

Please sign in to comment.