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

.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;
}
}
}
}
}