From 4a01411637cb9a07300c6e4f857696ae548f8479 Mon Sep 17 00:00:00 2001 From: AbduRahim Date: Fri, 18 Mar 2022 18:45:59 +0530 Subject: [PATCH 01/11] Adding Gradient background --- .../ColorChanging bg/Gradient_bg.html | 11 ++++++++++ .../Background/ColorChanging bg/readme.md | 8 +++++++ .../Background/ColorChanging bg/style.css | 22 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html create mode 100644 HTML+CSS+JS/Background/ColorChanging bg/readme.md create mode 100644 HTML+CSS+JS/Background/ColorChanging bg/style.css diff --git a/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html b/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html new file mode 100644 index 0000000..ff3d4ad --- /dev/null +++ b/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html @@ -0,0 +1,11 @@ + + + + Gradient BG + + + + + + + \ No newline at end of file diff --git a/HTML+CSS+JS/Background/ColorChanging bg/readme.md b/HTML+CSS+JS/Background/ColorChanging bg/readme.md new file mode 100644 index 0000000..7eb1763 --- /dev/null +++ b/HTML+CSS+JS/Background/ColorChanging bg/readme.md @@ -0,0 +1,8 @@ +# Gradient BG +An Animated Background created using pure CSS and HTML. + +## Demo +... + +## Setup +Just download and open index.html! \ No newline at end of file diff --git a/HTML+CSS+JS/Background/ColorChanging bg/style.css b/HTML+CSS+JS/Background/ColorChanging bg/style.css new file mode 100644 index 0000000..53c25b5 --- /dev/null +++ b/HTML+CSS+JS/Background/ColorChanging bg/style.css @@ -0,0 +1,22 @@ +html, body { + width: 100%; + height:100%; + } + + body { + background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + } + + @keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } \ No newline at end of file From fbb7aa2c54cffed58f271bb7d976d0b695707cc2 Mon Sep 17 00:00:00 2001 From: AbduRahim Date: Fri, 18 Mar 2022 18:55:50 +0530 Subject: [PATCH 02/11] Gradient Background --- .../Background/Gradient_bg/Gradient.html | 11 ++++++++++ HTML+CSS+JS/Background/Gradient_bg/readme.md | 8 +++++++ HTML+CSS+JS/Background/Gradient_bg/style.css | 22 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 HTML+CSS+JS/Background/Gradient_bg/Gradient.html create mode 100644 HTML+CSS+JS/Background/Gradient_bg/readme.md create mode 100644 HTML+CSS+JS/Background/Gradient_bg/style.css diff --git a/HTML+CSS+JS/Background/Gradient_bg/Gradient.html b/HTML+CSS+JS/Background/Gradient_bg/Gradient.html new file mode 100644 index 0000000..c9c2c46 --- /dev/null +++ b/HTML+CSS+JS/Background/Gradient_bg/Gradient.html @@ -0,0 +1,11 @@ + + + + + Gradient BG + + + + + + \ No newline at end of file diff --git a/HTML+CSS+JS/Background/Gradient_bg/readme.md b/HTML+CSS+JS/Background/Gradient_bg/readme.md new file mode 100644 index 0000000..5395236 --- /dev/null +++ b/HTML+CSS+JS/Background/Gradient_bg/readme.md @@ -0,0 +1,8 @@ +# Gradient BG +An Animated Background created using pure CSS and HTML. + +## Demo +... + +## Setup +Just download and open Gradient_bg.html! \ No newline at end of file diff --git a/HTML+CSS+JS/Background/Gradient_bg/style.css b/HTML+CSS+JS/Background/Gradient_bg/style.css new file mode 100644 index 0000000..53c25b5 --- /dev/null +++ b/HTML+CSS+JS/Background/Gradient_bg/style.css @@ -0,0 +1,22 @@ +html, body { + width: 100%; + height:100%; + } + + body { + background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + } + + @keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } \ No newline at end of file From 46dfe928f8129a7e334fdd7690fc3055825c3f32 Mon Sep 17 00:00:00 2001 From: AbduRahim Date: Fri, 18 Mar 2022 18:58:45 +0530 Subject: [PATCH 03/11] Gradient Background --- HTML+CSS+JS/Background/Gradient_bg/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/HTML+CSS+JS/Background/Gradient_bg/style.css b/HTML+CSS+JS/Background/Gradient_bg/style.css index 53c25b5..d903482 100644 --- a/HTML+CSS+JS/Background/Gradient_bg/style.css +++ b/HTML+CSS+JS/Background/Gradient_bg/style.css @@ -4,7 +4,7 @@ html, body { } body { - background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); + background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); /*Can change colors as u wish*/ background-size: 400% 400%; animation: gradient 15s ease infinite; } From 1c744eb44017b8fd0463bc15662dabaeeb510457 Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:02:03 +0530 Subject: [PATCH 04/11] Delete Gradient.html --- HTML+CSS+JS/Background/Gradient_bg/Gradient.html | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 HTML+CSS+JS/Background/Gradient_bg/Gradient.html diff --git a/HTML+CSS+JS/Background/Gradient_bg/Gradient.html b/HTML+CSS+JS/Background/Gradient_bg/Gradient.html deleted file mode 100644 index c9c2c46..0000000 --- a/HTML+CSS+JS/Background/Gradient_bg/Gradient.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Gradient BG - - - - - - \ No newline at end of file From 488cff3604e56fe713d9349b5836009dcb8009b7 Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:02:21 +0530 Subject: [PATCH 05/11] Delete style.css --- .../Background/ColorChanging bg/style.css | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 HTML+CSS+JS/Background/ColorChanging bg/style.css diff --git a/HTML+CSS+JS/Background/ColorChanging bg/style.css b/HTML+CSS+JS/Background/ColorChanging bg/style.css deleted file mode 100644 index 53c25b5..0000000 --- a/HTML+CSS+JS/Background/ColorChanging bg/style.css +++ /dev/null @@ -1,22 +0,0 @@ -html, body { - width: 100%; - height:100%; - } - - body { - background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); - background-size: 400% 400%; - animation: gradient 15s ease infinite; - } - - @keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } - } \ No newline at end of file From a4de0af14ba0a041133f463d7c8de9aa04c68a45 Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:02:35 +0530 Subject: [PATCH 06/11] Delete Gradient_bg.html --- .../Background/ColorChanging bg/Gradient_bg.html | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html diff --git a/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html b/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html deleted file mode 100644 index ff3d4ad..0000000 --- a/HTML+CSS+JS/Background/ColorChanging bg/Gradient_bg.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Gradient BG - - - - - - - \ No newline at end of file From afb98eac7198e91b0862515bb0787eabc21aa78e Mon Sep 17 00:00:00 2001 From: AbduRahim Date: Fri, 18 Mar 2022 19:25:33 +0530 Subject: [PATCH 07/11] Random Image --- HTML+CSS+JS/Image-Gallery/Random Online Image/readme.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 HTML+CSS+JS/Image-Gallery/Random Online Image/readme.md diff --git a/HTML+CSS+JS/Image-Gallery/Random Online Image/readme.md b/HTML+CSS+JS/Image-Gallery/Random Online Image/readme.md new file mode 100644 index 0000000..2399456 --- /dev/null +++ b/HTML+CSS+JS/Image-Gallery/Random Online Image/readme.md @@ -0,0 +1,8 @@ +# Gradient BG +An Animated Background created using pure CSS and HTML. + +## Demo +... + +## Setup +Just download and open Random_img.html! \ No newline at end of file From 324ea1d9bf416a8714c5eea7e7cfeff447ccc4a7 Mon Sep 17 00:00:00 2001 From: AbduRahim Date: Fri, 18 Mar 2022 19:25:49 +0530 Subject: [PATCH 08/11] Random Image --- .../Random Online Image/Random_img.html | 15 +++++++++++++++ .../Image-Gallery/Random Online Image/style.css | 10 ++++++++++ 2 files changed, 25 insertions(+) create mode 100644 HTML+CSS+JS/Image-Gallery/Random Online Image/Random_img.html create mode 100644 HTML+CSS+JS/Image-Gallery/Random Online Image/style.css diff --git a/HTML+CSS+JS/Image-Gallery/Random Online Image/Random_img.html b/HTML+CSS+JS/Image-Gallery/Random Online Image/Random_img.html new file mode 100644 index 0000000..1a0e0b6 --- /dev/null +++ b/HTML+CSS+JS/Image-Gallery/Random Online Image/Random_img.html @@ -0,0 +1,15 @@ + + + + + Randome BG + + + + +
+
+
+ + + \ No newline at end of file diff --git a/HTML+CSS+JS/Image-Gallery/Random Online Image/style.css b/HTML+CSS+JS/Image-Gallery/Random Online Image/style.css new file mode 100644 index 0000000..6434c12 --- /dev/null +++ b/HTML+CSS+JS/Image-Gallery/Random Online Image/style.css @@ -0,0 +1,10 @@ +.Img{ +background-image: url('https://source.unsplash.com/1600x900/?landscape%27');/* Can change landscape and the pixels u wanna select */ +background-size: cover; +background-position: top; +background-repeat: no-repeat; +vertical-align: middle; +min-height: 100vh; +position: relative; +} + From 269bb1795a8d5897c87134f0961663d51aa19709 Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:26:39 +0530 Subject: [PATCH 09/11] Delete readme.md --- HTML+CSS+JS/Background/ColorChanging bg/readme.md | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 HTML+CSS+JS/Background/ColorChanging bg/readme.md diff --git a/HTML+CSS+JS/Background/ColorChanging bg/readme.md b/HTML+CSS+JS/Background/ColorChanging bg/readme.md deleted file mode 100644 index 7eb1763..0000000 --- a/HTML+CSS+JS/Background/ColorChanging bg/readme.md +++ /dev/null @@ -1,8 +0,0 @@ -# Gradient BG -An Animated Background created using pure CSS and HTML. - -## Demo -... - -## Setup -Just download and open index.html! \ No newline at end of file From acbdf89dec602d060a80dfdf8cb67fcfedf1c4db Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:26:50 +0530 Subject: [PATCH 10/11] Delete readme.md --- HTML+CSS+JS/Background/Gradient_bg/readme.md | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 HTML+CSS+JS/Background/Gradient_bg/readme.md diff --git a/HTML+CSS+JS/Background/Gradient_bg/readme.md b/HTML+CSS+JS/Background/Gradient_bg/readme.md deleted file mode 100644 index 5395236..0000000 --- a/HTML+CSS+JS/Background/Gradient_bg/readme.md +++ /dev/null @@ -1,8 +0,0 @@ -# Gradient BG -An Animated Background created using pure CSS and HTML. - -## Demo -... - -## Setup -Just download and open Gradient_bg.html! \ No newline at end of file From 1c4df6058447f5a7ffe4c7de888c436fb325488e Mon Sep 17 00:00:00 2001 From: Abdul Rahim <77384491+Blaze-rahim@users.noreply.github.com> Date: Fri, 18 Mar 2022 19:27:31 +0530 Subject: [PATCH 11/11] Delete style.css --- HTML+CSS+JS/Background/Gradient_bg/style.css | 22 -------------------- 1 file changed, 22 deletions(-) delete mode 100644 HTML+CSS+JS/Background/Gradient_bg/style.css diff --git a/HTML+CSS+JS/Background/Gradient_bg/style.css b/HTML+CSS+JS/Background/Gradient_bg/style.css deleted file mode 100644 index d903482..0000000 --- a/HTML+CSS+JS/Background/Gradient_bg/style.css +++ /dev/null @@ -1,22 +0,0 @@ -html, body { - width: 100%; - height:100%; - } - - body { - background: linear-gradient(-45deg, #ffc3a0, #6dd5ed, #753a88, #734b6d); /*Can change colors as u wish*/ - background-size: 400% 400%; - animation: gradient 15s ease infinite; - } - - @keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } - } \ No newline at end of file