1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-24 03:06:22 +02:00
Files
csslayout/styles/blocks/_css-scan.scss
Phuoc Nguyen 80d924aeaf feat: Banner
2022-09-22 10:19:48 +07:00

83 lines
1.4 KiB
SCSS

.cssscan {
-webkit-font-smoothing: antialiased;
color: #000;
text-decoration: none;
display: block;
}
.cssscan__inner {
background: #c2fbd7;
border-radius: 0.5rem;
padding: 2rem;
position: relative;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
cursor: pointer;
text-align: left;
}
.cssscan__title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
}
.cssscan__desc {
opacity: 0.8;
color: #333;
margin-top: 1em;
margin-bottom: 1em;
}
.cssscan__more {
margin: 0;
margin-top: 2em;
}
.cssscan__image {
position: absolute;
transform: rotate(-7deg);
transition: all 0.3s;
top: 14%;
right: -37%;
width: 95%;
height: 95%;
}
.cssscan__inner:hover {
.cssscan__more {
text-decoration: underline;
}
.cssscan__image {
transform: scale(1.1) rotate(-7deg);
top: 10%;
right: -35%;
}
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
.cssscan {
padding: 0;
}
.cssscan__inner {
margin-top: 2rem;
}
.cssscan__image {
top: initial;
bottom: -14%;
width: 45%;
height: 45%;
right: -5%;
}
.cssscan__inner:hover .cssscan__image {
top: initial;
bottom: -10%;
right: -5%;
transform: scale(1.1) rotate(-7deg);
}
}