Skip to content

Instantly share code, notes, and snippets.

@Evan-M

Evan-M/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save Evan-M/2cdafe01b6711757a389 to your computer and use it in GitHub Desktop.
Save Evan-M/2cdafe01b6711757a389 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Onboarded Flow - Completed
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Onboarding Flow</title>
<script src="https://d237d8mq680mpf.cloudfront.net/onboarded-js/latest/onboarded-js.min.js"
data-style="false">
</script>
<style type="text/css" media="screen">
div[data-onboarded-token] {
position: absolute;
width: 100%;
height: 100%;
padding: 24px 0;
top: 0;
background: rgba(189, 195, 199, 0.8);
}
div[data-onboarded-token] > div[data-onboarded-flow] {
margin: 7px auto;
position: relative;
width: 75%;
height: 350px;
padding: 21px 92px;
background: #1abc9c;
border: 2px solid #16a085;
border-radius: 16px;
color: #336E7B;
}
div[data-onboarded-flow] h1 {
/*color: #22313F;*/
color: #F9BF3B;
font-weight: bold;
font-size: 2.2em;
line-height: 0.95em;
}
div[data-onboarded-flow] h3 {
font-size: 1.8em;
line-height: 0.85em;
}
div[data-onboarded-flow] button {
padding: 7px 14px;
color: #eee;
background: #e67e22;
border: 1px solid #34495e;
border-radius: 5px;
}
div[data-onboarded-flow] button:hover,
div[data-onboarded-flow] button:active {
color: #fff;
background: #d35400;
}
div[data-step="features"] ul { list-style-type: circle; color: #336E7B; }
div[data-step="features"] ul > li { line-height: 45px; }
div[data-step="interests"] * { display: block; }
div[data-step="interests"] textarea {
height: 20%;
width: 55%;
font-size: 1.1em;
padding: 7px 14px;
border-radius: 8px;
border: none;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div data-onboarded-token="PROJECT-TOKEN" data-onboarded-user="[email protected]" style="display: none">
<div data-onboarded-flow="Welcome Guide">
<div data-step="features">
<h1>Hi Sarah, welcome to our awesome news site!</h1>
<h3>Be sure to check out these features:</h3>
<ul>
<li>Search for Articles</li>
<li>Comment on other people's articles</li>
<li>Collect articles for reading later</li>
</ul>
<button data-name="features-reviewed" data-action-next="interests">Next</button>
</div>
<div data-step="interests">
<h1>Hi Sarah, welcome to our awesome news site!</h1>
<h3>What are your interests?</h3>
<textarea data-name="interests" placeholder="Comma separated"></textarea>
<button data-name="guide-completed" data-action-complete>Done</button>
</div>
</div>
</div>
<div class="example-wrapper">
<h1 class="example-header">New Articles</h1>
<article>
<h3>Article Headline</h3>
<div class="example-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi, nisi sunt aliquid recusandae, adipisci laboriosam nostrum eaque repudiandae, ad voluptatibus omnis libero cupiditate aspernatur expedita assumenda in velit magnam!</div>
</article>
<article>
<h3>Article Headline</h3>
<div class="example-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi, nisi sunt aliquid recusandae, adipisci laboriosam nostrum eaque repudiandae, ad voluptatibus omnis libero cupiditate aspernatur expedita assumenda in velit magnam!</div>
</article>
<article>
<h3>Article Headline</h3>
<div class="example-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi, nisi sunt aliquid recusandae, adipisci laboriosam nostrum eaque repudiandae, ad voluptatibus omnis libero cupiditate aspernatur expedita assumenda in velit magnam!</div>
</article>
<article>
<h3>Article Headline</h3>
<div class="example-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi, nisi sunt aliquid recusandae, adipisci laboriosam nostrum eaque repudiandae, ad voluptatibus omnis libero cupiditate aspernatur expedita assumenda in velit magnam!</div>
</article>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment