From 9ab4afaacaa67086ae7bdd5f85239fa2e2ecbdf3 Mon Sep 17 00:00:00 2001 From: Nchhabra25 Date: Mon, 9 Oct 2023 21:44:50 +0530 Subject: [PATCH 1/7] Expandable Cards --- ExpandableCards/index.html | 29 ++++++++++++++++ ExpandableCards/script.js | 12 +++++++ ExpandableCards/style.css | 70 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+) create mode 100644 ExpandableCards/index.html create mode 100644 ExpandableCards/script.js create mode 100644 ExpandableCards/style.css diff --git a/ExpandableCards/index.html b/ExpandableCards/index.html new file mode 100644 index 000000000..81784d823 --- /dev/null +++ b/ExpandableCards/index.html @@ -0,0 +1,29 @@ + + + + + + + + Document + + +

Welcome

+

Click on one of these cards

+
+
+

stars

+
+
+

beaches

+
+
+

clouds

+
+
+

scenery

+
+
+ + + \ No newline at end of file diff --git a/ExpandableCards/script.js b/ExpandableCards/script.js new file mode 100644 index 000000000..6d280149f --- /dev/null +++ b/ExpandableCards/script.js @@ -0,0 +1,12 @@ +const cards=document.querySelectorAll(".cards"); + +cards.forEach(cards=>{ + cards.addEventListener('click',()=>{ + cards.classList.toggle('active'); + }) +}) +function remove(){ + cards.forEach(cards=>{ + cards.classList.remove('active'); +}) +} \ No newline at end of file diff --git a/ExpandableCards/style.css b/ExpandableCards/style.css new file mode 100644 index 000000000..82a552136 --- /dev/null +++ b/ExpandableCards/style.css @@ -0,0 +1,70 @@ +body{ + background: radial-gradient(at left, #81e8f2, #f8bbc5); +} +h1,h3{ + text-align: center; + font-family: 'Times New Roman', Times, serif; + color: #202020; + font-size: 2.2rem; +} +.cards{ + /*border:2px solid red;*/ + margin: 1.5em; + height: 50vh; + width: 5vw; + border-radius: 38px; + display: flex; + align-items: flex-end; + transition: 0.5s ease-out; +} +.cards:hover{ + cursor: pointer; + box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.13); +} +.main{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.cards h3{ + color:white; + font-weight: bold; + position:relative; + left: 10px; + opacity: 0; + transition: 0.5s ease-out; +} +.cards.active{ + width:20vw; + transition: 0.5s ease-out; +} +.cards.active h3{ + opacity: 1; + transition: 0.5s ease-out; +} +#pvt1{ + background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); +} +#pvt2{ + background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); +} +#pvt3{ + background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'); +} +#pvt4{ + background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); +} +@media(max-width:680px){ + .main{ + flex-direction: column; + } + .cards{ + width:80vw; + height: 10vh; + } + .cards.active{ + width:80vw; + height:40vh; + } +} \ No newline at end of file From a2883e658e05ebd87a7519c8a3f9fdfdd1d97e79 Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 21:51:03 +0530 Subject: [PATCH 2/7] Create Readme.md --- ExpandableCards/Readme.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 ExpandableCards/Readme.md diff --git a/ExpandableCards/Readme.md b/ExpandableCards/Readme.md new file mode 100644 index 000000000..f95df8d74 --- /dev/null +++ b/ExpandableCards/Readme.md @@ -0,0 +1,2 @@ +# Expandable Cards +![image](https://github.com/Nchhabra25/Gradient-Generator/assets/124149051/b55053a9-b686-43cc-8cae-19b3c43e0467) From 5bda6dd49941436d0ade22097410e56da34f025e Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 23:53:27 +0530 Subject: [PATCH 3/7] Create index.html --- ExpandableCards/Nchhabra25/index.html | 29 +++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 ExpandableCards/Nchhabra25/index.html diff --git a/ExpandableCards/Nchhabra25/index.html b/ExpandableCards/Nchhabra25/index.html new file mode 100644 index 000000000..52b698eba --- /dev/null +++ b/ExpandableCards/Nchhabra25/index.html @@ -0,0 +1,29 @@ + + + + + + + + Document + + +

Welcome

+

Click on one of these cards

+
+
+

stars

+
+
+

beaches

+
+
+

clouds

+
+
+

scenery

+
+
+ + + From 1f2418c2c4bbe8dbd3b1f3c834ab343f3db52a16 Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 23:54:38 +0530 Subject: [PATCH 4/7] Rename ExpandableCards/script.js to ExpandableCards/Nchhabra25/script.js --- ExpandableCards/{ => Nchhabra25}/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename ExpandableCards/{ => Nchhabra25}/script.js (99%) diff --git a/ExpandableCards/script.js b/ExpandableCards/Nchhabra25/script.js similarity index 99% rename from ExpandableCards/script.js rename to ExpandableCards/Nchhabra25/script.js index 6d280149f..594a05232 100644 --- a/ExpandableCards/script.js +++ b/ExpandableCards/Nchhabra25/script.js @@ -9,4 +9,4 @@ function remove(){ cards.forEach(cards=>{ cards.classList.remove('active'); }) -} \ No newline at end of file +} From a83c8539a89f4f5aa2a2ace11c78b34f0018663c Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 23:55:10 +0530 Subject: [PATCH 5/7] Rename ExpandableCards/style.css to ExpandableCards/Nchhabra25/style.css --- ExpandableCards/{ => Nchhabra25}/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename ExpandableCards/{ => Nchhabra25}/style.css (99%) diff --git a/ExpandableCards/style.css b/ExpandableCards/Nchhabra25/style.css similarity index 99% rename from ExpandableCards/style.css rename to ExpandableCards/Nchhabra25/style.css index 82a552136..fdfeb3d00 100644 --- a/ExpandableCards/style.css +++ b/ExpandableCards/Nchhabra25/style.css @@ -67,4 +67,4 @@ h1,h3{ width:80vw; height:40vh; } -} \ No newline at end of file +} From 82946e7d67acaa05f080c161c2902c8438ded5ae Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 23:58:05 +0530 Subject: [PATCH 6/7] Rename ExpandableCards/Readme.md to ExpandableCards/Nchhabra25/Readme.md --- ExpandableCards/{ => Nchhabra25}/Readme.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ExpandableCards/{ => Nchhabra25}/Readme.md (100%) diff --git a/ExpandableCards/Readme.md b/ExpandableCards/Nchhabra25/Readme.md similarity index 100% rename from ExpandableCards/Readme.md rename to ExpandableCards/Nchhabra25/Readme.md From 15606c24c5f8a410d5d046981ac6e437999edd66 Mon Sep 17 00:00:00 2001 From: Nchhabra25 <124149051+Nchhabra25@users.noreply.github.com> Date: Mon, 9 Oct 2023 23:58:58 +0530 Subject: [PATCH 7/7] Delete ExpandableCards/index.html --- ExpandableCards/index.html | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 ExpandableCards/index.html diff --git a/ExpandableCards/index.html b/ExpandableCards/index.html deleted file mode 100644 index 81784d823..000000000 --- a/ExpandableCards/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - Document - - -

Welcome

-

Click on one of these cards

-
-
-

stars

-
-
-

beaches

-
-
-

clouds

-
-
-

scenery

-
-
- - - \ No newline at end of file