forked from gdsc-pdeu/gradientiser-BgGenerator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
49 lines (46 loc) · 1.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gradientiser</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="backgroundgen.css" />
</head>
<body id="gradient">
<nav><img src="GitHub-Mark-Light-64px.png" alt="GitHub logo" /></nav>
<div class="container">
<h1>Gradientiser</h1>
<h2>CSS Gradient Background Generator</h2>
<p>
Choose the colors you want by cliking on the color picker tool, or to
get random color click the button or reload the page. Copy the code and
paste it in your CSS under body tag or any div tag.
</p>
<h3 class="lable">Color 1:</h3>
<input type="color" name="color1" value="#ff0000" id="c1" />
<h3 class="lable">Color 2:</h3>
<input type="color" name="color2" value="#ffff00" id="c2" />
<h3>or</h3>
<div id="radioIn">
<input type="radio" id="left" name="direction" value="left" />
<label for="left">Right to Left</label>
<input type="radio" id="right" name="direction" value="right" checked />
<label for="right">Left to Right</label>
<input type="radio" id="top" name="direction" value="top" />
<label for="top">Bottom to Up</label>
<input type="radio" id="bottom" name="direction" value="bottom" />
<label for="bottom">Top to Bottom</label>
</div>
<br />
<button id="random">Click to get a Random BG</button>
<h2>CSS code for curent background 👇</h2>
<h3 id="code"></h3>
</div>
<script type="text/javascript" src="backgroundgen.js"></script>
</body>
</html>