-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
133 lines (126 loc) · 4.78 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
<!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="icon" type="image/x-icon" href="svg/logo.ico">
<title>Azure UI</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<h1 class="img-header">
<a href="index.html" class="logo"
><img src="/svg/logo.svg" alt="Logo" class="img-logo"
/></a>
</h1>
<div class="header-nav">
<nav>
<ul>
<li class="docs">
<a class="link" href="components/alert/alert.html">Docs</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="hero-container">
<div class="hero-content">
<h1 class="azure">AZURE UI</h1>
<p class="intro">
A lightweight and ready-to-use CSS library for developing fast and
responsive web interfaces. Develop more with Azure!
</p>
<div class="btn-cnt">
<a href="#installation" class="install-btn">Installation</a>
<a href="components/alert/alert.html" class="start-btn">
Let's get started
</a>
</div>
</div>
<div class="img-cnt">
<img src="svg/design.svg" alt="ui-design" class="hero-img" />
</div>
</div>
<div class="section" id="installation">
<h1 class="install-hd">Installation Guide</h1>
<div class="install">
<div class="install-card">
<div class="css">
<div class="card-header">
<h1 class="title">CSS Styles and JavaScript</h1>
<p class="css-body">
To get the styles of the components and the JavaScript
functionality, add the following line of code in the head tag
of your HTML document.
</p>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=htmlmixed&width=608.5&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=43px&ph=47px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2520%253Clink%2520rel%253D%2522stylesheet%2522%2520href%253D%2522https%253A%252F%252Fazure-ui.netlify.app%252Fmain.css%2522%253E%250A"
style="
height: 300px;
border: 0;
transform: scale(1);
overflow: hidden;
width: 100%;
"
sandbox="allow-scripts allow-same-origin"
>
</iframe>
</div>
</div>
</div>
<div class="install-card">
<div class="css">
<div class="card-header">
<h1 class="title">Font Awesome Icons</h1>
<p class="css-body">
To get the Font Awesome Icons, add the following line of code
on the top of the CSS file in your HTML document.
</p>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=javascript&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540import%2520url%28%2522https%253A%252F%252Fuse.fontawesome.com%252Freleases%252Fv5.15.4%252Fcss%252Fall.css%2522%29%253B"
style="
width: 100%;
height: 300px;
border: 0;
transform: scale(1);
overflow: hidden;
"
sandbox="allow-scripts allow-same-origin"
>
</iframe>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div>
<p class="footer-header">Azure UI</p>
<hr class="footer-hr" />
<p class="footer-sub">
Made with <i class="fas fa-code"></i> by Masudha Meher
</p>
</div>
<div class="social-links">
<a href="https://github.com/samflab"
><i class="fab fa-github fa-2x"></i
></a>
<a href="https://www.linkedin.com/in/masudhameher/"
><i class="fab fa-linkedin fa-2x"></i
></a>
<a href="https://samflab.github.io/"
><i class="fas fa-globe fa-2x"></i
></a>
<a href="https://twitter.com/kasturimeh"
><i class="fab fa-twitter fa-2x"></i
></a>
</div>
</div>
</footer>
</body>
</html>