Skip to content

Commit

Permalink
Merge pull request #628 from neeru24/patch-5
Browse files Browse the repository at this point in the history 
Enhancements to Review Section Styles
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 14, 2024
2 parents 0579f19 + fe1b089 commit f0d7887
Showing 1 changed file with 110 additions and 111 deletions.
221 changes: 110 additions & 111 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -935,8 +935,8 @@ body.dark-mode {
}

.dark-mode {
background-color: #121212; /* Dark mode background */
color: #e0e0e0; /* Dark mode text color */
background-color: #121212;
color: #e0e0e0;
}

/* Button styles */
Expand Down Expand Up @@ -1135,17 +1135,19 @@ body.dark-mode {
.reviews-section {
padding: 50px;
background-color: #F0F8FF;

display: flex; /* Centering the content */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}
.review{
display: flex;
justify-content: center;

.review {
display: flex;
justify-content: center;
}

.review-p{
font-size:small;
color:#543db0;
.review-p {
font-size: small;
color: #543db0;
font-style: italic;
font-weight: 500;
}
Expand All @@ -1163,15 +1165,21 @@ justify-content: center;
margin-bottom: 30px;
display: flex;
flex-direction: column;
width:40vw;
width: 40vw;
align-items: center;
justify-items: center;
transition: transform 0.3s ease; /* Transition for hover effect */
}

.review-form:hover {
transform: scale(1.02); /* Scale effect on hover */
}

.form{
.form {
margin-top: 10px;
width:30vw;
width: 30vw;
}

.review-form h3 {
font-size: 1.5em;
margin-bottom: 15px;
Expand All @@ -1195,6 +1203,13 @@ justify-content: center;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s ease; /* Transition for input fields */
}

.review-form input:hover,
.review-form select:hover,
.review-form textarea:hover {
border-color: #F7D160; /* Change border color on hover */
}

.review-form button {
Expand All @@ -1204,14 +1219,12 @@ justify-content: center;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s;
color:black;
font-size:14px;

color: black;
font-size: 14px;
}

.form-button{
.form-button {
text-align: center;

}

.reviews-container {
Expand Down Expand Up @@ -1315,21 +1328,25 @@ justify-content: center;
.reviews-list {
grid-template-columns: 1fr;
}
.form-button button{
width:100%;

.form-button button {
width: 100%;
}

.reviews-title {
font-size: 2em;
}

.review-card {
max-width: 400px;
margin: 0 auto;
}
.review-form{
width:60vw;

.review-form {
width: 60vw;
}
.form{

.form {
width: 50vw;
}
}
Expand All @@ -1338,50 +1355,75 @@ justify-content: center;
.reviews-container {
padding: 20px 10px;
}
.review-form{
width:80vw;

.review-form {
width: 80vw;
}
.form{
width:70vw;

.form {
width: 70vw;
}
.form-button button{
width:100%

.form-button button {
width: 100%;
}

.review-header {
flex-direction: column;
text-align: center;
}

.reviewer-avatar {
margin-right: 0;
margin-bottom: 10px;
}

.reviewer-info {
text-align: center;
}
}

/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.review-card {
animation: fadeIn 0.5s ease-out forwards;
opacity: 0;
}

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }
.review-card:nth-child(5) { animation-delay: 0.5s; }
.review-card:nth-child(1) {
animation-delay: 0.1s;
}

.review-card:nth-child(2) {
animation-delay: 0.2s;
}

.review-card:nth-child(3) {
animation-delay: 0.3s;
}

.review-card:nth-child(4) {
animation-delay: 0.4s;
}

.review-card:nth-child(5) {
animation-delay: 0.5s;
}

.review-item {
padding: 20px;
border: 1px solid #ccc; /* Light border in light mode */
border: 1px solid #ccc;
border-radius: 8px;
transition: border-color 0.3s ease;
}
Expand All @@ -1390,116 +1432,73 @@ justify-content: center;
border-color: #ccc;
}

.light-mode .reviews-section{
.light-mode .reviews-section {
background-color: white;
}

/* Dark Mode Styles for Reviews Section */
.dark-mode .reviews-section {
background-color: #121212; /* Dark background */
color: white; /* White text */
.dark-mode .reviews-section {
background-color: #121212;
color: white;
border: 2px solid white;
}

.dark-mode .review {
background-color: #1e1e1e; /* Dark background for review cards */
color: white; /* White text for review content */
border: 1px solid #ebe2e2; /* Darker border */
background-color: #1e1e1e;
color: white;
border: 1px solid #ebe2e2;
}

.dark-mode .review h4 {
color: #ffa500; /* Optional: Highlight the reviewer's name */
color: #ffa500;
}

.dark-mode .review label {
color: rgb(233, 220, 220);
}

.dark-mode .review p {
color: white; /* White text for review paragraphs */
color: white;
}

/* Adjusting rating stars color in dark mode */
.dark-mode .rating {
color: #ffcc00; /* Bright yellow stars for dark mode */
color: #ffcc00;
}

/* Dark Mode Styles for Review Form */
.dark-mode .review-form {
background-color: #121212; /* Dark background for the review form */
color: white; /* White text color */
padding: 20px; /* Padding for inner spacing */
border-radius: 5px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: shadow for depth */
background-color: #121212;
color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.review-form h1 {
margin-bottom: 10px; /* Space below heading */
margin-bottom: 10px;
}

.review-form label {
margin-top: 10px; /* Space above labels */
display: block; /* Makes the label block-level for better spacing */
margin-top: 10px;
display: block;
}

.dark-mode .review-form input,
.dark-mode .review-form select,
.dark-mode .review-form textarea
{
width: 100%; /* Full width */
padding: 10px; /* Padding inside fields */
background-color: #1e1e1e; /* Dark background for inputs */
color: white; /* White text */
border: 1px solid #333; /* Dark border */
border-radius: 4px; /* Slightly rounded corners */
margin-bottom: 10px; /* Space between fields */
}

.review-form input::placeholder,
.review-form textarea::placeholder {
color: #aaa; /* Lighter placeholder text */
.dark-mode .review-form textarea {
width: 100%;
background-color: #333;
color: white;
border: 1px solid #555;
padding: 10px;
}

.review-form button {
background-color: #333; /* Dark button background */
color: white; /* White button text */
border: none; /* No border */
padding: 10px 15px; /* Padding inside button */
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Pointer on hover */
.dark-mode .review-form button {
background-color: #ffa500;
color: black;
}

.review-form button:hover {
background-color: #444; /* Slightly lighter on hover */
}

.cab-booking-section input,
.cab-booking-section select {
width: 100%;
font-weight: 600;
padding: 20px;
height: 20px;
font-size: 15px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

.review-item h3 {
margin: 0 0 10px;
font-size: 1.2em;
color: #007bff; /* Blue color for headings */
}

.review-item p {
margin: 0 0 10px;
font-size: 1em;
color: black; /* Darker gray for text */
}

.rating {
color: #ffcc00; /* Star rating color */
font-size: 1.2em;
}

/* Popup Background */
.popup {
Expand Down Expand Up @@ -2166,4 +2165,4 @@ justify-content: center;
font-style: italic;
font-weight: 300;
margin: 0 0 20px;
}
}

0 comments on commit f0d7887

Please sign in to comment.