https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0110
Stumbled upon some interesting code to tinker with and came across this piece. Attempted to search online for solutions, but my grasp on React (or maybe Java?) is close to zero. Tried following guides from and with no luck. Any assistance would be highly appreciated! Pardon any formatting irregularities as I'm new to this.
CSS:
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|IBM+Plex+Sans:500&display=swap');
:root {
--color-primary: #6B7A8F;
--color-secondary: #101118;
--color-accent: #1D1F2F;
--color-focus: #6D64F7;
--base-duration: 600ms;
--base-ease: cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
// =========================
// Global
// =========================
...
JS:
const slideData = [
{
index: 0,
headline: 'New Fashion Apparel',
button: 'Shop now',
src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/fashion.jpg'
},
{
index: 1,
headline: 'In The Wilderness',
button: 'Book travel',
src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/forest.jpg'
},
{
index: 2,
headline: 'For Your Current Mood',
button: 'Listen',
src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/guitar.jpg'
},
{
index: 3,
headline: 'Focus On The Writing',
button: 'Get Focused',
src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/typewriter.jpg'
}
]
...