diff --git a/src/components/molecules/NotificationCart.svelte b/src/components/molecules/NotificationCart.svelte
new file mode 100644
index 0000000..b2ff7dc
--- /dev/null
+++ b/src/components/molecules/NotificationCart.svelte
@@ -0,0 +1,19 @@
+
+
+
\ No newline at end of file
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 7255664..f5bd29f 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -7,6 +7,7 @@
import CartButton from '$components/atoms/CartButton.svelte'
import PosterLayout from '$components/layouts/PosterLayout.svelte'
import Poster from '$components/molecules/Poster.svelte'
+ import NotificationCart from '$components/molecules/NotificationCart.svelte'
import EmailForm from '$components/molecules/EmailForm.svelte'
import Cart from '$components/organisms/Cart.svelte'
@@ -79,6 +80,9 @@
+
+
+
diff --git a/src/style/molecules/_notification-cart.scss b/src/style/molecules/_notification-cart.scss
new file mode 100644
index 0000000..f960639
--- /dev/null
+++ b/src/style/molecules/_notification-cart.scss
@@ -0,0 +1,60 @@
+.notification-cart {
+ display: flex;
+ background-color: #fff;
+ color: $color-gray;
+ border-radius: 6px;
+ align-items: center;
+ overflow: hidden;
+ cursor: pointer;
+
+ // Left Image
+ &__left {
+ margin-right: 20px;
+ width: 100px;
+ height: 150px;
+
+ @include bp (sm) {
+ margin-right: 24px;
+ width: 58px;
+ height: 88px;
+ }
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ // Details
+ &__right {
+ display: flex;
+ flex-direction: column;
+ margin-right: 24px;
+ justify-content: center;
+
+ // Poster Title
+ h3 {
+ font-family: $font-serif;
+ color: $color-secondary;
+ font-size: rem(20px);
+
+ @include bp (sm) {
+ font-size: rem(18px);
+ }
+ }
+ // Text
+ p {
+ font-size: rem(12px);
+ line-height: 1.4;
+ max-width: 124px;
+ margin: 4px 0;
+
+ @include bp (sm) {
+ font-size: rem(13px);
+ max-width: none;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 46dfffc..c82864d 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -105,6 +105,19 @@
border-radius: 100%;
}
}
+
+ .notifications {
+ position: absolute;
+ z-index: 100;
+ top: 72px;
+ right: 0;
+
+ & > * {
+ &:not(:last-child) {
+ margin-bottom: 8px;
+ }
+ }
+ }
}
// Intro
diff --git a/src/style/style.scss b/src/style/style.scss
index 04bfc64..d1d74b7 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -52,6 +52,7 @@
@import "molecules/issue";
@import "molecules/newsletter-form";
@import "molecules/poster";
+@import "molecules/notification-cart";
// Organisms
@import "organisms/locations";