🎨 styles: home banner (in progress)

:%s
This commit is contained in:
lytrankieio123
2021-08-25 18:54:48 +07:00
parent 307434d3a7
commit d345020e6e
8 changed files with 66 additions and 14 deletions

View File

@@ -0,0 +1,42 @@
@import "../../../../styles/utilities";
.homeBanner {
.left {
@apply hidden;
}
@screen md {
@apply grid;
grid-template-columns: 2fr 4fr;
.left {
@apply flex items-end justify-center custom-border-radius-lg;
background: pink;
margin-right: 1.6rem;
// background-image: url('./assets/home_banner.png');
// background-image: url('https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png');
// background-repeat: no-repeat;
.text {
@apply relative font-heading text-center;
padding-bottom: 4.8rem;
width: min-content;
color: var(--white);
font-size: 8.8rem;
line-height: 8rem;
letter-spacing: -0.03em;
font-weight: bold;
text-transform: uppercase;
&::after {
@apply absolute;
content: "";
top: -4rem;
right: -1.6rem;
width: 5.7rem;
height: 4.7rem;
background-image: url("./assets/text-decorative.svg");
background-repeat: no-repeat;
}
}
}
}
}