-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (195 loc) · 11.1 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
<!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>Simran | Component Library</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./assets/DoraUI.png" type="image/x-icon">
<!-- font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<a href="#"><img class="modeIcon" src="../assets/moon.svg" alt=""></a>
<nav>
<!-- NAV LOGO IMAGE -->
<div class="logo">
<img src="assets/1.png" alt="" class="logo_img">
</div>
<!-- NAV LIST -->
<ul class="nav_list">
<li><a class="nav_item" href="#header">Home</a></li>
<li><a class="nav_item" href="#features">Features</a></li>
<li><a class="nav_item" href="#installation">Installation</a></li>
<li><a class="nav_item" href="./components/Alerts/alerts.html">Documentation</a></li>
<li><a class="nav_item" href="https://github.com/simran61/doraUI-post10th">GitHub</a></li>
</ul>
<!-- NAV SOCIAL ICONS -->
<div class="social_icons">
<a class="icon" target="_blank" href="https://github.com/simran61"><i class="fab fa-github-alt"></i></a>
<a class="icon" target="_blank" href="https://www.linkedin.com/in/simran-gangwani-b93a441b2/"><i
class="fab fa-linkedin-in"></i></a>
<a class="icon" target="_blank" href="https://simran-gangwani.netlify.app/"><i class="fas fa-code"></i></a>
<a class="icon" target="_blank" style="margin-bottom: 0px;" href="https://twitter.com/SimranGangwani3"><i
class="fab fa-twitter"></i></a>
</div>
</nav>
<div class="main">
<!-- HEADERS CODE START -->
<div id="header">
<p class="html_tag"><html></p>
<p class="html_tag mr_left_1_5"><body></p>
<p class="html_tag mr_left_3"><header></p>
<p class="html_tag mr_left_4_5"><h1></p>
<div class="mr_left_4_5 primary_heading">
<span class="span_heading">B</span>
<span class="span_heading">u</span>
<span class="span_heading">i</span>
<span class="span_heading">l</span>
<span class="span_heading">d</span>
<span class="span_heading"> </span>
<span class="span_heading">y</span>
<span class="span_heading">o</span>
<span class="span_heading">u</span>
<span class="span_heading">r</span>
<span class="span_heading"> </span>
<span class="span_heading">s</span>
<span class="span_heading">i</span>
<span class="span_heading">t</span>
<span class="span_heading">e</span>
</div>
<div class="mr_left_4_5 primary_heading">
<span class="span_heading">b</span>
<span class="span_heading">e</span>
<span class="span_heading">t</span>
<span class="span_heading">t</span>
<span class="span_heading">e</span>
<span class="span_heading">r</span>
<span class="span_heading"> </span>
<span class="span_heading">a</span>
<span class="span_heading">n</span>
<span class="span_heading">d</span>
<span class="span_heading"> </span>
<span class="span_heading">f</span>
<span class="span_heading">a</span>
<span class="span_heading">s</span>
<span class="span_heading">t</span>
<span class="span_heading">e</span>
<span class="span_heading">r</span>
</div>
<div class="mr_left_4_5 primary_heading">
<span class="span_heading">w</span>
<span class="span_heading">i</span>
<span class="span_heading">t</span>
<span class="span_heading">h</span>
<span class="span_heading"> </span>
<span class="span_heading brand_name">D</span>
<span class="span_heading">o</span>
<span class="span_heading">r</span>
<span class="span_heading">a</span>
<span class="span_heading">U</span>
<span class="span_heading">I</span>
<span class="span_heading">.</span>
</div>
<p class="html_tag showAside"></h1></p>
<p class="html_tag mr_p_open"><p></p>
<p class="tagline mr_left_4_5">A <span class="text_theme">doraemon</span> for your website UI...</p>
<p class="html_tag mr_left_4_5 p_close"></p></p>
<p class="html_tag mr_left_4_5"><button class="primary_btn"></p>
<div class="btn1">
<a href="./components/Alerts/alerts.html"><button><span class="get_started">Get Started <i class="fas fa-arrow-right"></i></span></button></a>
</div>
<p class="html_tag mr_left_4_5"></button></p>
<p class="html_tag mr_left_3"></header></p>
</div>
<!-- FEATURES CODE START -->
<div id="features">
<p class="html_tag mr_left_3 mr_top_2"><section class="features"></p>
<p class="html_tag mr_left_4_5"><h2 class="primary_heading"></p>
<div class="mr_left_4_5 primary_heading features_heading">
<span class="span_heading brand_name">F</span>
<span class="span_heading">e</span>
<span class="span_heading">a</span>
<span class="span_heading">t</span>
<span class="span_heading">u</span>
<span class="span_heading">r</span>
<span class="span_heading">e</span>
<span class="span_heading">s</span>
</div>
<p class="html_tag features_h2_tag"></h2"></p>
<p class="html_tag mr_left_4_5"><div class="cards"></p>
<!-- FEATURES CARD STARTS -->
<div class="features">
<div class="cards">
<img src="assets/easy_line.png" alt="" class="feature_img">
<h3 class="feature_heading">Easy to use</h3>
<p class="feature_para font_style">With DoraUI you don't need to worry about your website UI. Just
copy the code snippets we have provided, with appropriate classes and BOOMMMM, your component is
ready.</p>
</div>
<div class="cards">
<img src="assets/light_line.png" alt="" class="feature_img">
<h3 class="feature_heading">Light-weight</h3>
<p class="font_style">Unlike other components library out there on internet, with DoraUI you don't
need to worry about the loading time of your website. Our componets are super light to use.</p>
</div>
<div class="cards">
<img src="assets/responsive_line1.png" alt="" class="feature_img">
<h3 class="feature_heading">Responsive</h3>
<p class="font_style">Responsiveness has now become one of the most essential feature of every
website. DoraUI provides components which are responsive accross all devices.</p>
</div>
</div>
<p class="html_tag mr_left_4_5"></div></p>
<p class="html_tag mr_left_3"></section></p>
</div>
<!-- INSTALLATION CODE START -->
<div id="installation">
<p class="html_tag mr_left_3 mr_top_2"><section class="installation"></p>
<p class="html_tag mr_left_4_5"><h2 class="primary_heading"></p>
<div class="mr_left_4_5 primary_heading">
<span class="span_heading brand_name">I</span>
<span class="span_heading">n</span>
<span class="span_heading">s</span>
<span class="span_heading">t</span>
<span class="span_heading">a</span>
<span class="span_heading">l</span>
<span class="span_heading">l</span>
<span class="span_heading">a</span>
<span class="span_heading">t</span>
<span class="span_heading">i</span>
<span class="span_heading">o</span>
<span class="span_heading">n</span>
</div>
<p class="html_tag install_heading_tag"></h2></p>
<div class="link_div">
<p class="link_para font_style mr_left_4_5">Use classes by adding stylesheet using link below</p>
<div class="css_link">
<iframe
src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=23px&ph=28px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Clink%2520rel%253D%2522stylesheet%2522%2520href%253D%2522https%253A%252F%252Fdoraui-simran.netlify.app%252Fcomponents%252Fcomponent.css%2522%253E"
style="width: 844px; height: 139px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
</div>
<div class="link_div">
<p class="link_para font_style mr_left_4_5">Import JS to add interactivity in your web app</p>
<div class="css_link">
<iframe
src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=23px&ph=28px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=JavaScript%2520features%2520link%2520in%2520progress......%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
style="width: 844px; height: 139px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
</div>
<p class="html_tag mr_left_3"></section></p>
<p class="html_tag mr_left_1_5"></body></p>
<p class="html_tag mr_btm_1"></html></p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>