-
Notifications
You must be signed in to change notification settings - Fork 263
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #125 from Vaibhav22p-qw/main
Add Contact Us Page and News Section (GSSoC'24) #112
- Loading branch information
Showing
17 changed files
with
978 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,384 @@ | ||
|
|
||
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); | ||
|
|
||
| /* Default (Light) Mode */ | ||
| :root { | ||
| --background-color: #ffffff; /* Light background color */ | ||
| --text-color: #333333; /* Dark text color */ | ||
| --card-background: rgba(128, 128, 128, 0.204); /* Card background color */ | ||
| } | ||
|
|
||
| /* Dark Mode */ | ||
| body.dark-mode { | ||
| --background-color: #333333; /* Dark background color */ | ||
| --text-color: #ffffff; /* Light text color */ | ||
| --card-background: rgba(0, 0, 0, 0.24); /* Dark card background color */ | ||
| } | ||
| body { | ||
| background-color: var(--background-color); | ||
| color: var(--text-color); | ||
| } | ||
| .head { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| padding: 12px; | ||
| margin: 12px auto; | ||
| } | ||
|
|
||
|
|
||
| .card-body{ | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .card-title{ | ||
| color: rgb(248, 65, 14); | ||
| letter-spacing: 1px; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| max-height: 80px; /* 4 lines at 20px per line */ | ||
| white-space: normal; | ||
| overflow: hidden; | ||
|
|
||
|
|
||
| } | ||
| .card-text{ | ||
| max-height: 100px; /* 4 lines at 20px per line */ | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| letter-spacing: 1px; | ||
| font-family: 'Poppins', sans-serif; | ||
| white-space: normal; | ||
| font-size: 13px; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
|
|
||
|
|
||
| .card-author{ | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| padding-top: 12px; | ||
| font-size: 12px; | ||
| } | ||
| .card-date{ | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| font-size: 10px; | ||
| } | ||
|
|
||
| #newsBox { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 2rem; | ||
| flex-wrap: wrap; | ||
|
|
||
| } | ||
|
|
||
| .newsCard { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: var(--card-background); | ||
| height: 450px; | ||
| width: 360px; | ||
| border-radius: 9px; | ||
| overflow: hidden; | ||
| box-sizing: border-box; | ||
| } | ||
| .thumnail{ | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .imageWrapper{ | ||
| width: 100%; | ||
| height: 180px; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| #img { | ||
| height: 406px; | ||
| width: 721px; | ||
| } | ||
|
|
||
| .line { | ||
| width: 30vw; | ||
| border: 1px solid black; | ||
| margin: 7px; | ||
| background-color: black; | ||
| height: 4px; | ||
| border-radius: 24px; | ||
| } | ||
|
|
||
| footer { | ||
| position: fixed; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .mySpin { | ||
| margin: 50px auto; | ||
| display: block; | ||
| height: 10vh; | ||
| ; | ||
| width: 10vh; | ||
| ; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .card-header{ | ||
| border: none; | ||
| } | ||
|
|
||
| /* Media Quries */ | ||
|
|
||
| @media only screen and (min-width:844px) and (max-width:1142px){ | ||
|
|
||
| .newsCard { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: rgba(128, 128, 128, 0.204); | ||
| height: 380px; | ||
| width: 250px; | ||
| border-radius: 9px; | ||
| overflow: hidden; | ||
| box-sizing: border-box; | ||
| } | ||
| .card-title{ | ||
| color: rgb(248, 65, 14); | ||
| letter-spacing: 1px; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| max-height: 80px; /* 4 lines at 20px per line */ | ||
| white-space: normal; | ||
| overflow: hidden; | ||
|
|
||
|
|
||
| } | ||
| .card-author{ | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| padding-top: 12px; | ||
| font-size: 8px; | ||
| } | ||
| .card-text{ | ||
| max-height: 100px; /* 4 lines at 20px per line */ | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| letter-spacing: 1px; | ||
| font-family: 'Poppins', sans-serif; | ||
| white-space: normal; | ||
| font-size: 11px; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
| .imageWrapper{ | ||
| width: 100%; | ||
| height: 150px; | ||
| object-fit: cover; | ||
| } | ||
| .card-body{ | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| } | ||
| label { | ||
| width:50px; | ||
| height:25px; | ||
| position: relative; | ||
| display: block; | ||
| background: #fffdf3; | ||
| border-radius: 50px; | ||
| box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4); | ||
| cursor: pointer; | ||
| } | ||
| label:after { | ||
| content: ""; | ||
| width:23px; | ||
| height: 23px; | ||
| position: absolute; | ||
| top:1px; | ||
| left:1px; | ||
| background: linear-gradient(180deg,#ffcc89,#d8860b); | ||
| border-radius: 50px; | ||
| box-shadow: 0px 5px 10px rgba(0,0,0,0.2); | ||
| } | ||
| input { | ||
| width: 0; | ||
| height: 0; | ||
| visibility: hidden; | ||
| } | ||
| input:checked + label { | ||
| background: #242424; | ||
| } | ||
| input:checked + label:after { | ||
| left: 49px; | ||
| transform: translateX(-100%); | ||
| background: linear-gradient(180deg, #777, #3a3a3a); | ||
| } | ||
| label, label:after { | ||
| transition: 0.3s | ||
| } | ||
| label:active:after{ | ||
| width: 30px; | ||
| } | ||
| label svg { | ||
| position: absolute; | ||
| width: 20px; | ||
| top: 4.5px; | ||
| left:2px; | ||
| z-index: 100; | ||
| } | ||
| label svg.sun { | ||
| opacity: 1; | ||
| transition: 0.3s; | ||
| } | ||
| label svg.moon { | ||
| opacity: 0.5; | ||
| left:28px; | ||
| transition: 0.3s; | ||
| } | ||
| input:checked + label svg.sun { | ||
| opacity: 0.2; | ||
| } | ||
| input:checked + label svg.moon { | ||
| opacity: 1; | ||
| } | ||
| .form-switch{ | ||
| padding-left: 0; | ||
| } | ||
| .form-check{ | ||
| padding-left: 0; | ||
| } | ||
| @media only screen and (min-width:492px) and (max-width:842px){ | ||
|
|
||
|
|
||
| .newsCard { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: rgba(128, 128, 128, 0.204); | ||
| height: 360px; | ||
| width: 230px; | ||
| border-radius: 9px; | ||
| overflow: hidden; | ||
| box-sizing: border-box; | ||
| } | ||
| .imageWrapper{ | ||
| width: 100%; | ||
| height: 130px; | ||
| object-fit: cover; | ||
| } | ||
| .card-title{ | ||
| color: rgb(248, 65, 14); | ||
| letter-spacing: 1px; | ||
| font-size: 13px; | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| max-height: 80px; /* 4 lines at 20px per line */ | ||
| white-space: normal; | ||
| overflow: hidden; | ||
|
|
||
|
|
||
| } | ||
| .card-text{ | ||
| max-height: 100px; /* 4 lines at 20px per line */ | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| letter-spacing: 1px; | ||
| font-family: 'Poppins', sans-serif; | ||
| white-space: normal; | ||
| font-size: 10px; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
| .card-author{ | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| padding-top: 12px; | ||
| font-size: 8px; | ||
| } | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: var(--background-color); | ||
| color: var(--text-color); | ||
| } | ||
| /* Add dark mode specific styles here */ | ||
| } | ||
| @media only screen and (min-width:400px) and (max-width:490px){ | ||
|
|
||
|
|
||
| .newsCard { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: rgba(128, 128, 128, 0.204); | ||
| height: 360px; | ||
| width: 80%; | ||
| border-radius: 9px; | ||
| overflow: hidden; | ||
| box-sizing: border-box; | ||
| } | ||
| .imageWrapper{ | ||
| width: 100%; | ||
| height: 130px; | ||
| object-fit: cover; | ||
| } | ||
| .card-title{ | ||
| color: rgb(248, 65, 14); | ||
| letter-spacing: 1px; | ||
| font-size: 13px; | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| max-height: 80px; /* 4 lines at 20px per line */ | ||
| white-space: normal; | ||
| overflow: hidden; | ||
|
|
||
|
|
||
| } | ||
| .card-text{ | ||
| max-height: 100px; /* 4 lines at 20px per line */ | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| letter-spacing: 1px; | ||
| font-family: 'Poppins', sans-serif; | ||
| white-space: normal; | ||
| font-size: 10px; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
| .card-author{ | ||
| font-weight: bold; | ||
| font-family: 'Poppins', sans-serif; | ||
| letter-spacing: 1px; | ||
| padding-top: 12px; | ||
| font-size: 8px; | ||
| } | ||
| } |
Oops, something went wrong.