-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
80 lines (76 loc) · 2.66 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
<!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="icon" href="fav.png" width="2px" />
<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="css/backgroundgen.css" />
</head>
<body id="gradient">
<div class="container">
<div class="content">
<h1>Gradientiser</h1>
<h2>CSS Gradient Background Generator</h2>
<p>
Choose the colors you want by clicking 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="label">Color 1:</h3>
<input type="color" name="color1" value="#ff0000" id="c1" />
<h3 class="label">Color 2:</h3>
<input type="color" name="color2" value="#ffff00" id="c2" />
<h3>or</h3>
<div id="radioIn">
<div class="radio-btn">
<label for="left">Right to Left :</label>
<input type="radio" id="left" name="direction" value="270deg" />
</div>
<div class="radio-btn">
<label for="right">Left to Right :</label>
<input
type="radio"
id="right"
name="direction"
value="90deg"
checked
/>
</div>
<div class="radio-btn">
<label for="top">Bottom to Up :</label>
<input type="radio" id="top" name="direction" value="0deg" />
</div>
<div class="radio-btn">
<label for="bottom">Top to Bottom :</label>
<input type="radio" id="bottom" name="direction" value="180deg" />
</div>
</div>
<br />
<button id="random">Press to random get bg</button>
<h2>CSS code for current background</h2>
<div class="code-container">
<img
src="copy-icon.svg"
alt="copy"
id="copy-icon"
title="copy code"
/>
<h3 id="code"></h3>
</div>
<div class="githublogo">
<a href="https://github.com/Nirbhayparmar/gradientiser-BgGenerator"
><img
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
alt="github_logo"
/></a>
</div>
</div>
<script type="text/javascript" src="js/backgroundgen.js"></script>
</body>
</html>