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

✔️Improved the Complete Testimonials Section #720

Merged
merged 2 commits into from
Aug 10, 2024
+111 −27
Merged

✔️Improved the Complete Testimonials Section #720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c054423
Update testimonials.jsx
aslams2020 Aug 10, 2024
c39b3e6
Update Testimonials.css
aslams2020 Aug 10, 2024
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
91 changes: 77 additions & 14 deletions src/Components/Testimonials/Testimonial.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
font-family: "Poppins", sans-serif;
}

.testimonial_head {
font-size: 30px;
text-shadow: 1px 1px 2px rgb(34, 30, 255), 0 0 1em #00d0ff, 0 0 0.2em #00d0ff8c;
color: white;
}

.wrapper {
/* max-width: 1100px; */
width: 100%;
Expand All @@ -25,18 +31,26 @@
position: absolute;
text-align: center;
line-height: 50px;
background: #fff;
background: #212EA0 !important;
border-radius: 50%;
box-shadow: 1px 3px 6px rgba(0, 0, 0, 1);
transform: translateY(-50%);
transition: transform 0.1s linear;
color: gray;
color: rgb(255, 255, 255) !important;
}

#left {
position: absolute;
left: 0;
z-index: 1;
background-color:#212EA0;
color: white;

}

#left:hover, #right:hover {
background-color:#3c4de8 !important;
box-shadow: 0px 2px 5px rgb(98, 0, 113);
}

.wrapper i:active {
Expand Down Expand Up @@ -96,22 +110,53 @@
}

.carousel .card {
transition: all 0.4s;
/* transition: all 0.4s; */
scroll-snap-align: start;
list-style: none;
cursor: pointer;
/* padding-inline:1rem; */
padding-bottom: 15px;
padding-top: 35px;
flex-direction: column;
/* padding-bottom: 15px; */
/* padding-top: 35px; */
border-radius: 8px;
/* padding: 2rem; */
/* overflow: hidden; */
position: relative;
display: flex;
flex-direction: column;
/* align-items: center; */
/* background-color: rgb(0,0,85); */
border: 1px solid #00d9ff !important;
box-shadow: 0 1px 3px rgba(47, 0, 255, 0.959) !important;
padding: 1rem;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.3s ease;
background-color: #dce1ff !important;
}

.carousel .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(129deg, #0054c2 50%, #d4f0ff 51%) !important;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
transform: translate(-100%, -100%);
opacity: 0;
z-index: -1;
}

.carousel .card:hover::before {
transform: translate(0, 0);
opacity: 1;
/* background: linear-gradient(167deg, rgb(169, 216, 255),#0800fa) !important; */
}
.carousel .card:hover {
/* background: linear-gradient(167deg, rgb(169, 216, 255),#0800fa) !important; */
transform: scale(1.01);
box-shadow: 0 4px 6px rgba(5, 205, 208, 0.752);
}
.carousel .card .img {
/* background: #212EA0; */
background: #212EA0;
height: 148px;
width: 148px;
border-radius: 50%;
Expand All @@ -120,7 +165,6 @@
align-items: center;
background: #212EA0;
box-shadow: 0 0 0 0 #212EA0;

}

.card .img img {
Expand All @@ -132,6 +176,12 @@
display: flex;
justify-content: center;
align-items: center;
}


.carousel .card:hover img {
box-shadow: -1px 3px 15px rgb(0, 229, 255);
border: 4px solid rgb(255, 255, 84);

}

Expand Down Expand Up @@ -180,12 +230,24 @@
.carousel .card:hover .info {}

.carousel .card .info h2 {
margin: 20px 0 0;
font-size: 1.2rem;
/* margin-bottom: -2px; */
/* font-weight: 500; */
/* margin: 20px 0 0; */
font-size: 1.4rem;
transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.4s ease-out;
}

.carousel .card:hover .info h2 {
text-shadow: 1px 1px 2px #a30160, 0 0 1em #00fffb, 0 0 0.2em #00fffb;
color: rgb(255, 255, 255) !important;
text-decoration: underline;
transform: scale(1.1);

}

.carousel .card:hover .info span {
text-shadow: 1px 1px 2px #02146e, 0 0 1em #001aff, 0 0 0.2em #001aff;
color: white;
/* transform: scale(1.05); */
}
.carousel .card .info span {
/* margin: 5px; */
margin: 0 10px;
Expand All @@ -195,6 +257,7 @@
display: flex;
justify-content: center;
margin-bottom: 15px;
transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.4s ease-out;
}

.carousel .card:hover {
Expand Down
47 changes: 34 additions & 13 deletions src/Components/Testimonials/Testimonials.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function Testimonials() {
<div className="info">
<h2>Blanche Pearson</h2>
<span className="text">
StartConnectHub transformed my idea into a thriving business
StartConnectHub transformed my idea into a thriving business. The platform provided the perfect blend of resources and networking opportunities.StartConnectHub's intuitive interface and supportive community.
</span>
</div>
</li>
Expand All @@ -63,19 +63,18 @@ function Testimonials() {
<div className="info">
<h2>Noah</h2>
<span className="text">
Connecting with investors was seamless and rewarding.
Connecting with investors was seamless and rewarding. Thanks to StartConnectHub, I found the perfect partner who believed in my vision and helped me scale my startup to new heights.
</span>
</div>
</li>

<li className={`card ${cardTheme}`}>
<div className="img">
<img src="user-3.png" alt="img" draggable="false" />
</div>
<div className="info">
<h2>Mia</h2>
<span className="text">
Innovative platform for turning dreams into reality.
Innovative platform for turning dreams into reality. StartConnectHub's intuitive interface and supportive community made it easy for me to navigate the startup ecosystem and find success.
</span>
</div>
</li>
Expand All @@ -86,8 +85,9 @@ function Testimonials() {
<div className="info">
<h2>James Khosravi</h2>
<span className="text">
Empowering entrepreneurs to achieve their goals
</span></div>
Empowering entrepreneurs to achieve their goals. StartConnectHub provided the tools and connections I needed to take my startup from an idea to a fully operational business.
</span>
</div>
</li>
<li className={`card ${cardTheme}`}>
<div className="img">
Expand All @@ -96,8 +96,9 @@ function Testimonials() {
<div className="info">
<h2>Sophia</h2>
<span className="text">
Investors found my next big opportunity here.
</span></div>
Investors found my next big opportunity here. StartConnectHub made it possible to connect with the right people at the right time, leading to successful partnerships that have driven.
</span>
</div>
</li>
<li className={`card ${cardTheme}`}>
<div className="img">
Expand All @@ -106,19 +107,39 @@ function Testimonials() {
<div className="info">
<h2>Donald Horton</h2>
<span className="text">
A community dedicated to shaping the future.
</span></div>
A community dedicated to shaping the future. StartConnectHub is more than just a platform; it's a vibrant community of innovators and investors working together to create the next generation of successful startups.
</span>
</div>
</li>
<li className={`card ${cardTheme}`}>
<div className="img">
<img src="user-4.png" alt="img" draggable="false" />
</div>
<div className="info">
<h2>Ella Richardson</h2>
<span className="text">
StartConnectHub provided me with invaluable mentorship and guidance, helping me avoid common pitfalls and fast-track my startup's growth.
</span>
</div>
</li>
<li className={`card ${cardTheme}`}>
<div className="img">
<img src="user-1.png" alt="img" draggable="false" />
</div>
<div className="info">
<h2>Liam Bennett</h2>
<span className="text">
The networking opportunities on StartConnectHub are unmatched. I was able to connect with industry leaders who provided crucial insights and support for my startup.
</span>
</div>
</li>
</ul>
<i
id="right"
className="fa-solid fa-angle-right"
onClick={() => scrollCarousel("right")}
></i>


</div>

</div>
</>
);
Expand Down