Text

<p class="large" style="white-space:pre-line;text-align:center"><strong>Thank You for Being Part of the <span style="color:#fd0201">CNYS Black Expo</span> 5th Anniversary Celebration</strong></p>
<h1 style="white-space:pre-line;text-align:center"><strong><em>5 Years of</em></strong></h1>

Embed

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dynamically Changing Title Slider</title>

<style>
/*This is the body background colour and is non-essential to functionality*/
body{
background: #3b3d3d;
}

/*This is the dynamic h1 class where all the changes are controlled from*/
.changingtext::before{
content: "Impact";
display: block;
position: relative;
color: #FF0000;
text-align: center;
font-family: 'Avenir Next', 'Roboto', sans-serif;
font-size: 5vw;
line-height: 1;
letter-spacing: -0.02em;
font-weight: 800;
animation-name: mychangea;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

/*These are the keyframes that change the titles in the dynamic h1; I've created a sequence with varying opacities to produce a smoother transition between titles - feel free to further tweak these to your preference*/
@keyframes mychangea{
0% {content: "Impact"; opacity: 0.58;}
10% {content: "Impact"; opacity: 1;}
19% {content: "Impact"; opacity: 0;}
20% {content: "Community"; opacity: 0;}
30% {content: "Community"; opacity: 1;}
39% {content: "Community"; opacity: 0;}
40% {content: "Connection"; opacity: 0;}
50% {content: "Connection"; opacity: 1;}
59% {content: "Connection"; opacity: 0;}
60% {content: "Resilience"; opacity: 0;}
70% {content: "Resilience"; opacity: 1;}
79% {content: "Resilience"; opacity: 0;}
80% {content: "Opportunity"; opacity: 0;}
90% {content: "Opportunity"; opacity: 1;}
99% {content: "Opportunity"; opacity: 0;}
100% {content: "Impact"; opacity: 0;}
}
</style>
</head>



<body>
<div class="homepagebox">
<h1 class="changingtext"></h1>
</div>
</body>
</html>

Gallery

<h2 style="white-space:pre-line;text-align:center"><strong>Stay Tuned for Next Year's Registration Announcement</strong></h2>

Text + image

<h3 style="white-space:pre-line">Networking Opportunities</h3>
<p>The CNYS Black Expo is the perfect opportunity to network with members of the Black community. With a network of businesses, community partners, volunteers, and sponsors, you’ll be able to meet and mingle with people from all walks of life. Whether you’re looking to start a business, find a job, or just learn more about the culture, you’ll find something at the CNYS Black Expo. Plus, you’ll be able to exchange ideas and build connections that can last a lifetime.</p>

<h3 style="white-space:pre-line"><span style="color:#ff0000">Five Years</span> With Us</h3>
<p>This November marks the fifth anniversary of the CNYS Black Expo. We’re proud to have been able to bring together members of the Black community for five years and we’re looking forward to many more. Join us this November to celebrate five years of the CNYS Black Expo and all that it has to offer.</p>