-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
121 lines (112 loc) · 4.99 KB
/
index2.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SKN</title>
<link rel="icon" href="https://www.pngmart.com/files/13/Facial-Mask-Transparent-PNG.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" defer></script>
</head>
<body>
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<h1 class="title is-1 ">Hello Parallax</h1>
<h2 class="subtitle">A simple boilerplate for setting up parallax <br> using the Bulma Hero container.</h2>
<a href="#" class="button is-white is-medium is-inverted">Learn More <i class="fad fa-chevron-right"></i></a>
</div>
</div>
</section>
<section id="parallax-1" class="hero is-large ">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-6 is-offset-6">
<h1 class="title is-1 ">Lorem Ipsum</h1>
<hr class="content-divider">
<h2 class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit explicabo amet magni illum eum voluptate! Eveniet voluptatem nam magnam necessitatibus.</h2>
<a href="#" class="button is-white is-inverted">Next <i class="fad fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="parallax-2" class="hero is-large ">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-6">
<h1 class="title is-1 ">Dolor Sit</h1>
<hr class="content-divider">
<h2 class="subtitle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque veritatis sequi natus minima distinctio ullam deleniti quasi quisquam autem deserunt.</h2>
<a href="#" class="button is-white is-inverted">Next <i class="fad fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="parallax-3" class="hero is-large ">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-6 is-offset-6">
<h1 class="title is-1 ">Amet Consectetur</h1>
<hr class="content-divider">
<h2 class="subtitle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure minus nam necessitatibus neque in perferendis eveniet dolorum assumenda dolores accusamus.</h2>
<a href="#" class="button is-white is-inverted">Next <i class="fad fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="cta va">
<div class="container">
<div class="columns">
<div class="column is-6">
<h1 class="title is-1 ">Adipisicing Elit</h1>
<hr class="content-divider">
<h2 class="subtitle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas ut nulla maiores, beatae voluptas sunt excepturi deserunt vero. Beatae est ratione quia neque molestias, cum asperiores quibusdam rem illum, debitis dolorem natus, eos fuga eveniet numquam ab officia reiciendis inventore. Tempore repudiandae exercitationem quisquam? Fugiat!</h2>
</div>
<div class="column is-6">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input is-medium" type="text" placeholder="Jon Snow">
</div>
</div>
<br>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input is-medium" type="email" placeholder="[email protected]">
</div>
</div>
<br>
<div class="field is-grouped">
<div class="control">
<button class="button is-white is-rounded is-outlined">Submit</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>
</body>
<footer class="footer has-background-danger-light">
<div class="content has-text-centered">
<p class="subtitle">Disclaimer‼️ We are not licensed professionals. We are here to share our passion for skincare
and hope you find our site helpful. -SKN Team ^_^</p>
</div>
</footer>
</html>