Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@chertik77
chertik77 committed Oct 1, 2023
1 parent ad47db4 commit 8d4e7b1
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 110 deletions.
16 changes: 10 additions & 6 deletions src/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
column-gap: 8px;
}

.header-logo {
fill: var(--secondary-brand-color);
}

.header-logo-link {
font-weight: 700;
text-transform: uppercase;
Expand All @@ -32,6 +36,7 @@
}

.header-burger-btn {
display: flex;
margin-left: auto;
}

Expand All @@ -47,11 +52,8 @@
background-color: var(--primary-brand-color);
}

.header-modal-nav {
margin-top: 124px;
}

.header-modal-nav-list {
margin-top: 124px;
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -62,8 +64,8 @@
color: var(--primary-color);
}

.header-modal-cart {
fill: var(--primary-color);
.header-modal-icon-cart {
fill: none;
stroke: var(--primary-color);
}

Expand All @@ -83,6 +85,8 @@
}

.header-cart-btn {
fill: none;
stroke: var(--secondary-text-color);
display: block;
margin-left: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion src/img/icons.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Welcome to VeggieBoost - Your Source for Fresh, Healthy Vegetables"
content="Welcome to VeggieBoost - Your Source for Fresh, Healthy Vegetables!"
/>
<title>VeggieBoost</title>
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
Expand Down
1 change: 1 addition & 0 deletions src/js/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ function onHeaderBurgerBtnClick(e) {
disablePageScroll();
headerBurgerIcon.style.display = 'none';
headerCloseIcon.style.display = 'block';
headerCloseIcon.style.stroke = 'var(--secondary-brand-color)';
} else {
if (
e.target.classList.contains('header-modal-container') ||
Expand Down
99 changes: 8 additions & 91 deletions src/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,79 +14,28 @@
</ul>
</nav>
<div class="header-logo-wrapper">
<svg width="16" height="16">
<svg width="16" height="16" class="header-logo">
<use href="./img/icons.svg#icon-logo"></use>
</svg>
<a href="./index.html" class="header-logo-link">veggieboost</a>
</div>
<button class="header-cart-btn">
<svg
class="header-icon-cart"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z"
fill="#141414"
stroke="#141414"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z"
fill="#141414"
stroke="#141414"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6"
fill="none"
stroke="#141414"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
/>
<svg class="header-icon-cart" width="20" height="20">
<use href="./img/icons.svg#icon-cart"></use>
</svg>
</button>
<button class="header-burger-btn">
<svg class="js-header-burger-icon" width="24" height="24">
<use href="./img/icons.svg#icon-burger"></use>
</svg>
</button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
class="js-header-icon-close"
>
<path
d="M18 6L6 18"
stroke="#77AC63"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 6L18 18"
stroke="#77AC63"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<svg class="js-header-icon-close" width="24" height="24">
<use href="./img/icons.svg#icon-close"></use>
</svg>
</div>
</header>
<dialog id="js-header-modal" class="header-burger-modal">
<div class="header-modal-container">
<nav class="header-modal-nav"></nav>
<ul class="header-modal-nav-list">
<li>
<a href="" class="header-modal-nav-list-link">How It Works</a>
Expand All @@ -98,41 +47,9 @@
<a href="" class="header-modal-nav-list-link">Contacts</a>
</li>
<li>
<a href="">
<svg
class="header-modal-cart"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z"
fill="rgb(255, 255, 255)"
stroke="rgb(255, 255, 255)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z"
fill="rgb(255, 255, 255)"
stroke="rgb(255, 255, 255)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6"
fill="none"
stroke="rgb(255, 255, 255)"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<svg class="header-modal-icon-cart" width="20" height="20">
<use href="./img/icons.svg#icon-cart"></use>
</svg>
</li>
</ul>
</div>
Expand Down
12 changes: 1 addition & 11 deletions src/public/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8d4e7b1

Please sign in to comment.