diff --git a/src/blocks/TanasovAlexandru/Bgen.png b/src/blocks/TanasovAlexandru/Bgen.png new file mode 100644 index 00000000..c6402d9f Binary files /dev/null and b/src/blocks/TanasovAlexandru/Bgen.png differ diff --git a/src/blocks/TanasovAlexandru/index.html b/src/blocks/TanasovAlexandru/index.html new file mode 100644 index 00000000..999ba942 --- /dev/null +++ b/src/blocks/TanasovAlexandru/index.html @@ -0,0 +1,20 @@ + + + + + + + Gradient Background + + + +

Background Generator

+ + + +

This is the background

+

+ + + + \ No newline at end of file diff --git a/src/blocks/TanasovAlexandru/meta.json b/src/blocks/TanasovAlexandru/meta.json new file mode 100644 index 00000000..373769d9 --- /dev/null +++ b/src/blocks/TanasovAlexandru/meta.json @@ -0,0 +1,5 @@ +{ + "block_name": "Background Generator", + "author_name": "TanasovAlexandru", + "author_github_url": "https://github.com/AlexT0307/" +} \ No newline at end of file diff --git a/src/blocks/TanasovAlexandru/script.js b/src/blocks/TanasovAlexandru/script.js new file mode 100644 index 00000000..bc4a2032 --- /dev/null +++ b/src/blocks/TanasovAlexandru/script.js @@ -0,0 +1,45 @@ +var css = document.querySelector("h3"); +var color1 = document.querySelector(".color1"); +var color2 = document.querySelector(".color2"); +var body = document.getElementById("gradient"); +var button = document.getElementById("but"); + +function setBg(){ + var randomcolor1 = randomColor = Math.floor(Math.random()*16777215).toString(16); + var randomcolor2 = randomColor = Math.floor(Math.random()*16777215).toString(16); + color1.value = "#" + randomcolor1; + color2.value = "#" + randomcolor2; + setGradient(); +} + +button.addEventListener ("click", setBg) + +color1.value ="#ff0000"; +color2.value = "#ffff00"; + +function display(){ +css.innerHTML = "linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0));"; +} +display() +function setGradient() { + body.style.background = + "linear-gradient(to right, " + + color1.value + + ", " + + color2.value + + ")"; + css.textContent = body.style.background + ";"; +} + +// // body.style.background = "red"; +// color1.addEventListener("input", function() { +// setGradient(); + +// }) + +// color2.addEventListener("input", function(){ +// setGradient(); +// }) + +color1.addEventListener("input", setGradient); +color2.addEventListener("input", setGradient); \ No newline at end of file diff --git a/src/blocks/TanasovAlexandru/style.css b/src/blocks/TanasovAlexandru/style.css new file mode 100644 index 00000000..76bf0c2d --- /dev/null +++ b/src/blocks/TanasovAlexandru/style.css @@ -0,0 +1,34 @@ +body{ + font: 'Raleway', sans-serif; + color: rgba(0, 0, 0, 0.5); + text-align: center; + text-transform: uppercase; + letter-spacing: .5em; + top: 15%; + background: linear-gradient(to right, #ff0000, #ffff00); +} +/* .color1 { + color: red; +} */ +#but { + background-color: yellow; + color: black; + text-transform: uppercase; + font-family: 'Times New Roman', Times, serif; +} +h1 { + font: 600 3.5em 'Raleway', sans-serif; + color: rgba(0, 0, 0, 0.5); + text-transform: uppercase; + text-align: center; + letter-spacing: .5em; + width: 100%; +} + +h3 { + font: 900 1em 'Raleway, sans-serif'; + color: rgba(0, 0, 0, 0.5); + text-align: center; + text-transform: none; + letter-spacing: 0.01em; +} \ No newline at end of file