Created
February 4, 2022 06:46
-
-
Save jatinmehrotra/a1fdb3aeb6143152a525f878702b0e25 to your computer and use it in GitHub Desktop.
Hover over caroual image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.testimonial-section { | |
padding: 80px 0 80px; | |
background-image: url('../../../src/assets/Certificates/bg-1.jpg'); | |
background-position: center; | |
background-attachment: fixed; | |
position: relative; | |
z-index: -1; | |
} | |
.testimonial-section::before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
z-index: -1; | |
opacity: 0.85; | |
background-color: #1f2235; | |
} | |
.footer-image { | |
width: 100%; | |
height: 100%; | |
max-width: 1920px; | |
overflow: hidden; | |
display: flex; | |
justify-content: center; | |
margin-top: -110px; | |
} | |
.footer-image img { | |
max-width: 100%; | |
height: 130px; | |
} | |
.testimonial-section .testi-item { | |
background-color: white; | |
padding: 30px; | |
border-radius: 50px 50px 50px 0px; | |
} | |
.testimonial-section .testi-item p { | |
font-size: 16px; | |
line-height: 26px; | |
font-weight: 500; | |
margin: 0 0 10px; | |
font-style: italic; | |
} | |
.testimonial-section .testi-item p .fa-quote-left { | |
margin-right: 5px; | |
color: tomato; | |
} | |
.testimonial-section .testi-item p .fa-quote-right { | |
margin-left: 5px; | |
color: tomato; | |
} | |
.testimonial-section .client-info { | |
position: relative; | |
padding-left: 80px; | |
padding-top: 5px; | |
min-height: 60px; | |
} | |
.testimonial-section .client-info img { | |
height: 70px; | |
width: 70px; | |
border: 2px solid transparent; | |
border-color: black; | |
left: 30px; | |
top: -4px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.testimonial-section:hover .client-info img { | |
transform: scale3D(1.5, 1.5, 1.5); | |
} | |
.testimonial-section .client-info h5 { | |
font-size: 20px; | |
font-weight: 600; | |
line-height: 26px; | |
margin: 0 0 2px 10px; | |
position: absolute; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import OwlCarousel from 'react-owl-carousel'; | |
import 'owl.carousel/dist/assets/owl.carousel.css'; | |
import 'owl.carousel/dist/assets/owl.theme.default.css'; | |
import ScreenHeading from '../../utilities/ScreenHeading/ScreenHeading'; | |
import ScrollService from '../../utilities/ScrollService'; | |
import Animations from '../../utilities/Animations'; | |
import './Certificates.css'; | |
import clf from '../../img/Certs/clf.png'; | |
import shape from '../../img/Certs/shape-bg.png'; | |
export default function Certificate(props) { | |
let fadeInScreenHandler = (screen) => { | |
if (screen.fadeInScreen !== props.id) return; | |
Animations.animations.fadeInScreen(props.id); | |
}; | |
const fadeInSubscription = | |
ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler); | |
const options = { | |
loop: true, | |
margin: 0, | |
nav: true, | |
animateIn: 'bounceInRight', | |
animateOut: 'bounceOutRight', | |
dots: true, | |
autoplay: true, | |
smartSpeed: 1000, | |
responsive: { | |
0: { | |
items: 1, | |
}, | |
768: { | |
items: 1, | |
}, | |
1000: { | |
items: 3, | |
}, | |
}, | |
}; | |
return ( | |
<div> | |
<ScreenHeading | |
title={'Certifications'} | |
subHeading={'I love validating my skills'} | |
/> | |
<section className="testimonial-section fade-in" id={props.id || ''}> | |
<div className="container"> | |
<div className="row"> | |
<OwlCarousel | |
className="owl-carousel" | |
id="testimonial-carousel" | |
{...options} | |
> | |
<div className="col-lg-12"> | |
<div className="testi-item"> | |
<div className="testi-comment"> | |
<p> | |
<i className="fa fa-quote-left" /> | |
Learning about core aws services, shared responsibility | |
model and billing and pricing concepts was an eyeopener | |
for me as a cloud engineer. | |
<i className="fa fa-quote-right" /> | |
</p> | |
</div> | |
<div className="client-info"> | |
<img src={clf} alt="no internet connection"></img> | |
<h5>AWS CLF-01</h5> | |
<p></p> | |
</div> | |
</div> | |
</div> | |
<div className="col-lg-12"> | |
<div className="testi-item"> | |
<div className="testi-comment"> | |
<p> | |
<i className="fa fa-quote-left" /> | |
Coming Soon 💯 | |
<i className="fa fa-quote-right" /> | |
</p> | |
</div> | |
<div className="client-info"> | |
{/* <img src={mike} alt="no internet connection"></img> */} | |
<h5>AWS SAA</h5> | |
</div> | |
</div> | |
</div> | |
<div className="col-lg-12"> | |
<div className="testi-item"> | |
<div className="testi-comment"> | |
<p> | |
<i className="fa fa-quote-left" /> | |
Coming Soon 💯 | |
<i className="fa fa-quote-right" /> | |
</p> | |
</div> | |
<div className="client-info"> | |
{/* <img src={clf} alt="no internet connection"></img> */} | |
<h5>AWS DVA</h5> | |
</div> | |
</div> | |
</div> | |
</OwlCarousel> | |
</div> | |
</div> | |
</section> | |
<div className="footer-image"> | |
<img src={shape} alt="Phot0 not responding" /> | |
</div> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment