style: course home
This commit is contained in:
Jannat Patel
@@ -8,10 +8,15 @@
|
||||
--text-2xl: 20px;
|
||||
--text-3xl: 22px;
|
||||
--text-3-5xl: 24px;
|
||||
--text-3-8xl: 34px;
|
||||
--text-4xl: 44px;
|
||||
--navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
appearance: auto;
|
||||
}
|
||||
@@ -19,8 +24,6 @@ input[type=checkbox] {
|
||||
.course-image {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -66,6 +69,7 @@ input[type=checkbox] {
|
||||
font-weight: 600;
|
||||
box-shadow: var(--popover-box-shadow);
|
||||
color: var(--gray-900);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dark-pills {
|
||||
@@ -96,6 +100,7 @@ input[type=checkbox] {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.muted-text {
|
||||
@@ -120,6 +125,12 @@ input[type=checkbox] {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.course-card-content {
|
||||
padding: 0 0.5rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.course-card-content {
|
||||
padding: 0px 10px 10px;
|
||||
@@ -155,6 +166,12 @@ input[type=checkbox] {
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.course-instructor {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.course-student-count {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
@@ -279,7 +296,6 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.review-card-footer {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -293,10 +309,6 @@ input[type=checkbox] {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.rating .star-click {
|
||||
--star-fill: #74808B;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -329,26 +341,13 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-card-wide {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 24px;
|
||||
background: #E2E6E9;
|
||||
border-radius: var(--border-radius-md);
|
||||
margin-top: 16px;
|
||||
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.02), 0px 0px 8px rgba(0, 0, 0, 0.04);
|
||||
margin-top: 1rem;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-card-wide {
|
||||
padding: 40px 24px 40px;
|
||||
border-radius: 0px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,13 +379,6 @@ input[type=checkbox] {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.course-home-page {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -394,49 +386,12 @@ input[type=checkbox] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-card-wide-content {
|
||||
width: 90%;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-title {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 120%;
|
||||
color: var(--gray-800);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide-title {
|
||||
margin-top: 24px;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-card-wide-title {
|
||||
margin-top: 16px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-intro {
|
||||
font-size: 16px;
|
||||
line-height: 172%;
|
||||
letter-spacing: -0.011em;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -449,6 +404,7 @@ input[type=checkbox] {
|
||||
padding: 0.25rem 1.25rem;
|
||||
font-size: var(--text-md);
|
||||
line-height: 20px;
|
||||
box-shadow: var(--btn-shadow);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
@@ -456,16 +412,13 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.wide-button {
|
||||
padding: 12px 24px 12px;
|
||||
height: 48px;
|
||||
margin-right: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
padding: 0.5rem 6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 768px) {
|
||||
.wide-button {
|
||||
width: 264px;
|
||||
padding: 0.5rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -499,28 +452,26 @@ input[type=checkbox] {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.course-home-outline {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.small-title {
|
||||
letter-spacing: -0.011em;
|
||||
.course-home-page .course-home-outline {
|
||||
margin: 5rem 0 4rem;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
font-weight: bold;
|
||||
margin: 0 .25rem 0;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: 0.75rem 0;
|
||||
color: var(--gray-900);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chapter-title[aria-expanded="true"] {
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.chapter-description {
|
||||
height: fit-content;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin: 0.75rem 3rem 1rem;
|
||||
}
|
||||
|
||||
.course-content-parent .chapter-description {
|
||||
@@ -528,7 +479,7 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.chapter-icon {
|
||||
margin-right: .25rem;
|
||||
margin: 0 1.25rem;
|
||||
}
|
||||
|
||||
.course-outline-instructor-parent {
|
||||
@@ -579,17 +530,11 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.reviews-parent {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.reviews-parent {
|
||||
padding: 0px 24px 0px;
|
||||
}
|
||||
margin: 5rem 0;
|
||||
}
|
||||
|
||||
.course-description-section {
|
||||
margin-top: 3rem;
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.course-overview-section {
|
||||
@@ -600,21 +545,20 @@ input[type=checkbox] {
|
||||
font-size: 16px;
|
||||
line-height: 250%;
|
||||
letter-spacing: -0.011em;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.lesson-links {
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
margin-bottom: .25rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.lesson-links:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background: #F4F5F6;
|
||||
color: inherit;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.course-content-parent .lesson-links {
|
||||
@@ -635,7 +579,7 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.lessons {
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.course-buttons {
|
||||
@@ -906,9 +850,9 @@ input[type=checkbox] {
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 135%;
|
||||
color: var(--gray-800);
|
||||
font-size: var(--text-md);
|
||||
line-height: 20px;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.course-details-outline {
|
||||
@@ -962,8 +906,8 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.active-lesson {
|
||||
background-color: #EBF5FF;
|
||||
border-radius: var(--border-radius-sm);
|
||||
background-color: var(--gray-100);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.lesson-progress {
|
||||
@@ -1192,6 +1136,7 @@ input[type=checkbox] {
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--gray-500);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@@ -1324,19 +1269,6 @@ pre {
|
||||
.navbar {
|
||||
box-shadow: var(--navbar-shadow);
|
||||
}
|
||||
|
||||
.interactive-arrow {
|
||||
background-image: url("/assets/school/icons/arrow.svg");
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.intercative-link:hover .interactive-arrow{
|
||||
background-image: url("/assets/school/icons/blue-arrow.svg");
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-image: url(/assets/frappe/icons/timeless/search.svg);
|
||||
border: 1px solid #C8CFD5;
|
||||
@@ -1403,8 +1335,17 @@ pre {
|
||||
}
|
||||
|
||||
.carousel-control-prev, .carousel-control-next {
|
||||
position: inherit;
|
||||
width: auto;
|
||||
top: 30%;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow-sm);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.related-courses .carousel-control-prev, .related-courses .carousel-control-next {
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
@@ -1412,6 +1353,16 @@ pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.carousel {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1563,3 +1514,170 @@ pre {
|
||||
content: "\00B7";
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.course-head-container {
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.course-intructor-rating-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.course-intructor-rating-section .seperator::before {
|
||||
content: "\00B7";
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.course-head-container .progress {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
.course-overlay-card {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: auto;
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 7%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-overlay-card {
|
||||
position: inherit;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.course-intructor-rating-section .seperator::before {
|
||||
content: "\00B7";
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.video-in-overlay {
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.course-overlay-content {
|
||||
padding: 1.25rem;
|
||||
font-size: var(--text-base);
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.breadcrumb-destination {
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.preview-video {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.course-body-container {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-body-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-heading {
|
||||
margin-top: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
}
|
||||
|
||||
.overlay-student-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.course-creators-card {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--gray-100);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.course-creator-name {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 500;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.course-meta {
|
||||
font-size: var(--text-base);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.avg-rating {
|
||||
font-size: var(--text-3-8xl);
|
||||
color: var(--gray-900);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reviews-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reviews-header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.reviews-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.review-author {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--gray-900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.star-click {
|
||||
--star-fill: var(--yellow-500);
|
||||
}
|
||||
|
||||
.rating {
|
||||
--star-fill: var(--gray-400);
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.avg-rating-stars {
|
||||
background: var(--gray-200);
|
||||
border-radius: 100px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.reviews-parent .progress {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.reviews-parent .progress-bar {
|
||||
background-color: var(--gray-600);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user