Skip to content

Commit d2a2989

Browse files
PBJIPBJI
authored
Merge pull request #710 from Shivam250702/master
BackgroundGenerator/Shivam250702
2 parents 9c7bf82 + 9f76c35 commit d2a2989

File tree

7 files changed

+69
-0
lines changed

7 files changed

+69
-0
lines changed

‎BackgroundGenerator/Shivam250702/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This is a simple Background Generator Made using HTML,CSS and JS which allow user to input the color of its choice and change color from left to right.
2+
3+
4+
![Alt text](image.png)
5+
![Alt text](image-1.png)
6+
![Alt text](image-2.png)

‎BackgroundGenerator/Shivam250702/image-1.png

78 KB
Loading

‎BackgroundGenerator/Shivam250702/image-2.png

96 KB
Loading

‎BackgroundGenerator/Shivam250702/image.png

86 KB
Loading

‎BackgroundGenerator/Shivam250702/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Gradient Background</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body id="gradient">
8+
<h1>Background Generator</h1>
9+
<input class="color1" type="color" name="color1" value="#00ff00">
10+
<input class="color2" type="color" name="color2" value="#ff0000">
11+
<h2>Current CSS Background</h2>
12+
<h3></h3>
13+
<script type="text/javascript" src="script.js"></script>
14+
</body>
15+
</html>

‎BackgroundGenerator/Shivam250702/script.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var css = document.querySelector("h3");
2+
var color1 = document.querySelector(".color1");
3+
var color2 = document.querySelector(".color2");
4+
var body = document.getElementById("gradient");
5+
var n=prompt("1st value want");
6+
var m=prompt("2nd,value want");
7+
body.style.background="linear-gradient(to right, "+n+","+m+")";
8+
function setGradient() {
9+
body.style.background =
10+
"linear-gradient(to right, "
11+
+ color1.value
12+
+ ", "
13+
+ color2.value
14+
+ ")";
15+
16+
css.textContent = body.style.background + ";";
17+
}
18+
19+
color1.addEventListener("input", setGradient);
20+
21+
color2.addEventListener("input", setGradient);

‎BackgroundGenerator/Shivam250702/style.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
body {
2+
font: 'Raleway', sans-serif;
3+
color: rgba(0,0,0,.5);
4+
text-align: center;
5+
text-transform: uppercase;
6+
letter-spacing: .5em;
7+
top: 15%;
8+
background: linear-gradient(to right, red , yellow); /* Standard syntax */
9+
}
10+
11+
h1 {
12+
font: 600 3.5em 'Raleway', sans-serif;
13+
color: rgba(0,0,0,.5);
14+
text-align: center;
15+
text-transform: uppercase;
16+
letter-spacing: .5em;
17+
width: 100%;
18+
}
19+
20+
h3 {
21+
font: 900 1em 'Raleway', sans-serif;
22+
color: rgba(0,0,0,.5);
23+
text-align: center;
24+
text-transform: none;
25+
letter-spacing: 0.01em;
26+
27+
}

0 commit comments

Comments
 (0)