-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (151 loc) · 9.2 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Builds</title>
<link rel="stylesheet" href="./styles/main.css">
<link rel="icon" href="assets/img/sm_logo.svg" type="image/svg">
</head>
<body>
<header>
<div class="logo"></div>
</header>
<section class="wrapper">
<div class="compare-container">
<div class="card-one" id="card-one">
<h2 class="card-1">Antialiasing</h2>
<img src ="./assets/antialiased.png" alt="A description of lorem ipsum with crisper text">
</div>
<div class="card-two hidden" id="card-two">
<h2 class="card-2">Subpixel Antialiasing</h2>
<img src ="./assets/subpixel.png" alt="A description of lorem ipsum with crisper text">
</div>
</div>
<div class="button-wrapper">
<button id="toggleBtn" class="toggle btn">Toggle</button>
<button id="expandBtn" class="expand btn">Expand</button>
</div>
</section>
<!-- End of Wrapper -->
<!-- Add yellow slant -->
<section class="scroll-animate">
<div class="step-pagination">
<ul class="pagination-list" role="list">
<li tabindex="0" class="pagination-item"><a class="pagination-number" href="#step_1" >1</a></li>
<li tabindex="0" class="pagination-item"><a class="pagination-number" href="#step_2">2</a></li>
<li tabindex="0" class="pagination-item"><a class="pagination-number" href="#step_3">3</a></li>
<li tabindex="0" class="pagination-item"><a class="pagination-number" href="#step_4">4</a></li>
<li tabindex="0" class="pagination-item"><a class="pagination-number" href="#step_5">5</a></li>
</ul>
</div>
<h2>Just 5 steps to efficient cooking.</h2>
<p class="info">Use of the Intersection Observer API</p>
<div class="steps-container">
<!-- Similar to 5 steps https://www.appsmith.com/ -->
<div class="step-left-container">
<div class="step-images">
<div class="step-left image-1 fade-out">
<img src="./assets/plan.jpg" alt="Recipe book">
</div>
<div class="step-left image-2 fade-out">
<img src="./assets/prepCook.jpg" alt="Ingredients laid out">
</div>
<div class="step-left image-3 fade-out">
<img src="./assets/addIngredients.jpg" alt="Adding ingredients">
</div>
<div class="step-left image-4 fade-out">
<img src="./assets/cook.jpg" alt="Cooking ingredients">
</div>
<div class="step-left image-5 fade-out">
<img src="./assets/serve.jpg" alt="Serve dish">
</div>
</div>
</div>
<div class="step-right-container">
<div class="step-right step-one block" id="step_1">
<div class="step-text">
<h3 class="step-heading">Read & Plan</h3>
Voluptatem corporis quibusdam deserunt necessitatibus repellat neque rem sunt. Dignissimos magni ut laboriosam esse odio nesciunt vel sit. Dolores explicabo et omnis et maiores accusantium.
</div>
</div>
<div class="step-right step-two block" id="step_2">
<div class="step-text">
<h3 class="step-heading">First Stage of Prep</h3>
Proident nulla officia labore culpa duis. Minim minim id enim irure nostrud. Amet Lorem do anim aliqua sint sint.
</div>
</div>
<div class="step-right step-three block" id="step_3">
<div class="step-text">
<h3 class="step-heading">Add in the ingredients!</h3>
Voluptate laboris Lorem aliqua commodo quis tempor officia exercitation laborum cillum officia et velit sunt. Cillum ullamco consequat quis aliqua do consequat magna quis eu consectetur ex est. Dolor deserunt laboris elit exercitation labore commodo do Lorem aute sunt et. Deserunt excepteur id dolor quis eu. Sit ut dolore ipsum commodo sint deserunt aliquip et dolore sint excepteur aliqua aliquip. Cupidatat sit veniam laboris est culpa labore est.
</div>
</div>
<div class="step-right step-four block" id="step_4">
<div class="step-text">
<h3 class="step-heading">Cook it up!</h3>
Ipsum sint mollit elit quis pariatur anim Lorem anim eiusmod. Ea quis nulla nulla proident ex occaecat adipisicing consequat ex sit id. Sunt dolor non aliqua consectetur magna excepteur eiusmod exercitation irure incididunt. Quis commodo exercitation proident qui aliqua. Ut ea id ullamco pariatur anim commodo Lorem consequat non excepteur et amet. Eu nostrud aliquip non ut reprehenderit.
</div>
</div>
<div class="step-right step-five block" id="step_5">
<div class="step-text">
<h3 class="step-heading">Enjoy!</h3>
Aliquip amet id voluptate ea deserunt magna. Labore ex fugiat adipisicing aliqua mollit nisi aute dolore veniam mollit. Exercitation ad qui proident pariatur incididunt ullamco magna labore est qui est fugiat. Nostrud nulla culpa culpa tempor duis reprehenderit adipisicing labore velit incididunt voluptate sit sint. Laborum est cupidatat mollit nostrud laborum est cillum. Tempor deserunt commodo ad veniam dolore sunt sint ea exercitation cillum mollit duis quis ipsum. Proident in qui ipsum magna qui.
</div>
</div>
</div>
</div>
</section>
<!-- End of Scroll-Animate -->
<section class="svg-wrapper">
<h2>Creating accessible SVGs</h2>
<p class="info">Semantic + Keyboard. SVG and text appear on hover or tabbed</p>
<div class="svg-container">
<svg class="circle-hover" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 300 175">
<text transform="matrix(1 0 0 1 163.4367 89.1606)">
<tspan x="8" y="-6">IMPORTANT</tspan>
<tspan x="18" y="15">THINGS</tspan>
</text>
<path class="segment_red" id="segment_r" tabindex="0" d="M211.559,30.588c14.101,0,26.998,5.213,36.897,13.798l20.178-20.177 c-15.086-13.727-35.12-22.106-57.075-22.106c-22.475,0-42.922,8.796-58.123,23.105l20.132,20.133 C183.6,36.183,196.938,30.588,211.559,30.588z"/>
<path class="segment_gold" tabindex="0" d="M267.959,86.988c0,14.466-5.479,27.673-14.465,37.667l20.143,20.144 c14.135-15.168,22.808-35.491,22.808-57.811c0-23.118-9.301-44.097-24.343-59.421L251.968,47.7 C261.854,57.865,267.959,71.723,267.959,86.988z"/>
<path class="segment_green" tabindex="0" d="M211.559,143.389c-15.711,0-29.936-6.463-40.173-16.863l-20.133,20.133 c15.395,15.558,36.741,25.216,60.306,25.216c22.753,0,43.428-9.016,58.685-23.642L250.112,128.1 C240.018,137.571,226.459,143.389,211.559,143.389z"/>
<g class="aqua_pieces" tabindex="0">
<path class="segment_aqua" tabindex="0" d="M155.158,86.988c0-14.745,5.694-28.18,14.991-38.24l-20.133-20.133 c-14.45,15.227-23.344,35.774-23.344,58.373c0,21.508,8.056,41.16,21.289,56.135l20.179-20.179 C160.037,113.176,155.158,100.642,155.158,86.988z"/>
<g class="aqua_over" tabindex="0">
<polygon points="128.841,96.714 114.283,86.548 128.841,76.387"/>
<path d="M98.17,64.364l-14.207-0.126c-5.224,0.126-7.164,4.32-7.164,5.76v0.187v0.88l0,19.322 c0,1.327,1.064,2.387,2.317,2.387c1.314,0,2.377-1.06,2.377-2.387l0-16.701h1.97l0,16.021c0,0.253,0.033,0.5,0.063,0.68l0,28.729 c0,1.82,1.436,3.32,3.254,3.32c1.817,0,3.253-1.5,3.253-3.32l0-25.342h1.624l0,25.342c0,1.82,1.443,3.32,3.224,3.32 c1.813,0,3.29-1.5,3.29-3.32l0-29.409V89.58V73.685l1.751,0l0,16.701c0,1.327,1.126,2.387,2.5,2.387 c1.41,0,2.504-1.06,2.504-2.387l0-19.322v-0.88v-0.5C104.925,67.931,102.607,64.364,98.17,64.364z"/>
<path d="M90.877,63.238c3.1,0,5.597-2.44,5.597-5.441c0-3.067-2.497-5.567-5.597-5.567 c-3.098,0-5.631,2.5-5.631,5.567C85.246,60.797,87.779,63.238,90.877,63.238z"/>
<text x="100" y="135" style=" font-weight: bold;">Friends</text>
<text x="100" y="145" ">This is an example of text</text>
<text x="100" y="155" >that can appear on rollover</text>
</g>
</g>
</svg>
</div>
</section>
<!-- End of Accessibile SVG -->
<!-- Start of Cost Reveal -->
<section class=" teal cost-reveal-container">
<div style="overflow: hidden;">
<svg
preserveAspectRatio="none"
viewBox="0 0 1200 120"
xmlns="http://www.w3.org/2000/svg"
style="fill: #343234; width: 100%; height: 177px;"
>
<path
d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z"
opacity=".25"
/>
<path
d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z"
opacity=".5"
/>
<path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" />
</svg>
</div>
</section>
<script src="./src/main.js"></script>
</body>
</html>