Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed the Display Section of Our Features and What Our users say #910

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Changed the Display Section of Our Features and What Our users say #910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce4a8a8
Changed the Display Section of Our Features and What Our users say
ritumehta302002 Oct 28, 2024
a1216bf
Slight changes in footer
ritumehta302002 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 33 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,20 +280,20 @@
}
/* Features Section */
.features {
padding: 60px 20px;
background-color: #f9f9f9;
padding: 70px 30px;
background-color: #f0d2d2;
}

/* <label for = "dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label>.features-card {

/* <label for ="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label> */

.features-card {
background-color: white;
padding: 30px;
border-radius: 8px;
background-color: rgb(255, 255, 255);
padding: 10px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(25% - 30px);
width: calc(55% - 20px);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
position: relative;
Expand All @@ -318,7 +318,7 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
Expand All @@ -329,7 +329,7 @@

border-radius: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(25% - 30px);
width: calc(100% - 30px);
text-align: center;

transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
Expand Down Expand Up @@ -450,23 +450,23 @@

/* Footer Styles */
.footer {
background-color: var(--deep-teal);
background-color: #003d4d;
/* Use deep teal for footer background */
color: #ffffff;
/* White text for footer */
padding: 40px 0;
padding: 20px 0;
padding-bottom:0;
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
max-width: 900px;
/* Max width for footer content */
margin: 0 auto;
/* Center footer content */
padding: 0 20px;
padding: 0 10px;
}

.footer-section {
Expand Down Expand Up @@ -541,7 +541,7 @@

.footer-section ul li a {
color: #e0e0e0;
font-size: 16px;
font-size: 12px;
/* Light grey for links */
text-decoration: none;
/* No underline for links */
Expand All @@ -559,6 +559,7 @@
.features h2 {
text-align: center;
color: #333;
font-weight: bold;
/* Consider changing this for better contrast */
margin-bottom: 40px;
font-size: 32px;
Expand Down Expand Up @@ -625,8 +626,8 @@

/* Testimonials Section */
.testimonials {
padding: 60px 20px;
background-color: var(--off-white);
padding: 0px 20px;
background-color: #e4e3e3;
/* Use the off-white background color */
}

Expand All @@ -639,6 +640,7 @@
}

.testimonial-cards {
padding-bottom: 70px;
display: flex;
flex-wrap: wrap;
justify-content: center;
Expand All @@ -654,11 +656,11 @@
}

.testimonial-card {
background-color: var(--off-white);
background-color: #ffffff;
/* Use off-white for testimonial cards */
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 10px rgba(247, 242, 242, 0.1);
Comment on lines +659 to +663
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider Enhancing Contrast for Testimonial Cards

The background-color of #ffffff on a #e4e3e3 background may result in low contrast between the testimonial cards and the background. Consider adjusting the background color or adding a more pronounced box-shadow to improve visual separation and accessibility.

width: calc(33.33% - 30px);
text-align: center;
}
Expand Down Expand Up @@ -745,15 +747,17 @@
/* Increase font size for visibility */
position: relative;
/* Required for the pseudo-element */
display: inline-block;
/* display: inline-block; */
/* Make the element fit the content */
padding: 10px;
padding-bottom: 50px;
/* Add some padding for aesthetics */
transition: color 0.4s ease, transform 0.4s ease;
/* Smooth transition */
margin: 0;
font-weight: bold;
/* Remove default margin */
background: linear-gradient(90deg, #ff6f61, #de8c3e);
background: linear-gradient(90deg, #333, #333);
/* Gradient background */

background-clip: text; /* Standard property */
Expand All @@ -774,32 +778,32 @@
/* Position it just below the text */
height: 5px;
/* Set height for the underline */
background-color: #ff6f61;
/* background-color: #ff6f61; */
/* Initial color of the underline */
transform: scaleX(0);
/* Start with no width */
transition: transform 0.4s ease, background-color 0.4s ease;
/* transition: transform 0.4s ease, background-color 0.4s ease; */
/* Smooth transition for the underline */
}

.testimonials h2:hover {
color: #ff6f61;
/* Change text color on hover */
transform: translateY(-10px) rotate(1deg);
/* transform: translateY(-10px) rotate(1deg); */
/* Move the text up and slightly rotate */
}

.testimonials h2:hover::before {
transform: scaleX(1);
/* .testimonials h2:hover::before { */
/* transform: scaleX(1); */
/* Scale the underline to full width */
background-color: #de8c3e;
/* background-color: #181818; */
/* Change underline color on hover */
}
/* } */

.testimonials h2:hover {
box-shadow: 0 10px 30px rgba(255, 111, 97, 0.6);
/* .testimonials h2:hover { */
/* box-shadow: 0 10px 30px rgba(255, 111, 97, 0.6); */
/* Add a shadow effect on hover */
}
/* } */

/* Responsive Styles */
@media (max-width: 768px) {
Expand Down
6 changes: 3 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ header .fa-bars {

/* Default light mode styles */
body {
background-color: var(--off-white);
background-color: #e4e3e3;
/* Changed from #ffffff to Off-White */
Comment on lines +199 to 200
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use CSS variables instead of hardcoded color values

In line 199, the background-color is set directly to #e4e3e3. To maintain consistency and simplify future updates, consider using the existing --off-white CSS variable or define a new one if it doesn't match. This approach promotes a cohesive theme and eases maintenance.

Apply this diff to use the CSS variable:

-    background-color: #e4e3e3;
+    background-color: var(--off-white);

Committable suggestion was skipped due to low confidence.

color: var(--dark-slate);
/* Changed from #000000 to Dark Slate */
Expand Down Expand Up @@ -354,7 +354,7 @@ body {
margin-bottom: 20px;
font-weight: 600;
color: #fff;
border-bottom: 2px solid #3f10ea;
/* border-bottom: 2px solid #3f10ea; */
padding-bottom: 10px;
}

Expand Down Expand Up @@ -475,7 +475,7 @@ body {
right: 0;
background: #f9f9f9;
/* Updated background to a softer light color */
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
/* border-top: 0.1rem solid rgba(0, 0, 0, 0.1); */
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

Expand Down