I am building an on-boarding screen.
It has few cards, you can switch between them using the next and back buttons.
I've been trying to make the next and back buttons work using only :target
So, I've given each card an ID and each button a href="#id".
As far as I can tell, everything is set up for it to work, but it is not working.
/*////////////////////////////////////////////////////////////////////////////*/
/*onboarding canvas*/
/*////////////////////////////////////////////////////////////////////////////*/
#onboarding-canvas {
position: fixed;
top: 0; left: 0;
right: 0; bottom: 0;
width: 100%;
height: 100%;
z-index: 10000000;
overflow-y: overlay;
}
/*==========================================================================*/
/*onboarding intro*/
#onboarding-canvas .onboarding-intro {
color: #fff;
background-color: #4E42C3;
display: table;
vertical-align: middle;
position: fixed;
left: 0; right: 0;
bottom: 0; top: 0;
width: 100%;
height: 100%;
pointer-events: none;
animation-name: onboardingIntro;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 13s;
}
@keyframes onboardingIntro {
0% {
}
100% {
background-color: transparent;
}
}
@-webkit-keyframes onboardingIntro {
0% {
}
100% {
background-color: transparent;
}
}
#onboarding-canvas .onboarding-intro-stages {
display: table-cell;
vertical-align: middle;
position: relative;
margin: 0 auto;
}
#onboarding-canvas .onboarding-intro-stage {
position: absolute;
margin-top: -40px;
left: 0; right: 0;
opacity: 0;
}
#onboarding-canvas .onboarding-intro-stage p {
font-size: 1.7em;
}
/*onboarding intro animation*/
#onboarding-canvas .onboarding-intro .stage1 {
animation-name: onboardingIntroStage1;
animation-duration: 4s;
animation-delay: 1s;
}
#onboarding-canvas .onboarding-intro .icon-hand-wave {
width: 100%;
font-size: 2em;
margin-bottom: 50px;
}
@keyframes onboardingIntroStage1 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes onboardingIntroStage1 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#onboarding-canvas .onboarding-intro .stage2 {
animation-name: onboardingIntroStage2;
animation-duration: 4s;
animation-delay: 5s;
}
@keyframes onboardingIntroStage2 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes onboardingIntroStage2 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#onboarding-canvas .onboarding-intro .stage3 {
animation-name: onboardingIntroStage2;
animation-duration: 4s;
animation-delay: 9s;
}
@keyframes onboardingIntroStage3 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes onboardingIntroStage3 {
0% {
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*onboarding fireworks*/
#onboarding-canvas .onboarding-intro .fireworks {
pointer-events: none;
animation-name: onboarding-intro-fireworks;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 5s;
}
@keyframes onboarding-intro-fireworks {
0% {
}
100% {
opacity: 0;
}
}
@-webkit-keyframes onboarding-intro-fireworks {
0% {
}
100% {
opacity: 0;
}
}
/*==========================================================================*/
/*onboarding card*/
#onboarding-canvas .onboarding-cards {
background-color: rgba(39,47,65,0.95);
padding: 20px 20px 90px 20px;
width: 100%;
height: 100vh;
display: table;
overflow-y: scroll;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
/*onboarding card wrapper*/
#onboarding-canvas .onboarding-card-wrapper {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
display: none;
}
#onboarding-canvas > div > div:target {
display: table-cell;
}
#onboarding-canvas > div > div:first-of-type {
display: table-cell;
}
/*onboarding card content*/
#onboarding-canvas .onboarding-card {
background-color: #fff;
border-radius: 5px;
text-align: left;
width: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
-webkit-box-shadow: 0px 0px 50px 0px rgba(39,47,65,0.2);
-moz-box-shadow: 0px 0px 50px 0px rgba(39,47,65,0.2);
box-shadow: 0px 0px 50px 0px rgba(39,47,65,0.2);
}
/*card image*/
#onboarding-canvas .onboarding-card-image {
}
#onboarding-canvas .onboarding-card-image img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/*card content*/
#onboarding-canvas .onboarding-card-content {
padding: 30px;
}
#onboarding-canvas .onboarding-card-content .card-title {
font-size: 1.16em;
position: relative;
top: -5px;
margin-bottom: -7px;
}
#onboarding-canvas .onboarding-card-content .card-title span {
color: #4E42C3;
font-weight: bold;
}
/*----------------------------------------------------------------------*/
/*card tips*/
#onboarding-canvas .onboarding-card-tips {
border-top: 1px solid #E6ECF0;
text-align: left;
padding: 30px;
}
#onboarding-canvas .onboarding-card-tips .label {
color: #48556B;
background-color: #fff;
border: 1px solid #E6ECF0;
margin-right: 6px;
}
#onboarding-canvas .onboarding-card-tips {
}
/*----------------------------------------------------------------------*/
/*card features*/
#onboarding-canvas .onboarding-card-features {
}
#onboarding-canvas .onboarding-card-features li {
margin-bottom: 15px;
}
#onboarding-canvas .onboarding-card-features li:last-of-type {
margin-bottom: 0;
}
#onboarding-canvas .onboarding-card-features li i {
color: #4E42C3;
font-size: 1.2em;
}
/*----------------------------------------------------------------------*/
/*card action buttons*/
#onboarding-canvas .onboarding-card-actions {
overflow: hidden;
padding-top: 20px;
width: 100%;
text-align: center;
position: absolute;
left: 0; right: 0;
margin: 0 auto;
}
#onboarding-canvas .onboarding-card-actions .button {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
display: inline-block;
margin: 0 7px;
}
#onboarding-canvas .onboarding-card-actions .button:hover {
background-color: #fff;
color: #272F41;
}
#onboarding-canvas .onboarding-card-actions .next-button {
font-weight: bold;
}
#onboarding-canvas .onboarding-card-actions .back-button {
border: 2px solid transparent;
}
/*------------------------------------------------------------------------*/
#onboarding-canvas .onboarding-card.card1 {
}<div id="onboarding-canvas">
<div class="onboarding-cards">
<div class="onboarding-card-wrapper" id="onboardingCard1">
<div class="onboarding-card card1">
<div class="onboarding-card-image">
<img src="https://plutio.com/app/onboarding/onboarding-card-1.gif" />
</div>
<div class="onboarding-card-content">
<p class="card-title"><span>Create tasks</span> for whatever needs to get done. Plutio will help keep your tasks list organized so you can stay focused.</p>
</div>
<div class="onboarding-card-tips">
<p><span class="label">Good to know</span> Your tasks are automatically sorted into categories, there is a category for what's due today, tomorrow and next week.</p>
</div>
<div class="onboarding-card-actions">
<a class="button next-button next">Nice, what's next?</a>
</div>
</div>
</div>
<div class="onboarding-card-wrapper" id="onboardingCard2">
<div class="onboarding-card card2">
<div class="onboarding-card-image">
<img src="https://plutio.com/app/onboarding/onboarding-card-2.gif" />
</div>
<div class="onboarding-card-content">
<p class="card-title"><span>Manage your projects</span> in one place. Create and sort their tasks in milestones or progress stages, upload files and replace messy emails with focused discussions.</p>
</div>
<div class="onboarding-card-tips">
<p><span class="label">Good to know</span> You can customize the set of statuses every project moves through during their lifecycle.</p>
</div>
<div class="onboarding-card-actions">
<a class="button back-button back" href="#onboardingCard1">Back</a>
<a class="button next-button next" href="#onboardingCard3">Next</a>
</div>
</div>
</div>
<div class="onboarding-card-wrapper" id="onboardingCard3">
<div class="onboarding-card card3">
<div class="onboarding-card-image">
<img src="https://plutio.com/app/onboarding/onboarding-card-3.gif" />
</div>
<div class="onboarding-card-content">
<p class="card-title"><span>Collaborate with your clients and contributors</span>. Start private conversations or create group channels and get everyone involved.</p>
</div>
<div class="onboarding-card-tips">
<p><span class="label">Good to know</span> When you create a project, a dedicated channel with all the project contributors is automatically created.</p>
</div>
<div class="onboarding-card-actions">
<a class="button back-button back" href="#onboardingCard2">Back</a>
<a class="button next-button next" href="#onboardingCard4">Next</a>
</div>
</div>
</div>
<div class="onboarding-card-wrapper" id="onboardingCard4">
<div class="onboarding-card card4">
<div class="onboarding-card-image">
<img src="https://plutio.com/app/onboarding/onboarding-card-4.gif" />
</div>
<div class="onboarding-card-content">
<p class="card-title"><span>Manage your business contacts</span>. No more sifting through emails and business cards. Plutio brings your clients, contributors and contacts to one place.</p>
</div>
<div class="onboarding-card-tips">
<p><span class="label">Good to know</span> Your clients can only view projects and tasks that are assigned to them.</p>
</div>
<div class="onboarding-card-actions">
<a class="button back-button back" href="#onboardingCard3">Back</a>
<a class="button next-button next" href="#onboardingCard5">Next</a>
</div>
</div>
</div>
<div class="onboarding-card-wrapper" id="onboardingCard5">
<div class="onboarding-card card4">
<div class="onboarding-card-image">
<img src="https://plutio.com/app/onboarding/onboarding-card-5.gif" />
</div>
<div class="onboarding-card-content">
<p class="card-title"><span>{{ customer.first_name }}, say hi to Leo, your very own account manager!</span> Feel free to ask him anything. He can even help set up your account.</p>
</div>
<div class="onboarding-card-actions">
<a class="button back-button back" href="#onboardingCard4">Back</a>
<a class="button next-button complete" href="#onboardingCard6">This is amazing, let's get started!</a>
</div>
</div>
</div>
</div>
<!--
<div class="onboarding-intro">
<div class="onboarding-intro-stages">
<div class="onboarding-intro-stage stage1 content">
<p><i class="icon-hand-wave animation-set"></i> Welcome to Plutio, {{ customer.first_name }}.</p>
</div>
<div class="onboarding-intro-stage stage2 content">
<p>We're setting up your account, it won't take a minute...</p>
</div>
<div class="onboarding-intro-stage stage3 content">
<p>In the meantime, here's a quick introduction into Plutio...</p>
</div>
<div class="fireworks">
<div class="before"></div>
<div class="after"></div>
</div>
</div>
</div>
-->
</div>
You forgot the
hrefin the first link.