Created
March 11, 2019 18:32
-
-
Save pelid/482ac10ea09cb24bd5687ec26fd70cf8 to your computer and use it in GitHub Desktop.
Пример верстки
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.module-card { | |
position: relative; | |
width: calc(50% - 15px); | |
padding-top: 36px; | |
padding-right: 36px; | |
padding-left: 36px; | |
padding-bottom: 36px; | |
background: #fff; | |
border-radius: 8px; | |
margin-bottom: 30px; | |
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); | |
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); | |
@include media-breakpoint-down(md) { | |
width: 100%; | |
margin-left: 0; | |
} | |
@include media-breakpoint-down(xs) { | |
padding: 24px; | |
margin-bottom: 20px; | |
} | |
&:nth-last-child(2), &:nth-last-child(1) { | |
margin-bottom: 0; | |
} | |
@include media-breakpoint-down(xs) { | |
&:nth-last-child(2) { | |
margin-bottom: 20px; | |
} | |
} | |
&._green { | |
background: $light_green; | |
} | |
&._yellow { | |
background: $light_yellow; | |
} | |
&._highlighted { | |
box-shadow: 0px 0px 10px 0px rgba(138, 245, 0, 1); | |
} | |
&._inactive { | |
opacity: 0.7; | |
} | |
.title { | |
font-size: 28px; | |
line-height: 28px; | |
@include media-breakpoint-down(xs) { | |
font-size: 22px; | |
line-height: 22px; | |
} | |
} | |
.subtitle { | |
font-size: 20px; | |
line-height: 20px; | |
font-weight: 300; | |
padding-top: 16px; | |
@include media-breakpoint-down(xs) { | |
font-size: 18px; | |
line-height: 18px; | |
} | |
} | |
.description { | |
margin-top: 32px; | |
font-size: 16px; | |
line-height: 20px; | |
@include media-breakpoint-down(xs) { | |
flex-direction: column; | |
} | |
ul { | |
margin: 0 16px 0 20px; | |
padding: 0; | |
} | |
} | |
.btn-readmore { | |
text-decoration: none; | |
font-size: 18px; | |
line-height: 26px; | |
border: none; | |
background-color: #3F91BE; | |
color: #FFF; | |
} | |
.expert-photo { | |
float: right; | |
display: block; | |
flex-shrink: 0; | |
height: 150px; | |
width: 150px; | |
margin-top: -20px; | |
margin-right: -15px; | |
background: transparent; | |
@include media-breakpoint-down(sm) { | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 15px; | |
height: 100px; | |
width: 100px; | |
} | |
@include media-breakpoint-down(xs) { | |
margin-top: -8px; | |
height: 75px; | |
width: 75px; | |
} | |
img { | |
height: 100%; | |
width: 100%; | |
object-fit: cover; | |
filter: grayscale(.5); | |
-webkit-transform: scaleX(-1); | |
transform: scaleX(-1); | |
} | |
@include media-breakpoint-down(xs) { | |
margin-left: 15px; | |
margin-bottom: 15px; | |
} | |
} | |
.transparent-expert-photo { | |
float: right; | |
display: block; | |
flex-shrink: 0; | |
height: 150px; | |
width: 150px; | |
margin-top: -20px; | |
margin-right: -15px; | |
background: transparent; | |
@include media-breakpoint-down(sm) { | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 15px; | |
height: 100px; | |
width: 100px; | |
} | |
@include media-breakpoint-down(xs) { | |
display: none; | |
} | |
} | |
.price { | |
align-self: center; | |
text-align: right; | |
text-transform: uppercase; | |
font-size: 20px; | |
line-height: 30px; | |
font-weight: 300; | |
.icon { | |
margin-top: auto; | |
svg { | |
height: 16px; | |
width: 22px; | |
} | |
path { | |
fill: $accent__text; | |
} | |
} | |
} | |
.time-to-wait { | |
align-self: center; | |
text-align: right; | |
text-transform: lowercase; | |
font-size: 16px; | |
line-height: 30px; | |
font-weight: 300; | |
} | |
.additional-button-info { | |
flex-grow: 1; | |
margin-left: 6px; | |
text-transform: lowercase; | |
@include media-breakpoint-down(xs) { | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
margin-left: 0; | |
} | |
} | |
.first-lesson-free { | |
font-size: 16px; | |
font-weight: 300; | |
align-self: center; | |
text-align: left; | |
} | |
.lower-card-part { | |
display: flex; | |
justify-content: space-between; | |
align-items: flex-start; | |
margin-top: 2.5rem; | |
@include media-breakpoint-down(xs) { | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
} | |
.special-bottom-info { | |
padding-top: 10px; | |
font-size: 20px; | |
line-height: 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment