-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (46 loc) · 2.46 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
<!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="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
<title>Random gradient generator</title>
</head>
<body>
<div class="cover">
<div class="heading">
<span class="one">CSS</span> <br>
<span class="two">GRADIENT</span> <br>
<span class="three">GENERATOR</span>
</div>
<button>▶</button>
<aside>
<!-- h3 hover underline -->
<h3> What is a CSS gradient? </h3>
<span>CSS gradients are new type of images added in the CSS3 Image Module. Gradients let you display smooth transitions between two or more specified colors.
Gradients can be used anywhere you would use an <code><image></code>, such as in backgrounds.
Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.
<br>
<code id="syntax"> Syntax for css gradient:</code>
<code id="code">background: <span style="color:green">linear-gradient</span>(<span style="color: indianred">to </span><span style="color:cyan">top right</span>,#981674, #5D36D1);</code>
</span>
</aside>
</div>
<!-- Generator app -->
<div class="tada">
<div class="sidebar">
<div class="upper"> <span class="upper-text">Click to generate <br> random gradient</span> <br> <span class="button" id="generate">Generate</span> </div>
<div class="lower"><span id="lower-title">Colors generated</span> <br><span id="sub">(hover to see rgb codes)</span>
<span class="button color1">COLOR 1</span>
<span class="button color2">COLOR 2</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>