-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (144 loc) · 7.37 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
<!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">
<meta name="author" content="Bharati Subramanian">
<meta name="description" content="elixir - The perfect library brewed for styling your website">
<title>elixir | Home</title>
<link rel="shortcut icon" href="./logo-assets/favicon_io/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="grid-container">
<nav class="navbar flex-row flex-justify-between flex-align-center">
<a href="/" class="brand flex-row flex-align-center flex-justify-center">
<img
src="../logo-assets/elixir-logo.png"
alt="Elixir Logo - a violet shaded diamond"
class="brand__logo" />
<h2 class="brand__name">elixir</h2>
</a>
<ul class="navlinks flex-row list-style-none flex-align-center">
<li class="navlink active">
<a href="/" class="link text-link">
Home
</a>
</li>
<li class="navlink">
<a href="/docs/alert/" class="link text-link">
Docs
</a>
</li>
<li class="navlink">
<a
href="https://github.com/bharati-21/elixir-ui"
target="_blank"
class="link icon-link">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
</nav>
<header class="header flex-col flex-align-center flex-justify-center">
<img src="/logo-assets/Static website-cuate.svg" alt="Hero Image Website and components" class="hero__img img-responsive" />
<h3 class="hero__head text-center">
Add magic to your projects with
<span class="brand">
<a href="/" class="text-link link">elixir</a>
</span>
</h3>
<div class="hero__button-container flex-row flex-justify-center flex-align-center mt-1-5">
<a href="#main" class="btn btn-primary btn-outline py-0-5 px-0-75">
Get Started
</a>
<a href="/docs/alert/" class="btn btn-primary py-0-5 px-0-75">Documentation</a>
</div>
</header>
<main class="main home__main" id="main">
<section id="introduction">
<h3 class="section__head">
Introduction
</h3>
<article class="content introduction__content">
<p class="section__lead text text-lg">
Get started with <span class="navlink active">
<a href="/" class="text-link link">elixir</a></span>
- an open source CSS library aimed at quick, responsive, and simple development of webites.
</p>
<p class="section__lead text text-lg text-justify">
No more fretting about styling websites. <span class="navlink active">
<a href="/" class="text-link link">elixir</a></span>
helps you with a completely logic-driven development! Leave your design worries to us!
</p>
</article>
<article class="content installation__content">
<h5 class="section__head">
Installation Guide
</h5>
<div class="code-snippet-container">
<p class="text">Paste the code below in the head tag of your html document.</p>
<div class="code-display">
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fbharati-21%2Felixir-ui-code%2Fblob%2Fmain%2Fcomponent-links%23L1&style=atom-one-light&showCopy=on"></script>
</div>
</div>
<p class="text text-sm text-center">or</p>
<div class="code-snippet-container">
<p>Paste the code below in the main stylesheet of your website.</p>
<div class="code-display">
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fbharati-21%2Felixir-ui-code%2Fblob%2Fmain%2Fcomponent-links%23L3&style=atom-one-light&showCopy=on"></script>
</div>
</div>
</article>
<article class="content documentation__reference flex-row">
<p class="text text-lg text__reference">
Refer the documentation to understand the design system followed by elixir, and the components we have to offer.
</p>
<a href="/docs/alert/" class="btn btn-primary px-0-75 py-0-5">
Documentation
</a>
</article>
</section>
</main>
</div>
<footer class="footer flex-col flex-align-center flex-justify-center py-1 px-1-5" id="footer">
<p class="text text-sm text-center text__author mb-1">
Made with <span class="icon primary-color bold">
<i class="fas fa-code"></i>
</span> by <a href="https://bharati-21.github.io/" class="link text-link">Bharati</a>
</p>
<ul class="navlinks flex-row list-style-none flex-align-center">
<li class="navlink">
<a
href="https://github.com/bharati-21"
target="_blank"
class="link icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li class="navlink">
<a
href="https://twitter.com/_girlwhocodes"
target="_blank"
class="link icon-link">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="navlink">
<a
href="https://www.linkedin.com/in/bharati-subramanian-29734b152/"
target="_blank"
class="link icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
<p class="text text-sm text-center text__copyright mt-1">
© 2021 - <span class="brand__name">
elixir designs
</span>
</p>
</footer>
</body>
</html>