generated from jonico/octodemo.github.io
-
Notifications
You must be signed in to change notification settings - Fork 1
/
kiosk-home.html
86 lines (76 loc) · 4.38 KB
/
kiosk-home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
---
layout: default
title: My Octocat
id: kiosk-homepage
permalink: /kiosk/
---
<section class="octocat-intro" id="octocat-generator-intro">
<div class="wrapper-wide">
<div class="octocat-intro__content">
<div class="col-12 col-sm-6 octocat-intro__text" data-animate-in=fade data-animate-in-delay="0">
<h1 class="mb-3">
Build<br /> your own<br /> octocat</span>
</h1>
<p class="p-lg mb-2 mb-sm-4">Take a break from your build and create an Octocat that’s all you, from whisker tip to tail.</p>
<div class="octocat-intro__octocat-sm mb-4" data-animate-in="fade" data-animate-in-delay="0.3">
<img class="mx-auto" src="{{ '/assets/images/base-octocat.svg' | relative_url }}" alt="The Octocat" />
</div>
<div class="pb-2 text-center text-sm-left">
<a class="btn" href="{{ '/kiosk/build-your-octocat/' | relative_url }}">Get started</a>
</div>
</div>
<div class="col-12 col-sm-6 octocat-intro__octocat" data-animate-in="fade" data-animate-in-delay="0.3">
<img class="mx-auto" src="{{ '/assets/images/base-octocat.svg' | relative_url }}" alt="The Octocat" />
</div>
</div>
<div class="text-center mt-5 mt-md-6">
<svg id="draw-svg" viewBox="0 0 50 50">
<g id="draw-svg-arrow">
<g>
<circle fill="#24292E" cx="24" cy="26" r="24"/>
<g class="draw-arrow-top">
<circle fill="#444A50" cx="26" cy="24" r="24" />
<path fill="#FFFFFF" class="st2" d="M26.1,28.3l-6.9-6.9C19.1,21.3,19,21.1,19,21s0-0.3,0.1-0.4l0.9-0.9c0.1-0.1,0.3-0.1,0.4-0.1
s0.3,0,0.4,0.1l5.6,5.6l5.6-5.6c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1l0.9,0.9c0.1,0.1,0.1,0.3,0.1,0.4s0,0.3-0.1,0.4l-6.9,6.9
c-0.1,0.1-0.3,0.1-0.4,0.1S26.2,28.4,26.1,28.3L26.1,28.3z"/>
</g>
</g>
</g>
</svg>
</div>
</div>
</section>
<div class="pt-0 pt-md-6"></div>
<section class="pt-6 pt-md-4 pb-4 text-center" id="how-it-works">
<header class="wrapper mb-5 mb-md-5" data-animate-in="up" data-animate-in-delay="0.4">
<h2 class="mb-3">How it works</h2>
<div class="col-12 col-sm-10 col-lg-7 mx-auto">
<p>We’ve got viking vibes, ballerina skirts, wizard hats, lots of neon, and more. Mix and match to your octoheart’s content.</p>
</div>
</header>
<div class="wrapper-scroll-sm-wrap" id="js-draggable">
<div class="wrapper-scroll-sm">
<div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.4">
<p class="h4">Step 1</p>
<h3 class="h3 mb-3 mb-md-5">Design your octocat</h3>
<img src="{{ '/assets/images/octocat-outfit.png' | relative_url }}" alt="Octocat Outfit" />
</div>
<div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.5">
<p class="h4">Step 2</p>
<h3 class="h3 mb-3 mb-md-5">Style and accessorize</h3>
<img src="{{ '/assets/images/octocat-accessories.png' | relative_url }}" alt="Octocat accessories" />
</div>
<div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.6">
<p class="h4">Step 3</p>
<h3 class="h3 mb-3 mb-md-5">Save and share</h3>
<img src="{{ '/assets/images/octocat-share.png' | relative_url }}" alt="share your octocat" />
</div>
</div>
</div>
</section>
<aside class="pb-8 text-center" data-animate-in="up" data-animate-in-delay="0.6">
<p class=" mb-4">Take your new tentacles for a spin.</p>
<div class="pb-2">
<a class="btn" href="{{ '/kiosk/build-your-octocat/' | relative_url }}">Get started</a>
</div>
</aside>