diff --git a/src/components/Cart/CartIcon.js b/src/components/Cart/CartIcon.js
new file mode 100644
index 0000000..5ee5e19
--- /dev/null
+++ b/src/components/Cart/CartIcon.js
@@ -0,0 +1,15 @@
+
+const CartIcon = () => {
+ return (
+
+ );
+};
+
+
+export default CartIcon;
\ No newline at end of file
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 0dd9e12..fdd661e 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -1,20 +1,21 @@
-import React from 'react';
+import React from "react";
-import mealsImage from '../../assets/meals.jpg';
-import classes from './Header.module.css';
+import mealsImage from "../../assets/meals.jpg";
+import classes from "./Header.module.css";
+import HeaderCartButton from "./HeaderCartButton";
const Header = () => {
-
- return <>
-
-
-
-
+ return (
+ <>
+
+
+
+
>
+ );
};
-
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/Layout/HeaderCartButton.js b/src/components/Layout/HeaderCartButton.js
new file mode 100644
index 0000000..adf6271
--- /dev/null
+++ b/src/components/Layout/HeaderCartButton.js
@@ -0,0 +1,16 @@
+import CartIcon from "../Cart/CartIcon";
+import classes from "./HeaderCartButton.module.css";
+
+const HeaderCartButton = (props) => {
+ return (
+
+ );
+};
+
+export default HeaderCartButton;
diff --git a/src/components/Layout/HeaderCartButton.module.css b/src/components/Layout/HeaderCartButton.module.css
new file mode 100644
index 0000000..61698b5
--- /dev/null
+++ b/src/components/Layout/HeaderCartButton.module.css
@@ -0,0 +1,60 @@
+.button {
+ cursor: pointer;
+ font: inherit;
+ border: none;
+ background-color: #4d1601;
+ color: white;
+ padding: 0.75rem 3rem;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ border-radius: 25px;
+ font-weight: bold;
+ margin-right: 20%;
+}
+
+.button:hover,
+.button:active {
+ background-color: #2c0d00;
+}
+
+.icon {
+ width: 1.35rem;
+ height: 1.35rem;
+ margin-right: 0.5rem;
+}
+
+.badge {
+ background-color: #b94517;
+ padding: 0.25rem 1rem;
+ border-radius: 25px;
+ margin-left: 1rem;
+ font-weight: bold;
+}
+
+.button:hover .badge,
+.button:active .badge {
+ background-color: #92320c;
+}
+
+.bump {
+ animation: bump 300ms ease-out;
+}
+
+@keyframes bump {
+ 0% {
+ transform: scale(1);
+ }
+ 10% {
+ transform: scale(0.9);
+ }
+ 30% {
+ transform: scale(1.1);
+ }
+ 50% {
+ transform: scale(1.15);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
\ No newline at end of file