You are currently viewing Create Review Section Page Using HTML & CSS

Create Review Section Page Using HTML & CSS

Create Review Section Page Using HTML & CSS

 

Create Review Section Page Using HTML & CSS
Create Review Section Page Using HTML & CSS

 

Welcome To The Codewithrandom Blog. In This Blog, We Learn How To Create A Review Section Page. We Use HTML And CSS For The Review Section Page.

I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The Review Section Page.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Html Code For Review Section

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Review Section Page</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="slider">
<div class="reviews">
<h2><span>/</span>reviews</h2>
</div>
<div class="slide-container">
</div>
<!-- buttons -->
<!-- prev btn -->
<button class="btn prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<!-- next button -->
<button class="btn next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</section>
<script type="module" src="app.js"></script>
</body>
</html>

There Is All The Html Code For The Review Section Page. Now, You Can See An Output With Review Section Page Then We Write Css And Javascript For The Review Section Page.

10+ Javascript Project Ideas For Beginners( Project Source Code)

Output Of Review Section Html

Review Section Page Using HTML & CSS
Output Of Review Section Html

 

Css Code Review Section

/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: hsl(205, 78%, 60%);
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Slider Styles
===============
*/
section {
width: 85vw;
max-width: var(--fixed-width);
margin: 0 auto;
margin-top: 5rem;
text-align: center;
padding: 1rem 0;
/* set relative for buttons */
position: relative;
}
.reviews {
margin-bottom: 4rem;
}
.reviews h2 {
display: flex;
align-items: center;
justify-content: center;
}
.reviews span {
font-size: 0.85em;
color: var(--clr-primary-5);
margin-right: 1rem;
}
.img {
width: 150px;
height: 150px;
object-fit: cover;
border: 1px solid var(--clr-grey-7);
background: var(--clr-white);
padding: 0.25rem;
border-radius: 50%;
box-shadow: var(--dark-shadow);
}
h4 {
text-transform: uppercase;
font-weight: 500;
color: var(--clr-primary-5);
letter-spacing: var(--spacing);
margin: 0.5rem 0;
}
.title {
margin-bottom: 1.25rem;
letter-spacing: 2px;
text-transform: capitalize;
}
.text {
color: var(--clr-grey-5);
line-height: 1.8;
max-width: 35em;
margin: 0 auto;
letter-spacing: 1px;
}
.icon:hover {
transform: scale(1.1);
opacity: 0.8;
}
.quote-icon {
font-size: 3rem;
margin-top: 2rem;
color: var(--clr-primary-5);
}
/* set buttons */
.btn {
position: absolute;
top: 175px;
background: var(--clr-grey-5);
color: var(--clr-white);
padding: 0.25rem 0.35rem;
border-radius: 0.25rem;
border: transparent;
cursor: pointer;
}
.next-btn {
right: -0.5rem;
}
.prev-btn {
left: -0.5rem;
}
@media screen and (min-width: 768px) {
.next-btn {
right: -5rem;
}
.prev-btn {
left: -5rem;
}
.btn {
font-size: 1.3rem;
padding: 0.35rem 0.5rem;
}
.quote-icon {
font-size: 4rem;
}
}
/* MORE CSS FOR JS */
.slide-container {
display: flex;
position: relative;
height: 450px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
opacity: 0;
}
.slide.active {
opacity: 1;
transform: translateX(0);
}
.slide.next {
transform: translateX(100%);
}
.slide.last {
transform: translateX(-100%);
}

Review Section Html Css Updated Output


review section html css
Review Section Html Css Updated Output

Javascript Code(App.js) For Review Section

 import data from "./data.js";
const container = document.querySelector(".slide-container");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
// if length is 1 hide buttons
if (data.length === 1) {
nextBtn.style.display = "none";
prevBtn.style.display = "none";
}
// if length is 2, add copies of slides
let people = [...data];
if (data.length === 2) {
people = [...data, ...data];
}
container.innerHTML = people
.map((person, slideIndex) => {
const { img, name, job, text } = person;
let position = "next";
if (slideIndex === 0) {
position = "active";
}
if (slideIndex === people.length - 1) {
position = "last";
}
if (data.length <= 1) {
position = "active";
}
return `<article class="slide ${position}">
<img src=${img} class="img" alt="${name}"/>
<h4>${name}</h4>
<p class="title">${job}</p>
<p class="text">
${text}
</p>
<div class="quote-icon">
<i class="fas fa-quote-right"></i>
</div>
</article>`;
})
.join("");
const startSlider = (type) => {
// get all three slides active,last next
const active = document.querySelector(".active");
const last = document.querySelector(".last");
let next = active.nextElementSibling;
if (!next) {
next = container.firstElementChild;
}
active.classList.remove(["active"]);
last.classList.remove(["last"]);
next.classList.remove(["next"]);
if (type === "prev") {
active.classList.add("next");
last.classList.add("active");
next = last.previousElementSibling;
if (!next) {
next = container.lastElementChild;
}
next.classList.remove(["next"]);
next.classList.add("last");
return;
}
active.classList.add("last");
last.classList.add("next");
next.classList.add("active");
};
nextBtn.addEventListener("click", () => {
startSlider();
});
prevBtn.addEventListener("click", () => {
startSlider("prev");
});

 

100+ Front-end Projects for Web developers (Source Code)

Javascript Code(Data.js) For Review Section

 const people = [
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg",
name: "peter doe",
job: "product manager",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis? `,
},
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
name: "susan doe",
job: "developer",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
},
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
name: "emma doe",
job: "designer",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
},
];
export default people;

Final Output Review Section Html Css Javascript

 

review section html css
Review Section Html Css Javascript

 

review section html css
Review Section Html Css Javascript

 

review section html css
Review Section Html Css Javascript

 

Now That We Have Completed Our Javascript Section,  Here Is Our Updated Output With HTML,CSS And Javascript. Hope You Like The Review Section Page.

5+ HTML CSS project With Source Code

You Can See The Output Video And Project Screenshots. See Our Other Blogs And Gain Knowledge In Front-end Development. Thank You !

This Post Teaches Us How To Create A Review Section Page Using Simple Html & Css And Javascript. If We Made A Mistake Or Any Confusion, Please Drop A Comment To Reply Or Help You In Easy Learning.

Written By – Code With Random/anki

Leave a Reply