Skip to content

Commit

Permalink
made review section responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mehak-Mattoo
Mehak-Mattoo committed Jun 30, 2024
1 parent 71dad2b commit 5655603
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 69 deletions.
99 changes: 96 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1231,6 +1231,11 @@ h5,
padding: 4rem;
background: #fff;
}

.stars i {
color: #ffc107;
margin-right: 5px;
}
@media (max-width: 991.98px) {
.service {
padding: 2rem;
Expand Down Expand Up @@ -1623,6 +1628,10 @@ h5,
transition: height 0.4s ease-in-out;
}

.heading {
font-weight: 600;
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
Expand Down Expand Up @@ -1675,6 +1684,10 @@ h5,
border: none;
}

.review-slider .swiper-wrapper .swiper-slide h3 {
font-weight: 400;
}

#contact button:hover {
background: rgb(199, 35, 199);
}
Expand All @@ -1685,6 +1698,9 @@ h5,
}

@media (min-width: 300px) {
.heading {
font-size: 1.8rem;
}
.accordion__question,
.accordion__answer {
font-size: 0.8rem;
Expand All @@ -1694,9 +1710,30 @@ h5,
width: 1.6rem;
height: 1.6rem;
}

.review-slider .swiper-wrapper .swiper-slide p {
font-size: 0.7rem;
}
.review-slider .swiper-wrapper .swiper-slide h3 {
font-size: 0.9rem;
}
.review-slider .swiper-wrapper .swiper-slide img {
height: 3rem;
width: 3rem;
}

.stars i {
font-size: 0.8rem !important;
}
}

@media (min-width: 576px) {
.heading {
font-size: 2rem;
}
.stars i {
font-size: 0.9rem !important;
}
.sub-title {
font-size: 2rem;
}
Expand All @@ -1709,40 +1746,96 @@ h5,
width: 1.7rem;
height: 1.7rem;
}
.slide h3 {
font-size: 1.1rem;
}

.review-slider .swiper-wrapper .swiper-slide p {
font-size: 0.9rem;
}
.review-slider .swiper-wrapper .swiper-slide h3 {
font-size: 1.1rem;
}
.review-slider .swiper-wrapper .swiper-slide img {
height: 5rem;
width: 5rem;
}
}

@media (min-width: 768px) {
.heading {
font-size: 2.5rem;
}
.stars i {
font-size: 1.1rem !important;
}
.sub-title {
font-size: 2.5rem;
}
.accordion__question,
.accordion__answer {
font-size: 1.5rem;
font-size: 1.3rem;
}

.slide h3 {
font-size: 1.2rem;
}

.accordion__icon {
width: 1.8rem;
height: 1.8rem;
}

.review-slider .swiper-wrapper .swiper-slide p {
font-size: 1.2rem;
}

.review-slider .swiper-wrapper .swiper-slide h3 {
font-size: 1.4rem;
}
.review-slider .swiper-wrapper .swiper-slide img {
height: 6rem;
width: 6rem;
}
}

@media (min-width: 992px) {
.heading {
font-size: 2.8rem;
}
.sub-title {
font-size: 3rem;
}
.accordion__question,
.accordion__answer {
font-size: 2rem;
font-size: 1.5rem;
}

.accordion__icon {
width: 2rem;
height: 2rem;
}

.review-slider .swiper-wrapper .swiper-slide p {
font-size: 1.4rem;
}
.review-slider .swiper-wrapper .swiper-slide h3 {
font-size: 1.6rem;
}
.review-slider .swiper-wrapper .swiper-slide img {
height: 8rem;
width: 8rem;
}
.stars i {
font-size: 1rem !important;
}
}

@media (min-width: 1200px) {
.heading {
font-size: 3rem;
}
.sub-title {
font-size: 3.5rem;
font-size: 2.5rem;
}
}
123 changes: 57 additions & 66 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,73 +681,64 @@ <h1> ABOUT US</h1>
</main>
</div>

<section class="review" id="review">

<h1 class="heading"> Student Reviews </h1>

<div class="swiper review-slider" data-aos="zoom-in">

<div class="swiper-wrapper">

<div class="swiper-slide slide">
<img src="img/pic-1.png" alt="">
<h3>Noah Lee</h3>
<p>I recently used Cabrental for a weekend trip and was thoroughly impressed. The booking process was seamless, and the website was intuitive and easy to navigate. The car was clean and in excellent condition, and the pick-up and drop-off process was quick and hassle-free. The customer service was exceptional—friendly and helpful staff made the experience even better. Highly recommended!</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>

<div class="swiper-slide slide">
<img src="img/pic-2.png" alt="">
<h3>Sophia Rossi</h3>
<p>Visual Sort is awesome! It's super intuitive and made learning algorithms fun. I spent hours playing around with different sorting methods. Definitely worth checking out.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>

<div class="swiper-slide slide">
<img src="img/pic-3.png" alt="">
<h3>Olivia Davis</h3>
<p>Visual Sort is a lifesaver for understanding sorting algorithms! The visualizations are so clear and interactive. I finally get how Bubble Sort and Merge Sort actually work.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-full-alt"></i>
</div>
</div>

<div class="swiper-slide slide">
<img src="img/pic-4.png" alt="">
<h3>Emma Brown</h3>
<p>Great tool for my algorithms class! The step-by-step animations helped me ace my exam on sorting algorithms. Highly recommend it for anyone struggling to grasp these concepts.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>

</div>

<div class="swiper-pagination"></div>

<section class="review" id="review">
<div class="container">
<h1 class="heading">Student Reviews</h1>
<div class="swiper review-slider" data-aos="zoom-in">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<img src="img/pic-1.png" alt="Noah Lee">
<h3>Noah Lee</h3>
<p>I recently used Visual Sort for my classes and was thoroughly impressed. The website was intuitive and easy to navigate. Highly recommended!</p>
<div class="stars">
<i class="fas fa-star" ></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>

</section>
<div class="swiper-slide slide">
<img src="img/pic-2.png" alt="Sophia Rossi">
<h3>Sophia Rossi</h3>
<p>Visual Sort is awesome! It's super intuitive and made learning algorithms fun. I spent hours playing around with different sorting methods. Definitely worth checking out.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="swiper-slide slide">
<img src="img/pic-3.png" alt="Olivia Davis">
<h3>Olivia Davis</h3>
<p>Visual Sort is a lifesaver for understanding sorting algorithms! The visualizations are so clear and interactive. I finally get how Bubble Sort and Merge Sort actually work.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-full-alt"></i>
</div>
</div>
<div class="swiper-slide slide">
<img src="img/pic-4.png" alt="Emma Brown">
<h3>Emma Brown</h3>
<p >Great tool for my algorithms class! The step-by-step animations helped me ace my exam on sorting algorithms. Highly recommend it for anyone struggling to grasp these concepts.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="faq" id="faq">
<div class="container_1">
<div class="accordion__wrapper">
Expand Down

0 comments on commit 5655603

Please sign in to comment.