Skip to content

Commit

Permalink
improved look and feel of review page
Browse files Browse the repository at this point in the history
  • Loading branch information
Shubhankar-1 committed Oct 8, 2022
1 parent f231524 commit c18944f
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 136 deletions.
2 changes: 2 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -555,6 +555,7 @@ section.home {
font-size: 2.2rem;
font-weight: 500;
background-color: #202020;
border-radius: 20px;
color: #ffffff;
padding: 10px 20px;
}
Expand All @@ -579,6 +580,7 @@ section.home {
width: 500px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
border-radius: 20px;
padding: 20px;
margin: 15px;
cursor: pointer;
Expand Down
304 changes: 168 additions & 136 deletions review.html
Original file line number Diff line number Diff line change
@@ -1,162 +1,194 @@
<!--doctype html-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Customer review</title>
<!--Stylesheet--------------------------->
<link rel="stylesheet" href="css/style.css" />
<link
rel="icon"
href="https://img-premium.flaticon.com/png/512/4594/premium/4594828.png?token=exp=1633490558~hmac=787a7e8f464c8daf3b270f60d5241cfd"
/>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>Customer review</title>
<!--Stylesheet--------------------------->
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" href="https://img-premium.flaticon.com/png/512/4594/premium/4594828.png?token=exp=1633490558~hmac=787a7e8f464c8daf3b270f60d5241cfd" />
<!--poppins-font-family------------------->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<!--using-Font-Awesome-------------------->
<script
src="https://kit.fontawesome.com/c8e4d183c2.js"
crossorigin="anonymous"
></script>
</head>

<!--poppins-font-family------------------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!--using-Font-Awesome-------------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

<body>
<div>
<a href="feedback.html">
<p style = "margin-top: 20px;margin-left: 80%"><i class="far fa-edit"></i> Write your review here!</p>
</a>
</div>
<!--Testimonials------------------->
<section id="testimonials">
<!--heading--->
<div class="testimonial-heading">

<h1>Customer Reviews</h1>
<body>
<div>
<a href="feedback.html">
<p style="margin-top: 10px; margin-left: 80%">
<i class="far fa-edit"></i> Write your review here!
</p>
</a>
</div>
<!--testimonials-box-container------>
<div class="testimonial-box-container">
<!--BOX-1-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p1.jfif" />
<!--Testimonials------------------->
<section id="testimonials">
<!--heading--->
<div class="testimonial-heading">
<h1>Customer Reviews</h1>
</div>
<!--testimonials-box-container------>
<div class="testimonial-box-container">
<!--BOX-1-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p1.jfif" />
</div>
<!--name-and-username-->
<div class="name-user">
<strong>saachi Ijaz</strong>
<span>@saachijazweb</span>
</div>
</div>
<!--name-and-username-->
<div class="name-user">
<strong>saachi Ijaz</strong>
<span>@saachijazweb</span>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
</div>
</div>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
<!--Comments---------------------------------------->
<div class="client-comment">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Exercitationem, quaerat quis? Provident
temporibus architecto asperiores nobis maiores nisi
a. Quae doloribus ipsum aliquam tenetur voluptates
incidunt blanditiis sed atque cumque.
</p>
</div>
</div>
<!--Comments---------------------------------------->
<div class="client-comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
</div>
</div>
<!--BOX-2-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p2.jfif" />
<!--BOX-2-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p2.jfif" />
</div>
<!--name-and-username-->
<div class="name-user">
<strong>pulkit</strong>
<span>@bullshit</span>
</div>
</div>
<!--name-and-username-->
<div class="name-user">
<strong>pulkit</strong>
<span>@bullshit</span>
<!--reviews------>
<div class="reviews">
<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>
<!--Empty star-->
</div>
</div>
<!--reviews------>
<div class="reviews">
<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>
<!--Empty star-->
<!--Comments---------------------------------------->
<div class="client-comment">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Exercitationem, quaerat quis? Provident
temporibus architecto asperiores nobis maiores nisi
a. Quae doloribus ipsum aliquam tenetur voluptates
incidunt blanditiis sed atque cumque.
</p>
</div>
</div>
<!--Comments---------------------------------------->
<div class="client-comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
</div>
</div>
<!--BOX-3-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p3.jfif" />
<!--BOX-3-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p3.jfif" />
</div>
<!--name-and-username-->
<div class="name-user">
<strong>Jatin </strong>
<span>@gucamole</span>
</div>
</div>
<!--name-and-username-->
<div class="name-user">
<strong>Jatin </strong>
<span>@gucamole</span>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
</div>
</div>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
<!--Comments---------------------------------------->
<div class="client-comment">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Exercitationem, quaerat quis? Provident
temporibus architecto asperiores nobis maiores nisi
a. Quae doloribus ipsum aliquam tenetur voluptates
incidunt blanditiis sed atque cumque.
</p>
</div>
</div>
<!--Comments---------------------------------------->
<div class="client-comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
</div>
</div>
<!--BOX-4-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p4.jfif" />
<!--BOX-4-------------->
<div class="testimonial-box">
<!--top------------------------->
<div class="box-top">
<!--profile----->
<div class="profile">
<!--img---->
<div class="profile-img">
<img src="images/p4.jfif" />
</div>
<!--name-and-username-->
<div class="name-user">
<strong>Romil</strong>
<span>@Olivaadward</span>
</div>
</div>
<!--name-and-username-->
<div class="name-user">
<strong>Romil</strong>
<span>@Olivaadward</span>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
</div>
</div>
<!--reviews------>
<div class="reviews">
<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="far fa-star"></i>
<!--Empty star-->
<!--Comments---------------------------------------->
<div class="client-comment">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Exercitationem, quaerat quis? Provident
temporibus architecto asperiores nobis maiores nisi
a. Quae doloribus ipsum aliquam tenetur voluptates
incidunt blanditiis sed atque cumque.
</p>
</div>
</div>
<!--Comments---------------------------------------->
<div class="client-comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
</div>
</div>
</div>
</section>
</body>

</html>
</section>
</body>
</html>

0 comments on commit c18944f

Please sign in to comment.