-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
308 lines (269 loc) · 21.3 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OathJar Invitation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/further-information.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/card.css">
<link rel="stylesheet" href="css/footer.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700" rel="stylesheet">
<style>
/* .header,
.further-information-wrapper,
.about-wrapper {
display: none;
}*/
/*.header, .further-information-wrapper, .about-wrapper, .footer {*/
/* .header, .further-information-wrapper, .footer {
display: none;
}*/
</style>
</head>
<body>
<header class="header">
<div class="container">
<div class="cloud-1"></div>
<div class="cloud-2"></div>
<!-- Logo-wrapper -->
<div class="logo-wrapper">
<div class="logo">
<div class="tagline">
Where promises <strong>are kept</strong>
</div>
<img src="img/logo.png" alt="Logo">
</div>
<div class="promises-counter">
<div class="promises-counter__icon">
<img src="img/icons/promise-icon.svg" alt="Promise icon">
</div>
<div class="promises-counter__number">31,122 +</div>
<div class="promises-counter__desc">promises</div>
</div>
</div>
<!-- // Logo-wrapper -->
<div class="header-content">
<img class="header__icon-mail" src="img/icons/header-mail-img.png" alt="Mail">
<div class="header__invite">You got an Invite!</div>
<div class="header__title">You have been invited to confirm the following relationship</div>
</div>
<div class="header-names">
<div class="header-names-left">
<div class="header-names__name">John Smith</div>
<div class="header-names__email">johnsmith@gmail.com</div>
</div>
<div class="header-names-button"></div>
<div class="header-names-right">
<div class="header-names__name">Janice Smith</div>
<div class="header-names__email">janicesmith@hotmail.com</div>
</div>
</div>
<div class="scroll">
<div class="scroll__desc">There’s a message inside</div>
<div class="scroll-bg">
<div class="scroll__title">Hi Janice! Check out this great website</div>
</div>
</div>
</div>
<div class="link-circle">
<div class="link-circle-inner">
</div>
</div>
</header>
<div class="further-information-wrapper">
<div class="container">
<div class="further-information-image-mobile">
<img src="img/illustrations/illustration.png" alt="">
</div>
<div class="further-information-content">
<h2 class="title-2">Further Information</h2>
<p>We, at OathJar, think it’s really important that couples have some ground rules in place as they prgress through their relationships. That’s why we’re dedicated to offer you a secure environment where you can establish those promises</p>
<ul class="checklist">
<li>Professional and secure environment</li>
<li>100% Private couple profiles and promises</li>
<li>Unlimited space</li>
<li>Notification Reminders</li>
</ul>
<p>We just need your name as a signature</p>
<form class="form" action="">
<div class="form-group">
<input class="input" type="text" placeholder="Your name">
<label class="form-label">
<input class="checkbox" type="checkbox">
<span class="checkbox-fake"></span>
<span class="checkbox-description">I accept the <a href="#">OathJar TOS</a></span>
</label>
</div>
<div class="form-group">
<input class="submit" type="submit" value="approve invitation">
<div class="form-notice">or go to <a href="#">home page</a></div>
</div>
</form>
</div>
</div>
</div>
<div class="about-wrapper">
<div class="container about-container">
<div class="about-cards">
<!-- cards-1-column -->
<div class="cards-1-column">
<div class="card">
<div class="card-circle">
<div class="card-circle-inner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="38" viewBox="0 0 46 38">
<defs>
<path class="svg-path" id="mxp1a" d="M245.224 2088.291c0 1.493-1.243 2.709-2.772 2.709h-9.384a6.574 6.574 0 0 1-5.02-2.3l-2.244-2.636a4.765 4.765 0 0 0-3.612-1.666 2.23 2.23 0 0 1-2.065 1.363h-.933a.888.888 0 0 1-.898-.878c0-.484.402-.877.898-.877h.933c.237 0 .43-.189.43-.42v-7.036a.426.426 0 0 0-.43-.42h-3.33v5.54a.888.888 0 0 1-.899.878.888.888 0 0 1-.898-.877v-6.42c0-.484.402-.877.898-.877h4.229c.922 0 1.714.55 2.052 1.332h3.482c2.1 0 4.087.784 5.597 2.209l4.844 4.567a2.59 2.59 0 0 1 .108 3.66 2.703 2.703 0 0 1-1.97.84 2.704 2.704 0 0 1-1.81-.686l-3.802-3.406a.864.864 0 0 1-.055-1.24.913.913 0 0 1 1.269-.054l3.802 3.406a.899.899 0 0 0 1.245-.051.853.853 0 0 0-.035-1.205l-4.843-4.568a6.309 6.309 0 0 0-4.35-1.717h-3.307v5.185a6.568 6.568 0 0 1 4.831 2.296l2.244 2.635a4.765 4.765 0 0 0 3.64 1.667h9.383a.966.966 0 0 0 .976-.953.966.966 0 0 0-.976-.953h-3.486a.888.888 0 0 1-.898-.878c0-.485.402-.878.898-.878h3.486c1.529 0 2.772 1.215 2.772 2.71zM261 2061.986v6.762a.888.888 0 0 1-.898.878h-4.23c-.92 0-1.714-.55-2.051-1.332h-3.483a8.12 8.12 0 0 1-5.597-2.209l-4.843-4.568a2.59 2.59 0 0 1-.108-3.66 2.73 2.73 0 0 1 3.78-.153l3.802 3.405c.366.328.39.883.055 1.24a.913.913 0 0 1-1.27.055l-3.802-3.406a.899.899 0 0 0-1.245.05.853.853 0 0 0 .036 1.206l4.843 4.568a6.31 6.31 0 0 0 4.35 1.716h3.307v-5.185a6.567 6.567 0 0 1-4.832-2.295l-2.244-2.636a4.765 4.765 0 0 0-3.639-1.667h-9.383a.966.966 0 0 0-.976.953c0 .526.438.954.976.954h3.837c.496 0 .898.393.898.878a.888.888 0 0 1-.898.877h-3.837c-1.529 0-2.772-1.215-2.772-2.708 0-1.494 1.243-2.71 2.772-2.71h9.383c1.946 0 3.776.84 5.02 2.3l2.245 2.636a4.764 4.764 0 0 0 3.612 1.667 2.23 2.23 0 0 1 2.065-1.364h.867c.496 0 .898.394.898.878a.888.888 0 0 1-.898.878h-.867a.426.426 0 0 0-.43.42v7.036c0 .232.193.42.43.42h3.33v-5.884c0-.485.402-.878.898-.878.497 0 .899.393.899.878zm-17.446 22.03l-.019.008a.913.913 0 0 1-.358.074.9.9 0 0 1-.824-.528.87.87 0 0 1 .465-1.155.906.906 0 0 1 1.187.439.871.871 0 0 1-.45 1.162zm2.499-1.417l-.011.009a.908.908 0 0 1-.53.17.904.904 0 0 1-.726-.36.865.865 0 0 1 .194-1.227.916.916 0 0 1 1.258.185.861.861 0 0 1-.185 1.223zm-5.251 2.28l-.027.006a.893.893 0 0 1-1.051-.697.879.879 0 0 1 .708-1.026.899.899 0 0 1 1.061.677.877.877 0 0 1-.691 1.04zm7.38-4.174a.905.905 0 0 1-.675.298.907.907 0 0 1-.587-.213.864.864 0 0 1-.074-1.259.913.913 0 0 1 1.269-.064.864.864 0 0 1 .066 1.238zm-.56-.49l-.11-.096.1.088zm3.379-4.413l-.004.012a.896.896 0 0 1-1.123.58.874.874 0 0 1-.594-1.096.904.904 0 0 1 1.121-.588c.475.14.744.628.6 1.092zm-.175-4.603a.893.893 0 0 1-1.04-.698.879.879 0 0 1 .697-1.034.898.898 0 0 1 1.069.713.88.88 0 0 1-.726 1.019zm.718 1.832a.89.89 0 0 1-.949.813.885.885 0 0 1-.84-.962.894.894 0 0 1 .973-.798.884.884 0 0 1 .816.947zm-1.684 5.373l-.781-.433.78.434a.895.895 0 0 1-.785.457.916.916 0 0 1-.43-.107.871.871 0 0 1-.36-1.194l.013-.022a.91.91 0 0 1 1.225-.331c.431.239.583.774.338 1.196zm-17.033-16.735a.916.916 0 0 1-1.21-.391.865.865 0 0 1 .399-1.176l.008-.004a.908.908 0 0 1 1.205.393.868.868 0 0 1-.402 1.178zm2.34-.85a.894.894 0 0 1-1.092-.631.878.878 0 0 1 .647-1.07l.02-.005a.9.9 0 0 1 1.086.646.877.877 0 0 1-.662 1.06zm-4.448 2.17l-.012.01a.909.909 0 0 1-.559.19.905.905 0 0 1-.703-.33.864.864 0 0 1 .143-1.234l.56.687-.557-.689a.914.914 0 0 1 1.262.134.863.863 0 0 1-.134 1.232zm-4.022 6.08a.896.896 0 0 1-1.084.64.876.876 0 0 1-.661-1.059l.009-.032a.9.9 0 0 1 1.103-.616.876.876 0 0 1 .633 1.067zm-.36 2.428a.89.89 0 0 1-.898.846h-.027a.887.887 0 0 1-.87-.936.891.891 0 0 1 .95-.826.886.886 0 0 1 .845.916zm1.24-4.717a.912.912 0 0 1-1.2.396.868.868 0 0 1-.41-1.175l.014-.028a.909.909 0 0 1 1.213-.37.868.868 0 0 1 .383 1.177zm1.362-2.059a.906.906 0 0 1-.702.33.907.907 0 0 1-.558-.19.864.864 0 0 1-.146-1.233l.018-.022a.913.913 0 0 1 1.266-.115c.38.308.433.858.122 1.23zm-3.158 10.236a.888.888 0 0 1-1.042-.705l-.001-.009a.88.88 0 0 1 .726-1.019.897.897 0 0 1 1.042.71.883.883 0 0 1-.725 1.023zm19.475-3.61c0 1.09-.435 2.115-1.226 2.885a.897.897 0 0 1-.074.065l-5.337 4.154a.91.91 0 0 1-1.117.001l-5.12-3.96-.017-.014a4.03 4.03 0 0 1-1.502-3.132c0-2.247 1.872-4.076 4.172-4.076 1.17 0 2.253.471 3.025 1.266a4.207 4.207 0 0 1 3.024-1.266c2.3 0 4.172 1.829 4.172 4.076zm-1.797 0c0-1.28-1.065-2.321-2.375-2.321a2.37 2.37 0 0 0-2.194 1.433.899.899 0 0 1-.83.542.899.899 0 0 1-.83-.542 2.37 2.37 0 0 0-2.195-1.433c-1.31 0-2.375 1.041-2.375 2.32 0 .687.309 1.334.847 1.777l4.551 3.52 4.736-3.686c.43-.434.665-1.005.665-1.61zm-27.56 12.662c.494 0 .894.391.894.875 0 .482-.4.874-.895.874a.885.885 0 0 1-.895-.874c0-.484.4-.875.895-.875zm44.202-25.767c.495 0 .896.391.896.874s-.401.875-.896.875a.885.885 0 0 1-.895-.875c0-.483.4-.874.895-.874z" />
</defs>
<g>
<g transform="translate(-215 -2053)">
<use fill="#fff" xlink:href="#mxp1a" />
</g>
</g>
</svg>
</div>
</div>
<div class="card__title">Easy to use</div>
<div class="card__content">Built with couples in mind, our platform is extremely easy to use by anyone</div>
<div class="card__read-more">
<a class="card__read-more-link" href="#">
<span class="card__read-more-text">learn more</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 18 20">
<defs>
<path class="icon-read-more" id="per3a" d="M278.141 2314.776l-5.209-3.018c-1.162-.676-3.063-1.777-4.228-2.45l-5.4-3.018c-1.162-.676-2.304-.134-2.304 1.205v17.011c0 1.334 1.142 1.879 2.305 1.206l5.304-3.018c1.165-.673 3.115-1.774 4.277-2.45l5.234-3.018c1.16-.676 1.181-1.777.021-2.45z" />
</defs>
<g>
<g transform="translate(-261 -2306)">
<use fill="#fff9df" xlink:href="#per3a" />
</g>
</g>
</svg>
</a>
</div>
</div>
<div class="card">
<div class="card-circle">
<div class="card-circle-inner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45" viewBox="0 0 45 45">
<defs>
<path class="svg-path" id="t0ffa" d="M251.035 2430.215c.174-1.041.358-2.022.498-2.743-.862.342-2.13.937-3.408 1.864-1.848 1.338-3.19 2.972-3.993 4.856-.223.523-.465 1.03-.72 1.507-.402 1.66-1.29 3.59-3.228 4.703 1.908.303 3.605.23 5.067-.217 4.26-1.302 5.132-5.25 5.298-6.429a.69.69 0 0 1 1.364.192c-.309 2.198-1.484 4.77-3.841 6.393.846.077 1.583.163 2.182.256 1.289.2 2.356.434 2.356 1.271 0 .814-1.056 1.027-1.686 1.154-.752.152-1.818.287-3.169.402-2.743.234-6.385.363-10.255.363-1.527 0-3.047-.021-4.518-.062a.689.689 0 1 1 .039-1.377c1.457.04 2.964.061 4.479.061 5.452 0 9.591-.253 11.906-.54-.912-.116-2.174-.233-3.877-.331-.968.282-2.016.424-3.139.424-1.373 0-2.858-.212-4.443-.633h-.896c-1.585.42-3.07.633-4.443.633-1.123 0-2.17-.142-3.137-.424-1.704.098-2.967.215-3.878.33.857.11 2.07.226 3.775.326a.689.689 0 1 1-.08 1.375c-1.91-.112-3.503-.264-4.608-.44-1.253-.198-2.29-.43-2.29-1.26 0-.838 1.066-1.072 2.355-1.272a35.39 35.39 0 0 1 2.168-.254c-2.48-1.695-3.634-4.422-3.87-6.748-.292-2.887-1.155-6.983-1.164-7.024a.69.69 0 0 1 .85-.809c.085.023 1.838.494 3.89 1.75a.689.689 0 0 1 1.364.156c-.011.258-.017.514-.018.764 1.42 1.078 2.561 2.326 3.405 3.727.153-1.434.566-3.016 1.235-4.734-1.199-1.528-2.59-2.748-4.146-3.639l-.063.33a.689.689 0 0 1-1.354-.25c.144-.78.267-1.262.273-1.282a.689.689 0 0 1 .968-.449c1.851.9 3.504 2.195 4.926 3.856.185-.41.383-.827.595-1.25 1.485-2.974 3.073-5.154 3.14-5.246a.689.689 0 0 1 1.112 0c.15.204 2.16 2.98 3.738 6.491 1.422-1.658 3.073-2.952 4.923-3.85a.689.689 0 0 1 .968.448c.027.106.582 2.294.704 4.923 2.048-1.252 3.797-1.722 3.882-1.745a.689.689 0 0 1 .85.81 101.96 101.96 0 0 0-.726 3.87.69.69 0 0 1-1.36-.227zm-16.22 10.186c-1.938-1.112-2.825-3.04-3.227-4.7a19.25 19.25 0 0 1-.72-1.51c-.803-1.883-2.146-3.517-3.994-4.855a15.854 15.854 0 0 0-3.407-1.865c.284 1.454.743 3.969.947 5.985.258 2.544 1.795 5.647 5.334 6.729 1.462.447 3.16.519 5.067.216zm2.685-19.283c-1.507 2.27-5.502 8.836-4.718 13.55.364 2.187 1.28 3.715 2.723 4.541 1.018.583 1.942.592 1.981.593h.031c.208 0 3.86-.076 4.701-5.134.783-4.714-3.211-11.28-4.718-13.55zm9.534 7.314c-.007-1.868-.294-3.638-.494-4.646-1.555.89-2.945 2.11-4.144 3.636.595 1.54 1.062 3.164 1.23 4.741.845-1.403 1.986-2.652 3.408-3.731zm-8.845-18.743v2.57a.689.689 0 1 1-1.378 0v-2.57a.689.689 0 0 1 1.378 0zm0 41.05v2.572a.689.689 0 0 1-1.378 0v-2.571a.689.689 0 1 1 1.378 0zm-9.965-35.305a.687.687 0 0 1-.94-.252l-1.286-2.227a.688.688 0 1 1 1.193-.689l1.285 2.227c.19.33.078.75-.252.941zm20.526 35.551a.686.686 0 0 1-.941-.252l-1.286-2.226a.689.689 0 0 1 1.193-.69l1.286 2.228c.19.33.077.75-.252.94zm-27.316-28.76a.688.688 0 0 1-.941.251l-2.227-1.285a.689.689 0 1 1 .69-1.193l2.226 1.285c.33.19.442.612.252.941zm35.551 20.525a.689.689 0 0 1-.94.252l-2.227-1.286a.688.688 0 1 1 .689-1.193l2.226 1.286c.33.19.443.611.252.94zm-38.036-11.25c0 .38-.309.689-.69.689h-2.57a.689.689 0 1 1 0-1.378h2.57c.381 0 .69.309.69.689zm41.05 0c0 .38-.307.689-.688.689h-2.571a.689.689 0 1 1 0-1.378h2.571c.38 0 .689.309.689.689zm-38.817 10.216l-2.227 1.286a.69.69 0 0 1-.689-1.193l2.227-1.286a.689.689 0 0 1 .689 1.193zm35.551-20.525l-2.226 1.285a.688.688 0 1 1-.69-1.193l2.227-1.285a.69.69 0 0 1 .69 1.193zm-28.257 27.316l-1.285 2.226a.688.688 0 1 1-1.193-.688l1.285-2.227a.689.689 0 1 1 1.193.689zm20.526-35.552l-1.286 2.227a.689.689 0 0 1-1.193-.689l1.286-2.227a.689.689 0 0 1 1.193.69z" />
</defs>
<g>
<g transform="translate(-215 -2409)">
<use fill="#fff" xlink:href="#t0ffa" />
</g>
</g>
</svg>
</div>
</div>
<div class="card__title">Therapeutic</div>
<div class="card__content">Writing your promises down, makes for greater peace of mind</div>
<div class="card__read-more">
<a class="card__read-more-link" href="#">
<span class="card__read-more-text">learn more</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 18 20">
<defs>
<path class="icon-read-more" id="per3a" d="M278.141 2314.776l-5.209-3.018c-1.162-.676-3.063-1.777-4.228-2.45l-5.4-3.018c-1.162-.676-2.304-.134-2.304 1.205v17.011c0 1.334 1.142 1.879 2.305 1.206l5.304-3.018c1.165-.673 3.115-1.774 4.277-2.45l5.234-3.018c1.16-.676 1.181-1.777.021-2.45z" />
</defs>
<g>
<g transform="translate(-261 -2306)">
<use fill="#fff9df" xlink:href="#per3a" />
</g>
</g>
</svg>
</a>
</div>
</div>
</div>
<!-- cards-1-column -->
<!-- cards-2-column -->
<div class="cards-2-column">
<div class="card">
<div class="card-circle">
<div class="card-circle-inner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="43" viewBox="0 0 38 43">
<defs>
<path class="svg-path" id="2z6ba" d="M534 2207.735v16.056c0 1.312-1.057 2.38-2.356 2.38h-3.808l-1.316 4.385a.626.626 0 0 1-.599.449.626.626 0 0 1-.599-.449l-1.316-4.386h-7.15v4.968h1.016c1.096 0 1.987.898 1.987 2.003v8.856a1.998 1.998 0 0 1-1.987 2.003h-13.127a1.998 1.998 0 0 1-1.988-2.003v-8.856c0-1.105.892-2.003 1.988-2.003h1.016v-4.979a2.374 2.374 0 0 1-2.136-2.368v-4.98h-1.278l-1.634 3.145a.625.625 0 0 1-1.154-.112l-.9-3.034h-.728a1.942 1.942 0 0 1-1.931-1.95v-13.91c0-1.076.866-1.95 1.93-1.95h26.804c1.033 0 1.874.849 1.874 1.893v2.462h5.036c1.299 0 2.356 1.068 2.356 2.38zm-16.128 24.664h-13.127a.74.74 0 0 0-.736.742v8.856c0 .409.33.742.736.742h13.127a.74.74 0 0 0 .736-.742v-8.856a.74.74 0 0 0-.736-.742zm-9.775-1.261v-4.968h-1.085v4.968zm5.172 0v-4.968h-3.921v4.968zm19.48-7.347v-16.056c0-.617-.496-1.12-1.105-1.12H505.98c-.609 0-1.104.503-1.104 1.12v4.287c0 .354-.291.64-.645.63-.343-.01-.607-.311-.607-.657v-4.26c0-1.312 1.057-2.38 2.356-2.38h19.376v-2.462a.628.628 0 0 0-.623-.632H497.93a.685.685 0 0 0-.68.688v13.911c0 .38.305.69.68.69h1.193c.277 0 .52.182.6.45l.593 1.998 1.096-2.11a.625.625 0 0 1 .555-.339h1.657v-1.857c0-.355.291-.641.645-.63.343.01.607.311.607.656v8.073c0 .616.495 1.118 1.104 1.118h7.209a1.977 1.977 0 0 0-1.256-1.318v.275c0 .355-.29.64-.645.63-.342-.01-.606-.311-.606-.657v-4.345c0-.354.29-.64.645-.63.342.01.606.312.606.657v.388a5.489 5.489 0 0 1 2.58.996.612.612 0 0 1 .14.835.604.604 0 0 1-.875.184 4.249 4.249 0 0 0-1.845-.744v1.109a3.236 3.236 0 0 1 2.586 3.174v5.675h1.085v-5.675c0-.424-.061-.834-.175-1.222-.101-.344.11-.7.456-.781l.016-.004a.61.61 0 0 1 .726.421c.098.333.166.677.2 1.032h7.643c.276 0 .519.183.599.448l.851 2.838.851-2.838a.627.627 0 0 1 .6-.448h4.272c.609 0 1.104-.502 1.104-1.118zm-7.3-13.46c0 .348-.28.63-.626.63H508.64a.628.628 0 0 1-.626-.63c0-.348.28-.63.626-.63h16.184c.346 0 .626.282.626.63zm3.67 0c0 .348-.28.63-.625.63h-1.502a.628.628 0 0 1-.626-.63c0-.348.28-.63.626-.63h1.502c.345 0 .625.282.625.63zm0 3.279c0 .348-.28.63-.625.63h-16.185a.628.628 0 0 1-.625-.63c0-.349.28-.63.625-.63h16.185c.345 0 .625.281.625.63zm-18.353 0c0 .348-.28.63-.626.63h-1.501a.628.628 0 0 1-.626-.63c0-.349.28-.63.626-.63h1.501c.346 0 .626.281.626.63zm9.385 3.446c0 .349-.28.63-.625.63h-10.804a.628.628 0 0 1-.625-.63c0-.348.28-.63.625-.63h10.804c.345 0 .625.282.625.63zm8.927 0c0 .349-.28.63-.626.63h-5.84a.628.628 0 0 1-.625-.63c0-.348.28-.63.625-.63h5.84c.346 0 .626.282.626.63zm-15.539 23.017c.073.378-.024.766-.267 1.063a1.268 1.268 0 0 1-.984.468h-1.959c-.382 0-.74-.17-.984-.468a1.288 1.288 0 0 1-.267-1.063l.38-1.97a2.674 2.674 0 0 1-.76-2.19 2.648 2.648 0 0 1 2.314-2.321 2.63 2.63 0 0 1 2.049.658 2.661 2.661 0 0 1 .097 3.854zm-1.43-2.722a1.395 1.395 0 0 0 .117-2.16 1.354 1.354 0 0 0-1.077-.345c-.628.07-1.135.579-1.208 1.21-.058.513.153.997.566 1.295.2.144.297.391.25.633l-.451 2.33c-.001.005-.002.011.005.02.007.009.014.009.018.009h1.958c.005 0 .012 0 .019-.009a.02.02 0 0 0 .005-.02l-.451-2.33a.633.633 0 0 1 .25-.633z" />
</defs>
<g>
<g transform="translate(-496 -2201)">
<use fill="#0d3e60" xlink:href="#2z6ba" />
</g>
</g>
</svg>
</div>
</div>
<div class="card__title">Private</div>
<div class="card__content">Your information is secured and not displayed to anyone but yourselves</div>
<div class="card__read-more">
<a class="card__read-more-link" href="#">
<span class="card__read-more-text">learn more</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 18 20">
<defs>
<path class="icon-read-more" id="per3a" d="M278.141 2314.776l-5.209-3.018c-1.162-.676-3.063-1.777-4.228-2.45l-5.4-3.018c-1.162-.676-2.304-.134-2.304 1.205v17.011c0 1.334 1.142 1.879 2.305 1.206l5.304-3.018c1.165-.673 3.115-1.774 4.277-2.45l5.234-3.018c1.16-.676 1.181-1.777.021-2.45z" />
</defs>
<g>
<g transform="translate(-261 -2306)">
<use fill="#fff9df" xlink:href="#per3a" />
</g>
</g>
</svg>
</a>
</div>
</div>
</div>
<!-- cards-2-column -->
</div>
<div class="about-content">
<div class="about-toggle-wrapper">
<a href="#whyuse" class="about__toggle">Why Use OathJar</a>
<a href="#howitworks" class="about__toggle">How it Works</a>
<a href="#private" class="about__toggle">OathJar is Private</a>
</div>
<div class="about-content-box-wrapper">
<div class="about-content__box" id="whyuse">
<h2 class="title-2 title-special">Why Use OathJar</h2>
<p>OathJar is a brand new company aimed at providing people in an active relationship with a place of their own to set the rules and guidelines of their relationships</p>
</div>
<div class="about-content__box" id="howitworks">
<h2 class="title-2 title-special">How it Works</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque aliquam veritatis vero ducimus neque voluptatem itaque, similique sunt quis? Quisquam aliquam cum laborum dolore optio sapiente amet veritatis, laudantium iste necessitatibus.</p>
</div>
<div class="about-content__box" id="private">
<h2 class="title-2 title-special">OathJar is Private</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nisi, assumenda optio debitis incidunt.</p>
<p>Laboriosam sequi asperiores reprehenderit dolorem est similique placeat quas eos eius dolore unde earum ex vero quidem. Molestiae cumque nam voluptates mollitia, optio officia! Blanditiis, nostrum, quas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container footer-container justify-between align-center">
<div class="footer-copyright">
<div class="footer-copyright__logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="footer-copyright__text">
© OathJar, 2019
</div>
</div>
<div class="footer-navigation">
<ul class="footer-navigation-list">
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="scrollToTop" class="scrollToTop-wrapper">
<div class="scrollToTop-icon"></div>
</div>
<script src="libs/jquery/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>