-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (188 loc) · 9.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body class="light-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<div class="page">
<div class="fullscreen-wrapper">
<button class="fullscreen" type="button">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M5 19v-5h2v3h3v2Zm0-9V5h5v2H7v3Zm9 9v-2h3v-3h2v5Zm3-9V7h-3V5h5v5Z"
/>
</svg>
</button>
<button class="fullscreen-close hidden" type="button">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M3.4 22 2 20.6 8.6 14H4v-2h8v8h-2v-4.6ZM12 12V4h2v4.6L20.6 2 22 3.4 15.4 10H20v2Z"
/>
</svg>
</button>
</div>
<div class="toggle-bar">
<div class="sun-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M11 5V1h2v4Zm6.65 2.75-1.375-1.375 2.8-2.875 1.4 1.425ZM19 13v-2h4v2Zm-8 10v-4h2v4ZM6.35 7.7 3.5 4.925l1.425-1.4L7.75 6.35Zm12.7 12.8-2.775-2.875 1.35-1.35 2.85 2.75ZM1 13v-2h4v2Zm3.925 7.5-1.4-1.425 2.8-2.8.725.675.725.7ZM12 18q-2.5 0-4.25-1.75T6 12q0-2.5 1.75-4.25T12 6q2.5 0 4.25 1.75T18 12q0 2.5-1.75 4.25T12 18Zm0-2q1.65 0 2.825-1.175Q16 13.65 16 12q0-1.65-1.175-2.825Q13.65 8 12 8q-1.65 0-2.825 1.175Q8 10.35 8 12q0 1.65 1.175 2.825Q10.35 16 12 16Zm0-4Z"
/>
</svg>
</div>
<button class="toggle-button">
<div class="toggle-circle"></div>
</button>
<div class="moon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025.337.025.662.075-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613 1.15-.612 1.875-1.637.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Zm0-2q2.2 0 3.95-1.212 1.75-1.213 2.55-3.163-.5.125-1 .2-.5.075-1 .075-3.075 0-5.238-2.162Q9.1 10.575 9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.162 2.55Q5 9.8 5 12q0 2.9 2.05 4.95Q9.1 19 12 19Zm-.25-6.75Z"
/>
</svg>
</div>
</div>
<div class="page-wrapper">
<section class="hero">
<div class="hero-wrapper">
<div class="hero-main">
<h1 class="hero-main-title">Room Demo</h1>
<p class="hero-main-description">Demo Build | V1</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading">ThreeJS Demo</p>
<p class="hero-second-subheading">Orthographic</p>
</div>
</div>
</section>
<div class="first-move section-margin"></div>
<section class="first-section section left">
<div class="progress-bar-wrapper-left">
<div class="left-progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">What</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
</div>
</section>
<div class="second-move section-margin"></div>
<section class="second-section section right">
<div class="progress-bar-wrapper-right">
<div class="right-progress-bar blue-background"></div>
</div>
<div class="section-intro-wrapper blue-text blue-border">
<h1 class="section-title blue-text blue-border">
<span class="section-title-text blue-text">Why</span>
<div class="section-title-decoration styleOne blue-border"></div>
<div class="section-title-decoration styleTwo blue-border"></div>
<div
class="section-title-decoration styleThree blue-border blue-background"
></div>
</h1>
<span class="section-number blue-text">02</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
</div>
</section>
<div class="third-move section-margin"></div>
<section class="third-section section left">
<div class="progress-bar-wrapper-left">
<div class="left-progress-bar green-background"></div>
</div>
<div class="section-intro-wrapper green-text green-border">
<h1 class="section-title green-text green-border">
<span class="section-title-text green-text">How</span>
<div class="section-title-decoration styleOne green-border"></div>
<div class="section-title-decoration styleTwo green-border"></div>
<div
class="section-title-decoration styleThree green-border green-background"
></div>
</h1>
<span class="section-number green-text">03</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestias tenetur recusandae ipsum et, in illo itaque saepe nihil
libero nemo repudiandae earum qui perferendis quas officiis.
Commodi dolores facere reprehenderit.
</p>
</div>
</section>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>