-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (155 loc) · 5.23 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
<!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" />
<link rel="stylesheet" href="./styles.css" />
<link rel="icon" href="./assets/images/logo.ico" type="image/x-icon" />
<title>glitterCSS</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="logo h5 text-600">{ glitterCSS</a>
<ul class="nav-links">
<li>
<a href="#" class="nav-link">Home</a>
</li>
<li>
<a href="./screens/Documentation/index.html" class="nav-link">Doc</a>
</li>
<li>
<a
href="https://linktr.ee/iambiswanath"
class="nav-link"
target="_blank"
>Contact</a
>
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</nav>
<main>
<article class="container intro">
<section class="intro-text">
<h1 class="h2">glitter your styles</h1>
<p class="text-lg my-2">
A CSS framework for building beautiful, responsive websites.
</p>
<div class="intro-btns">
<a
href="./screens/Documentation/index.html"
class="btn btn-primary mg-r-1"
>
Get Started
</a>
<a href="#installation" class="btn btn-secondary"> Installation </a>
</div>
</section>
<section class="illustration">
<img
src="./assets/svgs/Illustration.svg"
alt="Illustration"
class="img-responsive"
/>
</section>
</article>
<article class="container" id="installation">
<section class="install-text">
<h2 class="h3">Installation</h2>
<p class="text-rg my-2">
Copy and paste the code in the head tag of your html document. So
that you can style your components by just adding class names to
your html elements.
</p>
<a
href="./screens/Documentation/index.html"
class="btn btn-primary mg-r-1"
>
Get Started
</a>
</section>
<section class="carbon-wrapper">
<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=43px&ph=25px&ln=false&fl=1&fm=Hack&fs=10px&lh=250%25&si=false&es=2x&wm=false&code=%253Clink%2520rel%253D%2522stylesheet%2522%2520href%253D%2522https%253A%252F%252Fglittercss.netlify.app%252Fglitter.css%2522%253E"
style="
width: 100%;
height: auto;
border: 0;
transform: scale(1);
overflow: hidden;
"
sandbox="allow-scripts allow-same-origin"
>
</iframe>
</section>
</article>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer-info">
<a href="#" class="logo h6 text-600">{glitterCSS</a>
<p class="text-md my-1 text-primary">
A CSS framework for building beautiful, responsive websites.
</p>
<div class="footer-contact">
<div>
<p class="text-lg">Email me at</p>
<p class="text-sm text-tertiary">[email protected]</p>
</div>
<div>
<p class="text-lg">Call us</p>
<p class="text-sm text-tertiary">8906XXXXXX</p>
</div>
</div>
</div>
<div class="footer-info">
<p href="#" class="h6 text-600 text-primary">Lets Talk!</p>
<p class="text-md my-1 text-primary">
We are always up to discuss how we can improve. Feel free to reach
us with doubts and feedbacks.
</p>
<div class="footer-icon-container">
<a
href="https://www.facebook.com/tewari.biswanath00/"
class="btn-icon-secondary btn-icon-sm"
target="_blank"
>
<i class="fab fa-facebook"></i>
</a>
<a
href="https://twitter.com/iambizan"
class="btn-icon-secondary btn-icon-sm"
target="_blank"
>
<i class="fab fa-twitter"></i>
</a>
<a
href="https://www.instagram.com/iambizan/"
class="btn-icon-secondary btn-icon-sm"
target="_blank"
>
<i class="fab fa-instagram"></i>
</a>
<a
href="https://www.linkedin.com/in/biswanathtewari/"
class="btn-icon-secondary btn-icon-sm"
target="_blank"
>
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="footer-legal">
<p class="text-md text-tertiary">
© 2022 glitterCSS. All rights reserved.
</p>
<p class="text-md text-tertiary">Open source under the MIT License.</p>
</div>
</footer>
<script src="./app.js"></script>
</body>
</html>