You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
460 lines
8.4 KiB
460 lines
8.4 KiB
.course{ |
|
main{ |
|
header{ |
|
padding: 70px 0px 45px; |
|
border-bottom:2px solid #4a4a4a; |
|
} |
|
} |
|
&__info{ |
|
&--image{ |
|
margin-left: 20px; |
|
img{ |
|
border-top-left-radius: 9px; |
|
border-top-right-radius: 9px; |
|
border-bottom-right-radius: 9px; |
|
border-bottom-left-radius: 24px; |
|
} |
|
} |
|
&--description{ |
|
padding-top: 5px; |
|
a{ |
|
color: #424242; |
|
} |
|
li{ |
|
color: #424242; |
|
} |
|
h1{ |
|
color: white; |
|
margin-top: 12px; |
|
} |
|
p{ |
|
color: #D3D3D3; |
|
margin-top: 25px; |
|
} |
|
.course-info-items{ |
|
padding: 10px; |
|
background-color: #08793d23; |
|
border-radius: 10px; |
|
i{ |
|
color: #4DD35B; |
|
} |
|
} |
|
} |
|
} |
|
&__options{ |
|
&--rate{ |
|
border: 2px solid #707070; |
|
box-shadow: 0px 0px 20px #f7ff0179; |
|
border-radius: 15px; |
|
padding-top: 20px; |
|
color: white; |
|
} |
|
&--button{ |
|
background-color: #313131; |
|
border: 1px solid #707070; |
|
color: white; |
|
padding: 8px; |
|
text-align: center; |
|
margin-top: 15px; |
|
&:hover{ |
|
color: white; |
|
} |
|
} |
|
} |
|
&__list{ |
|
margin-bottom: 30px; |
|
border-radius: 10px; |
|
|
|
header{ |
|
padding: 40px 0px 20px; |
|
border: 0px; |
|
h2{ |
|
color: #4DD35B; |
|
} |
|
p{ |
|
color: #707070; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
@media screen and (min-width: 1441px) { |
|
.course{ |
|
main { |
|
max-width: 1350px; |
|
} |
|
&__info{ |
|
flex: 4; |
|
&--image{ |
|
img{ |
|
width: 320px; |
|
height: 420px; |
|
} |
|
} |
|
&--description{ |
|
a{ |
|
font-size: 17px; |
|
} |
|
li{ |
|
font-size: 17px; |
|
} |
|
h1{ |
|
font-size: 50px; |
|
} |
|
p{ |
|
font-size: 16px; |
|
} |
|
.course-info-items{ |
|
width: 220px; |
|
margin-top: 20px; |
|
& img{ |
|
margin-left: 5px; |
|
width : 50px; |
|
} |
|
i{ |
|
font-size: 18px; |
|
font-family: numeralLight; |
|
} |
|
p{ |
|
font-size: 14px; |
|
margin: 0px; |
|
} |
|
} |
|
} |
|
} |
|
&__options{ |
|
flex: 2; |
|
&--rate{ |
|
width: 315px; |
|
height: 200px; |
|
margin-bottom: 30px; |
|
&__number{ |
|
div{ |
|
font-size: 20px; |
|
} |
|
i{ |
|
font-size: 15px; |
|
} |
|
b{ |
|
font-size: 50px; |
|
} |
|
span{ |
|
font-size: 18px; |
|
transform: translateY(4px); |
|
margin-right: 10px; |
|
} |
|
} |
|
h2{ |
|
margin-top: 15px; |
|
font-size: 20px; |
|
} |
|
|
|
} |
|
&--button{ |
|
width: 315px; |
|
height: 66px; |
|
padding: 0px 30px; |
|
font-size: 18px; |
|
border-radius: 40px; |
|
} |
|
} |
|
&__list{ |
|
header{ |
|
h2{ |
|
font-size: 25px; |
|
} |
|
p{ |
|
font-size: 13px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.course{ |
|
main { |
|
max-width: 1250px; |
|
padding: 0px 10px; |
|
} |
|
&__info{ |
|
flex: 3; |
|
&--image{ |
|
img{ |
|
width: 250px; |
|
height: 380px; |
|
} |
|
} |
|
&--description{ |
|
a{ |
|
font-size: calc(100vw / 90); |
|
} |
|
li{ |
|
font-size: calc(100vw / 90); |
|
} |
|
h1{ |
|
font-size: calc(100vw / 40); |
|
} |
|
p{ |
|
font-size: calc(100vw / 80);; |
|
} |
|
.course-info-items{ |
|
width: 45%; |
|
margin-top: 20px; |
|
& img{ |
|
margin-left: 10px; |
|
width : 45px; |
|
} |
|
i{ |
|
font-size: calc(100vw / 95); |
|
font-family: numeralLight; |
|
} |
|
p{ |
|
font-size: calc(100vw / 100); |
|
margin: 0px; |
|
} |
|
} |
|
} |
|
} |
|
&__options{ |
|
flex: 2; |
|
&--rate{ |
|
width: 70%; |
|
height: 160px; |
|
margin-bottom: 30px; |
|
&__number{ |
|
i{ |
|
font-size: calc(100vw / 100); |
|
} |
|
b{ |
|
font-size: calc(100vw / 50); |
|
} |
|
span{ |
|
font-size: 18px; |
|
transform: translateY(4px); |
|
margin-right: 10px; |
|
} |
|
} |
|
h2{ |
|
margin-top: 5px; |
|
font-size: calc(100vw / 80); |
|
} |
|
|
|
} |
|
&--button{ |
|
width: 70%; |
|
height: 59px; |
|
padding: 0px 30px; |
|
font-size: calc(100vw / 75); |
|
border-radius: 40px; |
|
} |
|
} |
|
&__list{ |
|
header{ |
|
h2{ |
|
font-size: calc(100vw / 65); |
|
} |
|
p{ |
|
font-size: calc(100vw / 100); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
.course{ |
|
background : black; |
|
main { |
|
max-width: 900px; |
|
padding: 0px 20px; |
|
header{ |
|
padding: 0px; |
|
padding-bottom: 20px; |
|
padding-top: 20px; |
|
} |
|
p{ |
|
margin-top: 20px; |
|
color: #d3d3d3; |
|
font-size: calc(100vw / 45); |
|
} |
|
} |
|
&__info{ |
|
flex: 3; |
|
&--image{ |
|
img{ |
|
width: 200px; |
|
height: 280px; |
|
} |
|
} |
|
&--description{ |
|
a{ |
|
font-size: calc(100vw / 50); |
|
} |
|
// li{ |
|
// font-size: calc(100vw / 90); |
|
// } |
|
h1{ |
|
font-size: calc(100vw / 25); |
|
margin-top: 0px; |
|
} |
|
i{ |
|
color: #4DD35B; |
|
font-size: calc(100vw / 40); |
|
} |
|
} |
|
} |
|
&__options{ |
|
// display : none !important; |
|
flex: 2; |
|
&--rate{ |
|
// width: 70%; |
|
// height: 160px; |
|
// margin-bottom: 30px; |
|
border: none; |
|
box-shadow: 0px 0px 0px #f7ff01b3; |
|
&__number{ |
|
i{ |
|
font-size: calc(100vw / 40); |
|
color: white; |
|
} |
|
b{ |
|
font-size: calc(100vw / 40); |
|
} |
|
span{ |
|
font-size: calc(100vw / 28); |
|
transform: translateY(4px); |
|
} |
|
} |
|
h2{ |
|
margin-top: 5px; |
|
font-size: calc(100vw / 40); |
|
} |
|
|
|
} |
|
&--button{ |
|
width: 48%; |
|
// height: 59px; |
|
padding: 10px 5px; |
|
font-size: calc(100vw / 45); |
|
border-radius: 30px; |
|
color: #D3D3D3; |
|
margin-top: 30px; |
|
img{ |
|
width: 30px; |
|
} |
|
} |
|
} |
|
&__list{ |
|
header{ |
|
h2{ |
|
font-size: calc(100vw / 35); |
|
margin-top: 20px; |
|
} |
|
p{ |
|
margin-top: 0px; |
|
font-size: calc(100vw / 50); |
|
color: #d3d3d3; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
.course{ |
|
background : black; |
|
main { |
|
max-width: 500px; |
|
padding: 0px 10px; |
|
header{ |
|
padding: 0px; |
|
padding-bottom: 20px; |
|
} |
|
p{ |
|
margin-top: 20px; |
|
color: #d3d3d3; |
|
font-size: calc(100vw / 30); |
|
} |
|
} |
|
&__info{ |
|
flex: 3; |
|
&--image{ |
|
img{ |
|
width: 150px; |
|
height: 220px; |
|
} |
|
} |
|
&--description{ |
|
a{ |
|
font-size: calc(100vw / 30); |
|
} |
|
li{ |
|
font-size: calc(100vw / 90); |
|
} |
|
h1{ |
|
font-size: calc(100vw / 18); |
|
margin-top: 0px; |
|
} |
|
i{ |
|
color: #4DD35B; |
|
font-size: calc(100vw / 30); |
|
} |
|
} |
|
} |
|
&__options{ |
|
// display : none !important; |
|
flex: 2; |
|
&--rate{ |
|
// width: 70%; |
|
// height: 160px; |
|
// margin-bottom: 30px; |
|
border: none; |
|
box-shadow: 0px 0px 0px #f7ff01b3; |
|
&__number{ |
|
i{ |
|
font-size: calc(100vw / 40); |
|
color: white; |
|
} |
|
b{ |
|
font-size: calc(100vw / 30); |
|
} |
|
span{ |
|
font-size: calc(100vw / 28); |
|
transform: translateY(4px); |
|
} |
|
} |
|
h2{ |
|
margin-top: 5px; |
|
font-size: calc(100vw / 40); |
|
} |
|
|
|
} |
|
&--button{ |
|
width: 48%; |
|
// height: 59px; |
|
padding: 5px 5px; |
|
font-size: calc(100vw / 35); |
|
border-radius: 40px; |
|
color: #D3D3D3; |
|
img{ |
|
width: 25px; |
|
} |
|
} |
|
} |
|
&__list{ |
|
header{ |
|
h2{ |
|
font-size: calc(100vw / 25); |
|
margin-top: 20px; |
|
} |
|
p{ |
|
margin-top: 0px; |
|
font-size: calc(100vw / 35); |
|
color: #d3d3d3; |
|
} |
|
} |
|
} |
|
} |
|
} |