fix: css cleanup and testimonials redesign
This commit is contained in:
Jannat Patel
@@ -1,6 +1,7 @@
|
||||
:root {
|
||||
--text-3-5xl: 24px;
|
||||
--text-3-8xl: 34px;
|
||||
--text-4xl: 36px;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -236,48 +237,6 @@ input[type=checkbox] {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.small-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.reviews-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
-moz-column-gap: 32px;
|
||||
column-gap: 32px;
|
||||
row-gap: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reviews-section {
|
||||
-moz-column-gap: 16px;
|
||||
column-gap: 16px;
|
||||
row-gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.reviews-section {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.reviews-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.reviews-heading {
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.review-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -341,34 +300,6 @@ input[type=checkbox] {
|
||||
}
|
||||
}
|
||||
|
||||
.course-image-wide {
|
||||
width: 352px;
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 32px;
|
||||
border-radius: var(--border-radius-md);
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-image-wide {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
flex-direction: column;
|
||||
margin: 0px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-image-wide {
|
||||
height: 216px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -469,53 +400,6 @@ input[type=checkbox] {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
.course-outline-instructor-parent {
|
||||
display: grid;
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: 4fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-outline-instructor-parent {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-outline-instructor-parent {
|
||||
padding: 0px 24px 0px;
|
||||
grid-template-columns: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-parent-section {
|
||||
display: grid;
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: 5fr 1.5fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-parent-section {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.profile-parent-section {
|
||||
grid-template-columns: none;
|
||||
}
|
||||
}
|
||||
|
||||
.course-home-mentors {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-home-mentors {
|
||||
padding: 0px 24px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.reviews-parent {
|
||||
margin: 5rem 0;
|
||||
}
|
||||
@@ -524,10 +408,6 @@ input[type=checkbox] {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.course-overview-section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.lesson-info {
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.011em;
|
||||
@@ -565,16 +445,6 @@ input[type=checkbox] {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.course-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.course-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.member-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -586,50 +456,6 @@ input[type=checkbox] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.member-card-large {
|
||||
width: 256px;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.member-card-large {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.member-card-large {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.member-card-medium {
|
||||
width: 160px;
|
||||
height: 140px;
|
||||
margin: 0 20px 32px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.member-card-medium {
|
||||
width: 216px;
|
||||
height: 140px;
|
||||
margin: 0px 12px 16px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.member-card-medium {
|
||||
width: 144px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.member-card-xl {
|
||||
height: 188px;
|
||||
margin-top: 16px;
|
||||
background: #E2E6E9;
|
||||
}
|
||||
|
||||
.break {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
@@ -644,10 +470,6 @@ input[type=checkbox] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.course-detail-headings {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.modal-headings {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -671,62 +493,18 @@ input[type=checkbox] {
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.member-card .avatar-xl {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.avatar-xl {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.avatar-xl {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-testimonial {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
padding: 1.5rem;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.overview-card {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.overview-card {
|
||||
padding: 24px 26px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.member-parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
@@ -752,10 +530,6 @@ input[type=checkbox] {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.review-modal .modal-dialog {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
@@ -900,10 +674,6 @@ input[type=checkbox] {
|
||||
}
|
||||
}
|
||||
|
||||
.profile-about-section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
height: 68px;
|
||||
background: #ffffff;
|
||||
@@ -1015,33 +785,6 @@ input[type=checkbox] {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.profile-card-row span::before {
|
||||
content: "\00B7";
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.education-work-details {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 1fr;
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.social-icons {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.social-icons {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.education-details {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@@ -1055,43 +798,6 @@ input[type=checkbox] {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 12px;
|
||||
line-height: 165%;
|
||||
}
|
||||
|
||||
.course-creator-progress-parent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.course-creator-section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.course-progress-section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.progress-card {
|
||||
width: 256px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.progress-card {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.progress-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.zindex {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -1274,25 +980,20 @@ pre {
|
||||
|
||||
.testimonial-card {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
color: var(--gray-800);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.testimonial-review {
|
||||
color: var(--gray-800);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.testimonial-profession {
|
||||
@@ -1345,7 +1046,7 @@ pre {
|
||||
}
|
||||
|
||||
.carousel {
|
||||
padding: 0 1rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@@ -1453,11 +1154,6 @@ pre {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.job-detail-card {
|
||||
padding: 1.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.job-subtitle {
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: 1.875rem;
|
||||
@@ -1501,11 +1197,6 @@ pre {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.job-detail-card span::before {
|
||||
content: "\00B7";
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.course-head-container {
|
||||
color: var(--gray-900);
|
||||
}
|
||||
@@ -1713,7 +1404,7 @@ pre {
|
||||
|
||||
.profile-page-body {
|
||||
background-color: var(--gray-50);
|
||||
padding: 2rem 0;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.profile-column-grid {
|
||||
@@ -1730,3 +1421,7 @@ pre {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user