|
Server IP : 2a02:4780:3:1378:0:3736:a38e:10 / Your IP : 18.218.140.12 Web Server : LiteSpeed System : Linux sg-nme-web1278.main-hosting.eu 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : u926327694 ( 926327694) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u926327694/domains/svschool.in/public_html/assets/../assets/scss/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
/*===========================
05. Top Courses css
===========================*/
.top-courses-area {
padding-top: 110px;
@media #{$md}{
padding-top: 35px;
}
@media #{$xs}{
padding-top: 15px;
}
}
.courses-wrapper{
padding-top: 40px;
@media #{$md}{
padding-top: 20px;
}
@media #{$xs}{
padding-top: 20px;
}
&.wrapper-2{
padding-top: 10px;
}
& .courses-col{
&:nth-child(8n+1){
& .single-courses-2,
& .single-courses{
background-color: #07294D;
& .courses-content{
& .duration-rating{
background-color: #07294D;
}
}
}
}
&:nth-child(8n+2){
& .single-courses-2,
& .single-courses{
background-color: #0C8B51;
& .courses-content{
& .duration-rating{
background-color: #0C8B51;
}
}
}
}
&:nth-child(8n+3){
& .single-courses-2,
& .single-courses{
background-color: #2F7AD5;
& .courses-content{
& .duration-rating{
background-color: #2F7AD5;
}
}
}
}
&:nth-child(8n+4){
& .single-courses-2,
& .single-courses{
background-color: #27B8A7;
& .courses-content{
& .duration-rating{
background-color: #27B8A7;
}
}
}
}
&:nth-child(8n+5){
& .single-courses-2,
& .single-courses{
background-color: #1EC1D9;
& .courses-content{
& .duration-rating{
background-color: #1EC1D9;
}
}
}
}
&:nth-child(8n+6){
& .single-courses-2,
& .single-courses{
background-color: #D94DA6;
& .courses-content{
& .duration-rating{
background-color: #D94DA6;
}
}
}
}
&:nth-child(8n+7){
& .single-courses-2,
& .single-courses{
background-color: #EAB830;
& .courses-content{
& .duration-rating{
background-color: #EAB830;
}
}
}
}
&:nth-child(8n+8){
& .single-courses-2,
& .single-courses{
background-color: #753B76;
& .courses-content{
& .duration-rating{
background-color: #753B76;
}
}
}
}
}
}
.single-courses{
padding: 28px 25px 35px;
@media #{$lg}{
padding: 18px 15px 25px;
}
@media #{$md}{
padding: 50px 40px;
}
& .category{
font-weight: 400;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 32px;
color: $white;
}
& .courses-title{
& a{
font-family: Exo;
font-weight: 500;
font-size: 22px;
line-height: 32px;
color: $white;
@media #{$lg}{
font-size: 18px;
line-height: 28px;
}
@media #{$xs}{
font-size: 20px;
line-height: 28px;
}
@media #{$sm}{
font-size: 18px;
line-height: 28px;
}
}
}
& .duration-fee{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding-top: 5px;
& .duration{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .fee{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
padding-left: 26px;
position: relative;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
&::before{
position: absolute;
content: '';
width: 2px;
height: 80%;
left: 13px;
top: 50%;
@include transform(translateY(-50%));
background-color: $white;
}
}
}
& .rating{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
& span{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .star{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
& li{
font-size: 10px;
color: $white;
margin-left: 5px;
}
}
}
& .courses-link{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-pack: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
border-top: 1px solid $white;
margin-top: 15px;
& .apply{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 24px;
color: $white;
margin-top: 8px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .more{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 24px;
color: $white;
margin-top: 8px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
}
}
/*===== Courses 2 =====*/
.single-courses-2{
& .courses-image{
overflow: hidden;
& a{
display: block;
}
& img{
width: 100%;
@include transition(0.3s);
}
}
& .courses-content{
padding: 25px 25px;
position: relative;
@media #{$lg}{
padding: 15px;
}
@media #{$md}{
padding: 30px 40px;
}
& .category{
font-weight: 400;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 32px;
color: $white;
}
& .courses-title{
& a{
font-family: Exo;
font-weight: 500;
font-size: 22px;
line-height: 32px;
color: $white;
@media #{$lg}{
font-size: 18px;
line-height: 28px;
}
@media #{$xs}{
font-size: 20px;
line-height: 28px;
}
@media #{$sm}{
font-size: 18px;
line-height: 28px;
}
}
}
& .duration-rating{
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
padding: 0 25px 25px;
opacity: 0;
visibility: hidden;
@include transition(0.3s);
@media #{$lg}{
padding: 0px 15px 15px;
}
@media #{$md}{
padding: 0px 40px 30px;
}
& .duration-fee{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
& .duration{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .fee{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
padding-left: 26px;
position: relative;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
&::before{
position: absolute;
content: '';
width: 2px;
height: 80%;
left: 13px;
top: 50%;
@include transform(translateY(-50%));
background-color: $white;
}
}
& .credit{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
padding-left: 26px;
position: relative;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
&::before{
position: absolute;
content: '';
width: 2px;
height: 80%;
left: 13px;
top: 50%;
@include transform(translateY(-50%));
background-color: $white;
}
}
}
& .rating{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
& span{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 24px;
color: $white;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .star{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
& li{
font-size: 10px;
color: $white;
margin-left: 5px;
}
}
}
}
& .courses-link{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-pack: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
border-top: 1px solid $white;
margin-top: 15px;
padding-bottom: 5px;
@include transition(0.3s);
opacity: 1;
visibility: visible;
& .apply{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 24px;
color: $white;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
& .more{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 24px;
color: $white;
margin-top: 10px;
@media #{$lg}{
font-size: 12px;
}
@media #{$sm}{
font-size: 12px;
}
}
}
}
&:hover{
& .courses-image{
& img{
@include transform(scale(1.1));
}
}
& .courses-content{
& .duration-rating{
opacity: 1;
visibility: visible;
}
}
& .courses-link{
opacity: 1;
visibility: hidden;
}
}
}
.courses-menu{
& .menu-items{
& li{
& + li{
margin-left: 23px;
@media #{$lg}{
margin-left: 10px;
}
@media #{$md}{
margin-left: 10px;
}
@media #{$xs}{
margin-left: 5px;
}
}
display: inline-block;
width: 125px;
height: 45px;
line-height: 43px;
text-align: center;
font-weight: 600;
font-size: 18px;
color: $theme-color;
border: 1px solid $border-color;
@include transition(0.3s);
cursor: pointer;
margin-top: 10px;
@media #{$lg}{
width: 110px;
font-size: 16px;
}
@media #{$md}{
width: 100px;
font-size: 16px;
}
@media #{$xs}{
width: auto;
font-size: 14px;
padding: 0 15px;
height: 40px;
line-height: 38px;
}
&:hover,
&.active{
background-color: $theme-color-2;
color: $white;
border-color: $theme-color-2;
}
}
}
}
/*===== Courses Page =====*/
.courses-list{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@media #{$xs}{
display: block;
}
@media #{$sm}{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
& .courses-image{
overflow: hidden;
& a{
display: block;
}
& img{
width: 320px;
height: 300px;
object-fit: cover;
object-position: center;
@include transition(0.3s);
@media #{$xs}{
width: 100%;
height: auto;
}
@media #{$sm}{
width: 260px;
height: 250px;
}
}
}
& .courses-content{
padding: 25px 50px;
position: relative;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
@media #{$md}{
padding: 30px 40px;
}
@media #{$xs}{
padding: 20px 25px;
}
& .courses-fee{
font-weight: 500;
font-size: 16px;
color: $white;
position: absolute;
top: 30px;
right: 50px;
@media #{$md}{
position: relative;
top: 0;
right: 0;
margin-bottom: 10px;
}
@media #{$xs}{
position: relative;
top: 0;
right: 0;
margin-bottom: 10px;
}
}
& .courses-content-wrapper{
max-width: 300px;
@media #{$lg}{
max-width: 270px;
}
}
& .duration-rating{
position: relative;
padding: 0 ;
opacity: 1;
visibility: visible;
@include transition(0.3s);
@media #{$lg}{
padding: 0px;
}
@media #{$md}{
padding: 0px;
}
}
}
&:hover{
& .courses-content{
& .courses-link{
opacity: 1;
visibility: visible;
}
}
}
}
/*===== Courses Page =====*/
.courses-bar{
padding-top: 20px;
}
.courses-tab{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 30px;
& .nav{
padding-right: 30px;
@media #{$lg}{
padding-right: 20px;
}
@media #{$xs}{
padding-right: 20px;
}
& li{
margin-right: 10px;
& a{
font-size: 20px;
color: #DFDFDF;
&.active{
color: $theme-color;
}
}
}
}
& p{
font-size: 14px;
letter-spacing: 0.02em;
color: #9c9c9c;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.courses-bar-form{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-pack: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
@media #{$xs}{
display: block;
}
@media #{$sm}{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
}
.courses-select{
width: 210px;
position: relative;
margin-top: 30px;
@media #{$lg}{
width: 160px;
}
@media #{$xs}{
width: 100%;
}
@media #{$sm}{
width: 210px;
}
& i{
position: absolute;
top: 50%;
right: 0;
@include transform(translateY(-50%));
font-size: 14px;
}
& select{
font-size: 14px;
letter-spacing: 0.02em;
color: #9c9c9c;
height: 35px;
border: 0;
border-bottom: 1px solid #9c9c9c;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
.courses-search{
width: 270px;
position: relative;
margin-top: 30px;
@media #{$lg}{
width: 200px;
}
@media #{$xs}{
width: 100%;
}
@media #{$sm}{
width: 210px;
}
& input{
font-size: 14px;
letter-spacing: 0.02em;
color: #9c9c9c;
height: 35px;
border: 0;
border-bottom: 1px solid #9c9c9c;
width: 100%;
@include placeholder{
opacity: 1;
color: #9c9c9c;
}
}
& i{
position: absolute;
top: 50%;
right: 5px;
@include transform(translateY(-50%));
font-size: 14px;
}
}