|
Server IP : 2a02:4780:3:1378:0:3736:a38e:10 / Your IP : 3.15.226.1 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 ] |
|---|
/*===========================
08. Event css
===========================*/
.event-area {
padding-top: 110px;
@media #{$md} {
padding-top: 55px;
}
@media #{$xs} {
padding-top: 35px;
}
}
.event-title-tab-menu{
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;
}
& .event-title{
display: inline-block;
& .title{
font-size: 47px;
line-height: 54px;
position: relative;
padding-right: 60px;
@media #{$lg}{
font-size: 34px;
line-height: 40px;
padding-right: 50px;
}
@media #{$md}{
font-size: 36px;
line-height: 45px;
padding-right: 30px;
}
@media #{$xs}{
font-size: 30px;
line-height: 30px;
padding-bottom: 20px;
padding-right: 0;
}
@media #{$sm}{
font-size: 24px;
line-height: 30px;
padding-bottom: 0;
padding-right: 30px;
}
&::before{
position: absolute;
content: '';
width: 2px;
height: 65%;
background-color: $theme-color;
top: 50%;
right: 0px;
@include transform(translateY(-50%));
@media #{$xs}{
height: 2px;
left: 0;
right: auto;
top: auto;
bottom: 0;
width: 100px;
@include transform(translateY(0));
}
@media #{$sm}{
width: 2px;
height: 75%;
left: auto;
top: 50%;
right: 0px;
bottom: auto;
@include transform(translateY(-50%));
}
}
}
}
}
.event-tab-menu {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
& .nav {
padding-left: 60px;
@media #{$lg} {
padding-left: 50px;
}
@media #{$md} {
padding-left: 30px;
}
@media #{$xs} {
padding-left: 0;
}
@media #{$sm} {
padding-left: 30px;
}
& li {
& + li {
margin-left: 25px;
@media #{$md} {
margin-left: 10px;
}
@media #{$xs} {
margin-left: 10px;
}
}
& a {
font-weight: 600;
font-size: 18px;
text-align: left;
color: $theme-color;
border: 1px solid $border-color;
padding: 0 30px;
height: 45px;
line-height: 43px;
@media #{$md} {
font-size: 16px;
padding: 0 20px;
height: 40px;
line-height: 38px;
}
@media #{$xs} {
font-size: 14px;
padding: 0 10px;
height: 40px;
line-height: 38px;
}
&.active {
background-color: $theme-color-2;
border-color: $theme-color-2;
color: $white;
@include transition(0.3s);
}
}
}
}
}
.event-tab-items {
padding-top: 40px;
position: relative;
@media #{$md} {
padding-top: 20px;
}
@media #{$xs} {
padding-top: 20px;
}
& .view-btn{
position: absolute;
top: 25px;
right: 0;
@media #{$xs}{
position: relative;
}
& .view-more{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
color: #808080;
@include transition(0.3s);
&:hover{
color: $theme-color;
}
}
}
}
.single-event {
background-color: $gray;
padding: 50px 25px;
@include transition(0.3s);
@media #{$lg}{
padding: 20px ;
}
@media #{$sm}{
padding: 30px 25px;
}
& .time {
font-weight: 500;
font-size: 16px;
line-height: 32px;
display: block;
@include transition(0.3s);
@media #{$lg} {
font-size: 14px;
line-height: 24px;
}
@media #{$xs} {
font-size: 14px;
}
}
& .date {
font-weight: 700;
font-size: 24px;
letter-spacing: 0.05em;
line-height: 32px;
color: $theme-color-2;
display: block;
@include transition(0.3s);
@media #{$lg} {
font-size: 16px;
line-height: 25px;
}
@media #{$xs} {
font-size: 18px;
line-height: 30px;
}
}
& .event-title {
& a {
font-weight: 600;
font-size: 24px;
letter-spacing: 0.02em;
line-height: 30px;
color: $theme-color;
margin-top: 11px;
@include transition(0.3s);
@media #{$lg} {
font-size: 18px;
line-height: 25px;
}
@media #{$xs} {
font-size: 18px;
line-height: 25px;
}
}
}
& .place {
font-weight: 500;
font-size: 16px;
margin-top: 11px;
@include transition(0.3s);
@media #{$lg} {
font-size: 14px;
}
@media #{$xs} {
font-size: 14px;
}
}
& .more {
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
margin-top: 15px;
color: $body-color;
@include transition(0.3s);
@media #{$lg} {
font-size: 13px;
}
@media #{$xs} {
font-size: 13px;
}
& i {
font-size: 11px;
margin-left: 3px;
}
}
&:hover {
background-color: $theme-color;
& .time {
color: $white;
}
& .event-title {
& a {
color: $white;
}
}
& .place {
color: $white;
}
& .more {
color: $white;
}
}
}
/*===== Event 2 =====*/
.event-image {
& img {
width: 100%;
}
}
.event-title {
max-width: 490px;
margin-left: auto;
@media #{$md} {
margin-left: 0;
}
@media #{$xs} {
margin-left: 0;
}
}
.event-wrapper-2{
max-width: 490px;
}
.single-event-2 {
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: 60px;
& .event-date {
width: 125px;
height: 125px;
background-color: $gray;
text-align: center;
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;
@include transition(0.3s);
@media #{$xs} {
width: 80px;
height: 80px;
}
& .date {
font-weight: 700;
font-size: 24px;
letter-spacing: 0.05em;
line-height: 32px;
color: $theme-color;
@include transition(0.3s);
@media #{$lg} {
font-size: 20px;
}
@media #{$xs} {
font-size: 16px;
line-height: 26px;
}
}
}
& .event-content {
padding-left: 30px;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
@media #{$xs} {
padding-left: 15px;
}
& .event-title-2 {
& a {
font-weight: 600;
font-size: 24px;
letter-spacing: 0.02em;
line-height: 30px;
color: $theme-color;
@include transition(0.3s);
@media #{$lg} {
font-size: 22px;
}
@media #{$xs} {
font-size: 16px;
line-height: 26px;
}
&:hover {
color: $theme-color-2;
}
}
}
& .place {
font-weight: 500;
font-size: 16px;
line-height: 32px;
@media #{$xs} {
font-size: 13px;
line-height: 24px;
}
}
& .time {
font-weight: 500;
font-size: 16px;
line-height: 32px;
display: block;
@media #{$xs} {
font-size: 13px;
line-height: 24px;
}
}
& .more {
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 24px;
color: $body-color;
@include transition(0.3s);
@media #{$xs} {
font-size: 12px;
line-height: 22px;
}
&:hover {
color: $theme-color-2;
}
}
}
&:hover {
& .event-date {
background-color: $theme-color-2;
& .date {
color: $white;
}
}
}
}
/*===== Event Page =====*/
.event-page {
padding-top: 130px;
@media #{$md} {
padding-top: 70px;
}
@media #{$xs} {
padding-top: 50px;
}
}
.event-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;
}
}
}
}
.event-wrapper {
padding-top: 40px;
@media #{$md} {
padding-top: 20px;
}
@media #{$xs} {
padding-top: 20px;
}
}