Skip to content

Commit

Permalink
Create Feedback section and update style css
Browse files Browse the repository at this point in the history
  • Loading branch information
@MeiCloudie
MeiCloudie committed May 29, 2024
1 parent 05dd8aa commit 14aebb9
Show file tree
Hide file tree
Showing 2 changed files with 219 additions and 5 deletions.
68 changes: 68 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -944,6 +944,74 @@ body {
border-bottom-left-radius: 3px;
}

/* --------------------FEEDBACK-------------------- */
.feedback {
background-color: var(--bg-grey-color);
}

/* Điều chỉnh Control của Carousel */
.feedback .owl-dots {
text-align: center;
/* display: flex;
align-items: center;
justify-content: center; */
}

.feedback .owl-dots button {
outline: none;
padding: 0 8px !important;
}

.feedback .owl-dots button span {
background-color: #213364;
display: block;
width: 10px;
height: 10px;
opacity: 0.5;
border-radius: 50%;
transition: all 0.3s;
}

.feedback .owl-dots button:hover span,
.feedback .owl-dots button.active span {
opacity: 1;
transform: scale(1.5);
}

/* Slide */
.feedback__slide {
max-width: 800px;
margin: 0 auto 50px;
}

.feedback__slide blockquote {
color: var(--text-color);
font-size: 1.8rem;
text-align: center;
padding: 20px;
margin-bottom: 0;
}

/* Author */
.feedback_img {
overflow: hidden;
width: 70px;
height: 70px;
margin-right: 20px;
border-radius: 50%;
}

.feedback__author-desc h4 {
color: var(--title-color);
font-size: 2rem;
font-weight: 600;
}

.feedback__author-desc span {
color: var(--text-color);
font-size: 1.7rem;
}

/* --------------------BACK TO TOP-------------------- */
.backToTop {
text-align: center;
Expand Down
156 changes: 151 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,6 +671,146 @@ <h3>Web design, marketing & SEO solutions that get results</h3>
</div>
</section>

<!-- ------------------------FEEDBACK------------------------ -->
<section class="feedback section">
<div class="feedback__content container">
<!-- Title -->
<div class="title">
<p>HAPPY CLIENTS FEEDBACK</p>
<h3>Reviews and Testimonials</h3>
</div>

<!-- Carousel Information -->
<div class="owl-carousel">
<!-- Slide -->
<div class="feedback__slide">
<!-- Comment -->
<blockquote
cite="https://wp.w3layouts.com/corpvision/"
class="feeadback__comment"
>
<q>
Lorem ipsum dolor sit amet elit. Velit beatae laudantium
voluptate rem ullam dolore nisi voluptatibus esse quasi,
doloribus tempora. Dolores molestias adipisci dolo amet!. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Esse
architecto est ea sunt eligendi cum?
</q>
</blockquote>
<!-- Author -->
<div
class="feedback__author d-flex align-items-center justify-content-center mt-2"
>
<div class="feedback_img">
<img
src="./img/team1.jpg"
alt="John wilson img"
class="img-fluid"
/>
</div>
<div class="feedback__author-desc">
<h4>John wilson</h4>
<span>Student</span>
</div>
</div>
</div>

<!-- Slide -->
<div class="feedback__slide">
<!-- Comment -->
<blockquote
cite="https://wp.w3layouts.com/corpvision/"
class="feeadback__comment"
>
<q>
Lorem ipsum dolor sit amet elit. Velit beatae laudantium
voluptate rem ullam dolore nisi voluptatibus esse quasi,
doloribus tempora. Dolores molestias adipisci dolo amet!.
</q>
</blockquote>
<!-- Author -->
<div
class="feedback__author d-flex align-items-center justify-content-center mt-2"
>
<div class="feedback_img">
<img
src="./img/team2.jpg"
alt="Julia sakura img"
class="img-fluid"
/>
</div>
<div class="feedback__author-desc">
<h4>Julia sakura</h4>
<span>Student</span>
</div>
</div>
</div>

<!-- Slide -->
<div class="feedback__slide">
<!-- Comment -->
<blockquote
cite="https://wp.w3layouts.com/corpvision/"
class="feeadback__comment"
>
<q>
Lorem ipsum dolor sit amet elit. Velit beatae laudantium
voluptate rem ullam dolore nisi voluptatibus esse quasi,
doloribus tempora. Dolores molestias adipisci dolo amet!.
</q>
</blockquote>
<!-- Author -->
<div
class="feedback__author d-flex align-items-center justify-content-center mt-2"
>
<div class="feedback_img">
<img
src="./img/team3.jpg"
alt="Roy Linderson img"
class="img-fluid"
/>
</div>
<div class="feedback__author-desc">
<h4>Roy Linderson</h4>
<span>Student</span>
</div>
</div>
</div>

<!-- Slide -->
<div class="feedback__slide">
<!-- Comment -->
<blockquote
cite="https://wp.w3layouts.com/corpvision/"
class="feeadback__comment"
>
<q>
Lorem ipsum dolor sit amet elit. Velit beatae laudantium
voluptate rem ullam dolore nisi voluptatibus esse quasi,
doloribus tempora. Dolores molestias adipisci dolo amet!.
</q>
</blockquote>
<!-- Author -->
<div
class="feedback__author d-flex align-items-center justify-content-center mt-2"
>
<div class="feedback_img">
<img
src="./img/team4.jpg"
alt="Smith Johnson img"
class="img-fluid"
/>
</div>
<div class="feedback__author-desc">
<h4>Smith Johnson</h4>
<span>Student</span>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- ------------------------FOOTER------------------------ -->
<footer class="footer">
<!-- Footer Contact -->
Expand Down Expand Up @@ -850,6 +990,14 @@ <h3>META</h3>
referrerpolicy="no-referrer"
></script>

<!-- Jquery Migrate -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js"
integrity="sha512-KgffulL3mxrOsDicgQWA11O6q6oKeWcV00VxgfJw4TcM8XRQT8Df9EsrYxDf7tpVpfl3qcYD96BpyPvA4d1FDQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

<!-- Bootstrap JavaScript Libraries -->
<!-- Popper -->
<script
Expand All @@ -873,11 +1021,9 @@ <h3>META</h3>
referrerpolicy="no-referrer"
></script>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
})
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
})
</script>

Expand Down

0 comments on commit 14aebb9

Please sign in to comment.