-
Notifications
You must be signed in to change notification settings - Fork 0
/
Code-Canvas-Landing-Page.html
265 lines (263 loc) · 13.2 KB
/
Code-Canvas-Landing-Page.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code-Canvas-Landing-Page</title>
<link rel="stylesheet" href="CSS/Code-Canvas-Landing-Page.css" type="text/css">
</head>
<body class="body">
<!-- circle - 1 (Header + Content) -->
<div class="circle-1">
<div class="circle-1-content">
<div class="circle-1-nav">
<img src="images/landing/codecanvaslogo.png" alt="Loading...">
<div class="circle-1-nav-menu">
<nav class="circle-1-nav-menu-options">
<a href="" class="landing-section1-nav-options-link" id="about">About</a>
<a href="" class="landing-section1-nav-options-link" id="features-drop">Pricing</a>
<a href="" class="landing-section1-nav-options-link" id="components">Components</a>
<a href="" class="landing-section1-nav-options-link" id="dashboard">Dashboard</a>
</nav>
<div class="circle-1-nav-menu-button">
<div class="circle-1-nav-menu-button-logo">
<a href="" class="drop-link"><img src="images\landing\dropdown.svg" alt="B" style="width: 14px;"></a>
<div class="circle-1-nav-dropdown-menu">
<a href="" class="dropdown-link">About</a>
<a href="" class="dropdown-link">Features</a>
<a href="" class="dropdown-link">Components</a>
<a href="" class="dropdown-link">Dashboard</a>
<a href="" class="dropdown-link">FAQ</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circle-1-main-content">
<div class="circle-1-main-content-text">
<h1 class="circle-1-main-content-text-up">Boost your code</h1>
<h3 class="circle-1-main-content-text-down">Build your website or<span>web-applications </span>with help of our snippets.</h3>
<a href="signup.html">Sign up</a>
<a href="login.html">log in</a>
</div>
<img src="images/landing/landing-main.png" loading="lazy" width="437" alt=""/>
</div>
</div>
<!-- circle - 2 (Features) -->
<div class="circle-2">
<div class="circle-2-main">
<div class="circle-2-main-content">
<div class="circle-2-main-content-up">Build Your Own website</div>
<h2 class="circle-2-main-content-down">Use our Snippets / Elements to <br> boost your pages</h2>
</div>
<div class="circle-2-main-content-image">
<img src="images/landing/landing-main-2.png" alt="loading..." width="1050">
</div>
</div>
</div>
<!-- circle - 3 (ZigZag) -->
<div class="circle-3">
<!-- first - 3 - content - zigzag -->
<div class="circle-3-main">
<div class="circle-3-main-content">
<div class="circle-3-main-content-text-top">add amazing ui/ux elements</div>
<h2 class="circle-3-main-content-text-middle">use pre-build UI elements</h2>
<p class="circle-3-main-content-text-bottom">to improve the UI-UX feel of your site and make the pages more attractive and a sight to look at.</p>
</div>
<div class="circle-3-main-content-image-holder">
<img src="" width="1200" alt="img-1">
</div>
</div>
<div class="circle-3-main-right">
<div class="circle-3-main-content-image-holder">
<img src="" width="386" alt="img-2">
</div>
<div class="circle-3-main-content">
<div class="circle-3-main-content-text-top">efficient elements</div>
<h2 class="circle-3-main-content-text-middle">Make your site response quicker</h2>
<p class="circle-3-main-content-text-bottom">with carefully written code snippets the memory consumption and site response time will be even less.</p>
</div>
</div>
<div class="circle-3-main">
<div class="circle-3-main-content">
<div class="circle-3-main-content-text-top">Resoposive elements to save your time</div>
<h2 class="circle-3-main-content-text-middle">Use Responsive elements with pre written code</h2>
<p class="circle-3-main-content-text-bottom">elements with pre-written codes to make them work responsive with different screen sizes.</p>
</div>
<div class="circle-3-main-content-image-holder">
<img src="" width="341" alt="img-3">
</div>
</div>
<!-- support -->
<div class="circle-3-main-support-images">
<div class="circle-3-main-support-images-holder">
<img src="images\landing\bookmark.svg" width="80" alt="i-1">
<h4>become a consumer</h4>
<p>Log-in right now and use many free elements on our site to deploy you own project.</p>
</div>
<div class="circle-3-main-support-images-holder">
<img src="images\landing\creator.svg" width="74" alt="i-2">
<h4>become a contributor</h4>
<p>Enable your creativity and create components and share on our site with our users.</p>
</div>
<div class="circle-3-main-support-images-holder">
<img src="images\landing\support.svg" alt="i-3">
<h4>support the site</h4>
<p>purchase premium account and support our site to increase our range and tools to give you more facilites.</p>
</div>
</div>
<!-- stats -->
<div class="circle-3-main-stats-images">
<div class="circle-3-main-stats-images-holder">
<div class="circle-3-main-stats-images-number">+12k</div>
<h4>Current Users</h4>
</div>
<div class="circle-3-main-stats-images-holder">
<div class="circle-3-main-stats-images-number">842</div>
<h4>number of components</h4>
</div>
<div class="circle-3-main-stats-images-holder">
<div class="circle-3-main-stats-images-number">12</div>
<h4>languages supported</h4>
</div>
<div class="circle-3-main-stats-images-holder">
<div class="circle-3-main-stats-images-number">515</div>
<h4>contributors</h4>
</div>
</div>
<div class="circle-3-main-features">
<div class="circle-3-main-features-text">
<div class="circle-3-main-features-text-up">Device compatibility</div>
<h2>Can work on multiple range of devices</h2>
<p></p>
</div>
<div class="circle-3-main-features-image">
<img src="images\landing\main-next-1.png" width="519" alt="" class="image-2">
</div>
</div>
<div class="circle-3-main-features">
<div class="circle-3-main-features-image">
<img src="images\landing\main-next-2.png" width="519" alt="" class="image-2">
</div>
<div class="circle-3-main-features-text">
<div class="circle-3-main-features-text-up">Easy to deoploy</div>
<h2 class="circle-3-main-features-text-down">Multiple language support</h2>
<p>allows you to deploy elements in multiple elements in multiple different languages </p>
</div>
</div>
<!-- add a slider -->
</div>
<!-- signup-login -->
<div class="circle-3-signup-login">
<div class="circle-3-signup-login-container">
<h2>You Ready to Join us?</h2>
<div class="circle-3-signup-login-button">
<a href="signup.html" class="circle-3-signup-button">Sign-up</a>
<a href="login.html" class="circle-3-login-button">Log-in</a>
</div>
</div>
</div>
<!-- circle - 4 (Footer) -->
<div class="circle-4-community">
<div class="circle-4-community-holder">
<h2>Get updates from our community</h2>
<p>Get Emails Regarding this weeks popular components</p>
<div class="form-block w-form">
<form class="circle-4-community-form">
<input class="circle-4-community-form-input" placeholder="Enter your email" type="text" required>
<input class="circle-4-community-form-button" type="submit" >
</form>
<div class="circle-4-community-form-success-text">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="circle-4-community-form-fail-text">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Frequently Asked Questions</h2>
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false">
<span class="accordion-title">À quelle fréquence doit-on remplacer son chauffe-eau?
</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Aux 10 à 12 ans. Avec les années, la rouille causée par l’eau endommage le contenant de métal. Soyez aux aguets : l’apparition des premiers signes de rouille, d'humidité au toucher du réservoir et le changement de coloration de l'eau chaude (rougeâtre) sont autant de signes avant-coureurs que la durée de vie de votre chauffe-eau arrive à échéance.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false">
<span class="accordion-title">Why is the sky blue?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false">
<span class="accordion-title">Will we ever discover aliens?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false">
<span class="accordion-title">How much does the Earth weigh?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false">
<span class="accordion-title">How do airplanes stay up?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
</div>
</div>
<div class="circle-4-footer">
<div class="circle-4-footer-holder">
<div class="circle-4-footer-links">
<a href="" class="circle-4-footer-link">Email</a>
<a href="" class="circle-4-footer-link">Instagram</a>
<a href="" class="circle-4-footer-link">Facebook</a>
<a href="" class="circle-4-footer-link">Twitter</a>
<a href="" class="circle-4-footer-link">Some Kind of License Info</a>
<a href="" class="circle-4-footer-link">Dipen</a>
</div>
</div>
</div>
<script src="./js/faq.js" />
</body>
</html>