Create Post Card component
This commit is contained in:
88
src/style/modules/_post-card.scss
Normal file
88
src/style/modules/_post-card.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@
|
||||
|
||||
// Modules
|
||||
@import "modules/globe";
|
||||
@import "modules/post-card";
|
||||
|
||||
|
||||
// Atomic Design System
|
||||
|
||||
Reference in New Issue
Block a user