-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
36 lines (33 loc) · 1.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cool Background Generator</title>
<link rel="icon" sizes="32x32" type="image/png" href="gradient-logo.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p><a href="https://github.com/geekananya"> Other Projects</a></p>
<div class="center">
<h1>Choose your Gradient Background</h1>
<!-- <button class="stop">Colour Stop</button> -->
<input type="color" id="colour1" value="#ec69d4">
<input type="color" id="colour2" value="#58eeb5">
<button class="randomise" id="randomise">Randomise</button>
<div class="merged">
<p id="css">CSS: linear-gradient(to right, #ec69d4, #58eeb5)</p>
<div class="relative">
<button id="copy" class="copy"><img src="copy.svg"></button>
<div class="tooltip"><span class="tooltiptext">Copy CSS!</span></div>
</div>
</div>
</div>
<!-- <input class="colour-stopper" type="range" value="50"> -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
<!-- icon for copy
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
</svg> -->