diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte new file mode 100644 index 0000000..d1c6db5 --- /dev/null +++ b/src/components/molecules/PostCard.svelte @@ -0,0 +1,31 @@ + + +
+
+
+
+ +
+ +
+

+ Houses of
+ France +

+
+ +
+
\ No newline at end of file diff --git a/src/style/modules/_post-card.scss b/src/style/modules/_post-card.scss new file mode 100644 index 0000000..1e41804 --- /dev/null +++ b/src/style/modules/_post-card.scss @@ -0,0 +1,88 @@ +.post-card { + width: 100%; + height: 100%; + max-width: 333px; + max-height: 222px; + background: $color-cream; + + .wrap { + display: flex; + height: 100%; + padding: 40px 20px; + } + + // Stamp + &__stamp { + position: absolute; + top: 20px; + right: 20px; + flex-shrink: 0; + + img { + display: block; + width: 100%; + height: auto; + } + + .flag { + position: absolute; + top: 10px; + left: -8px; + transform: rotate(-16deg); + width: 24px; + height: 24px; + box-shadow: 0 0 0 3px $color-cream; + border-radius: 100%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } + + // Country Title + &__country { + position: relative; + min-width: 105px; + margin-top: auto; + margin-right: 15px; + font-size: rem(20px); + color: $color-primary; + font-family: $font-serif; + line-height: 1.1; + + strong { + color: $color-secondary; + font-weight: 300; + } + } + + // Border Line + &__border { + background-color: rgba(#000, 0.2); + height: 180px; + width: 1px; + margin-top: auto; + } + + // Address + ul { + width: 60%; + margin-top: auto; + margin-left: 20px; + + li { + display: block; + border-bottom: 1px solid #D9CABD; + margin-bottom: 2px; + } + p { + color: $color-text; + font-size: rem(14px); + line-height: 1.4; + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 1b9d18f..ec59c25 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -25,6 +25,7 @@ // Modules @import "modules/globe"; +@import "modules/post-card"; // Atomic Design System diff --git a/static/images/icons/stamp.svg b/static/images/icons/stamp.svg new file mode 100644 index 0000000..2705d01 --- /dev/null +++ b/static/images/icons/stamp.svg @@ -0,0 +1,7 @@ + + + + + + +