Skip to content

Instantly share code, notes, and snippets.

@pelid
Created March 11, 2019 18:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pelid/482ac10ea09cb24bd5687ec26fd70cf8 to your computer and use it in GitHub Desktop.
Save pelid/482ac10ea09cb24bd5687ec26fd70cf8 to your computer and use it in GitHub Desktop.
Пример верстки
.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