Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhancing the UI of Testimonial Section #199

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Enhancing the UI of Testimonial Section #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f29d1c
Update Testimonial.jsx
Vishalk91-4 Jun 2, 2023
05a33ab
Update Testimonial.css
Vishalk91-4 Jun 2, 2023
636b3d8
Update TestimonialData.js
Vishalk91-4 Jun 2, 2023
3e8e2a9
Add files via upload
Vishalk91-4 Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added client/src/Assets/chloe.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 62 additions & 7 deletions client/src/CSS/Testimonial.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
}

.testimonials-title{
text-align: center;
color: #0D2F3F;

font-size: 3rem;
Expand All @@ -80,12 +81,10 @@

.Testimonial{
background: rgb(255, 255, 255);

overflow: hidden;
display: flex;
box-shadow: rgba(0, 0, 0, 0.05) -3px 11px 13px 0px;
flex-direction: column;
align-items: center;
justify-content: center;
width: 23vw;
min-width: 29vw;
height: 50vh;
Expand Down Expand Up @@ -119,6 +118,52 @@
}
}

.Testimonial .content {
display:flex;
flex-direction: column;
align-items: center;
position: initial;
content: "";
display: flex;
height: 40%;
width: 100%;
padding-top: 0;
background: chartreuse;
border-radius: 30px 30px 0 0;
}

.Testimonial .testimonial-img{
margin-top: 20px;
height: 160px;
width: 160px;
padding: 3px;
border-radius: 70%;

background: #fff;
object-fit:cover;
border-radius: 50%;
position: static;

}

.Testimonial .media-icons {
position:absolute;

display: flex;
color: #000;
flex-direction: column;
align-items: left;
}

.Testimonial img{
height: 100%;
width: 100%;
object-fit:cover;
border-radius: 50%;
z-index: 1000;

}

.Testimonial:hover{
transform: scale(1.03);
box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02);
Expand All @@ -135,7 +180,7 @@
content: '';
pointer-events: none;
}

}
&::before {
transform-origin: left top;
}
Expand All @@ -150,8 +195,17 @@
&::after {
transform: scale3d(1, 1, 1);
}
}

}
/*
.Testimonial::before {
content: "";
display: flex;
height: 40%;
width: 100%;
padding-top: 0;
background: #2ae886eb;
} */

.testimonial-img{
width: 5vw;
Expand All @@ -176,5 +230,6 @@
}

.testimonial_email{
color: #070707;
}
color: grey;
}

14 changes: 7 additions & 7 deletions client/src/Components/Testimonial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React from 'react'
import "../CSS/Testimonial.css"


export default function Testimonial(props) {
return (
<div className='Testimonial'>
<img src={require("../Assets/himesh.jpg")} alt="" className='testimonial-img' />
<div className="testimonial-text sans-serif">
{props.text}
</div>
<hr style={{"BackgroundColor": "white", "width": "30%", "marginTop": "2vh"}} />
<hr style={{"BackgroundColor": "white", "width": "30%"}} />
<hr style={{"BackgroundColor": "white", "width": "30%", "marginBottom": "2vh"}} />
<div className='content'>
<img src={require("../Assets/chloe.jpg")} alt="" className='testimonial-img' />
<div className="testimonial_name sans-serif" >
{props.name}
</div>
<div className="testimonial_email sans-serif">
{props.email}
</div>
<div className="testimonial-text sans-serif">
{props.text}
</div>
</div>

</div>
)
Expand Down
41 changes: 21 additions & 20 deletions client/src/utils/TestimonialData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
const testimonialList = [
{
img_src: "../Assets/himesh.jpg",
text: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? ",
name: "ipsum dolor",
email: "xyz@gmail.com"
img_src: "../Assets/chloe.jpg",
text: "Since subscribing to the technical developer newsletter, my knowledge and skills have grown exponentially. ",
name: "Alya Abbot",
email: "alyaabbot@gmail.com"
},
{
img_src: "../Assets/himesh.jpg",
text: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? ",
name: "ipsum dolor",
img_src: "../Assets/chloe.jpg",
text: "The concise and well-structured articles provide me with the knowledge I need without overwhelming me with unnecessary details",
name: "Chris Taylor",

email: "xyz@gmail.com"
email: "chrisedu@gmail.com"
},
{
img_src: "../Assets/himesh.jpg",
text: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? ",
name: "ipsum dolor",
email: "xyz@gmail.com"
img_src: "../Assets/chloe.jpg",
text: " It's a treasure trove of practical tips, in-depth tutorials, and thought-provoking industry analyses.",
name: "Alyssa Healey",
email: "alyssahvd@gmail.com"
},
{
img_src: "../Assets/himesh.jpg",
text: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? ",
name: "ipsum dolor",
email: "xyz@gmail.com"
img_src: "../Assets/chloe.jpg",
text: "The team behind it truly understands the needs of developers and consistently delivers high-quality content.",
name: "Max Muller",
email: "maxmuller@gmail.com"
},
{
img_src: "../Assets/himesh.jpg",
text: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? ",
name: "ipsum dolor",
email: "xyz@gmail.com"
img_src: "../Assets/chloe.jpg",
text: "This Newsletter has expanded my technical knowledge but also inspired me to explore new areas and experiment with different technologies.",
name: "Johannasen",
email: "johannasen@gmail.com"
},

]

export default testimonialList;