-
Notifications
You must be signed in to change notification settings - Fork 107
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 #376 from AADESHak007/website/mentor
updated the Ui for the mentorship page
- Loading branch information
Showing
2 changed files
with
116 additions
and
96 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 |
|---|---|---|
| @@ -1,112 +1,132 @@ | ||
| /* General Styles */ | ||
| body { | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| background-color: #f3f4f6; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| background-color: rgb(220, 218, 218); /* this color is being added */ | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Main Container */ | ||
| .container { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 40px 20px; | ||
| text-align: center; | ||
| } | ||
| /* Main Container */ | ||
| .container { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 40px 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Heading Styles */ | ||
| h1 { | ||
| font-size: 2.5rem; | ||
| color: #1f2937; | ||
| margin-bottom: 40px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1px; | ||
| } | ||
| /* Heading Styles */ | ||
| h1 { | ||
| font-size: 2.5rem; | ||
| color: #040202; | ||
| margin-bottom: 40px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1px; | ||
| } | ||
|
|
||
| /* Mentor Grid Layout */ | ||
| .mentors-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 mentors per line max */ | ||
| gap: 20px; | ||
| } | ||
| /* Mentor Grid Layout */ | ||
| .mentors-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | ||
| /* 3 mentors per line max */ | ||
| gap: 20px; | ||
| } | ||
|
|
||
| /* Mentor Box (Each Mentor Card) */ | ||
| .mentor-banner { | ||
| background-color: #93c5fd; /* Light blue */ | ||
| padding: 20px; | ||
| border-radius: 12px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| text-align: center; | ||
| background-image: linear-gradient(145deg, #93c5fd, #60a5fa); | ||
| } | ||
| /* Mentor Box (Each Mentor Card) */ | ||
| .mentor-banner { | ||
| padding: 20px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| backdrop-filter: blur(16px) saturate(180%); | ||
| -webkit-backdrop-filter: blur(16px) saturate(180%); | ||
| background-color: rgba(255, 255, 255, 0.795); | ||
| border-radius: 12px; | ||
| border: 1px solid rgba(209, 213, 219, 0.3); | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Hover effect for mentor cards */ | ||
| .mentor-banner:hover { | ||
| transform: translateY(-5px); | ||
| box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); | ||
| } | ||
| /* Hover effect for mentor cards */ | ||
| .mentor-banner:hover { | ||
| transform: translateY(-5px); | ||
| box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); | ||
| backdrop-filter: blur(16px) saturate(180%); | ||
| -webkit-backdrop-filter: blur(16px) saturate(180%); | ||
| background-color: rgba(17, 25, 40, 0.75); | ||
| border-radius: 12px; | ||
| border: 1px solid rgba(255, 255, 255, 0.125); | ||
| } | ||
| .mentor-banner:hover .mentor-name{ | ||
| color: #ffffff; | ||
| } | ||
| .mentor-banner:hover .mentor-description{ | ||
| color: #fbfbfb; | ||
| } | ||
|
|
||
| /* Mentor Image Container */ | ||
| .image-container { | ||
| width: 100px; | ||
| height: 100px; | ||
| margin-bottom: 10px; | ||
| border-radius: 50%; | ||
| overflow: hidden; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 4px solid #1e40af; /* Dark blue */ | ||
| } | ||
| /* Mentor Image Container */ | ||
| .image-container { | ||
| width: 100px; | ||
| height: 100px; | ||
| margin-bottom: 10px; | ||
| border-radius: 50%; | ||
| overflow: hidden; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 4px solid #f1f909; | ||
| /* Dark blue */ | ||
| } | ||
|
|
||
| /* Mentor Image */ | ||
| .mentor-image { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| /* Mentor Image */ | ||
| .mentor-image { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| /* Mentor Description */ | ||
| .mentor-description { | ||
| margin-top: 10px; | ||
| font-size: 14px; | ||
| color: #1e3a8a; /* Dark blue */ | ||
| } | ||
| /* Mentor Description */ | ||
| .mentor-description { | ||
| margin-top: 10px; | ||
| font-size: 17px; | ||
| color: #1e3a8a; | ||
| /* Dark blue */ | ||
| } | ||
|
|
||
| .mentor-name { | ||
| font-weight: bold; | ||
| font-size: 16px; | ||
| margin-bottom: 5px; | ||
| color: #1e40af; /* Dark blue */ | ||
| } | ||
| .mentor-name { | ||
| font-weight: bold; | ||
| font-size: 16px; | ||
| margin-bottom: 5px; | ||
| color: #1e40af; | ||
| /* Dark blue */ | ||
| } | ||
|
|
||
| .mentor-role { | ||
| font-size: 14px; | ||
| color: #374151; /* Gray */ | ||
| } | ||
|
|
||
| /* Rating Stars */ | ||
| .mentor-rating { | ||
| margin-top: 10px; | ||
| color: #f59e0b; /* Golden yellow for stars */ | ||
| font-size: 18px; | ||
| } | ||
| .mentor-role { | ||
| font-size: 14px; | ||
| font-weight: 700; | ||
| color: #7e7e81; | ||
| /* Gray */ | ||
| } | ||
|
|
||
| /* Responsive Design for Mobile */ | ||
| @media (max-width: 600px) { | ||
| .mentor-banner { | ||
| padding: 15px; | ||
| } | ||
| /* Rating Stars */ | ||
| .mentor-rating { | ||
| margin-top: 10px; | ||
| color: #f59e0b; | ||
| /* Golden yellow for stars */ | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .mentor-name { | ||
| font-size: 14px; | ||
| } | ||
| /* Responsive Design for Mobile */ | ||
| @media (max-width: 600px) { | ||
| .mentor-banner { | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .mentor-role { | ||
| font-size: 12px; | ||
| } | ||
| } | ||
| .mentor-name { | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .mentor-role { | ||
| font-size: 12px; | ||
| } | ||
| } |
Binary file not shown.