TEXFIELDS

TEXTFIELDS

Add your different textfields

From cd1efaa50281a4177432c8a71c75058098b801cc Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Mon, 5 Oct 2020 17:56:44 +0530 Subject: [PATCH 38/95] =?UTF-8?q?new:=20=F0=9F=86=95=20updated=20contribut?= =?UTF-8?q?ors=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- contributors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.md b/contributors.md index a10709c..caf8870 100644 --- a/contributors.md +++ b/contributors.md @@ -14,7 +14,7 @@ After cloning this repo open the project folder in a _text-editor_(vs code is pr ``` -The **css** folder contains all the files for adding your `css` and the **pages** folder contains the `html` files for adding html code. Try not +The **css** folder contains all the files for adding your `css` and the **pages** folder contains the `html` files for adding html code. ## Make necessary changes and commit those changes From c9a2a5ca3e780d4b73256586acd763d0e01b818b Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 18:53:20 +0530 Subject: [PATCH 39/95] Update contributors.md --- contributors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.md b/contributors.md index caf8870..8ed9534 100644 --- a/contributors.md +++ b/contributors.md @@ -21,7 +21,7 @@ The **css** folder contains all the files for adding your `css` and the **pages* Make changes based on what component you are adding. for example If you have a button component copy the below html code into button.html and add your component inside this html and write your css inside button.css file: ```html - +

From 4cfe9bf4353c423d7d83939fc1de10f757bbdb76 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 18:54:02 +0530 Subject: [PATCH 40/95] Update contributors.md --- contributors.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.md b/contributors.md index 8ed9534..22a963c 100644 --- a/contributors.md +++ b/contributors.md @@ -104,4 +104,5 @@ Soon I'll be merging all your changes into the master branch of this project. Yo ## Where to go from here? -Congrats!🥳 You just completed the standard fork -> clone -> edit -> pull request workflow that you'll encounter often as a contributor! +Congrats!!🥳 +You just completed the standard fork -> clone -> edit -> pull request workflow that you'll encounter often as a contributor! From 52cc3d4be1dd20e007ac4a7e356b54d5d3325f07 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:00:20 +0530 Subject: [PATCH 41/95] Update contributors.md --- contributors.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/contributors.md b/contributors.md index 22a963c..84242f0 100644 --- a/contributors.md +++ b/contributors.md @@ -26,7 +26,9 @@ Make changes based on what component you are adding. for example If you have a b

- + + +

Button

From 6167b05c8e4c8ff1fc3cc7b64f52eebb22641809 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:00:54 +0530 Subject: [PATCH 42/95] Update contributors.md --- contributors.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contributors.md b/contributors.md index 84242f0..3b572c0 100644 --- a/contributors.md +++ b/contributors.md @@ -33,7 +33,9 @@ Make changes based on what component you are adding. for example If you have a b Button

+ +

From 1a74b8d5537e270f190fa95d5cb339e980f279e4 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:01:10 +0530 Subject: [PATCH 43/95] Update contributors.md --- contributors.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contributors.md b/contributors.md index 3b572c0..f9a4c54 100644 --- a/contributors.md +++ b/contributors.md @@ -43,7 +43,9 @@ Make changes based on what component you are adding. for example If you have a b

+ +

Creator

From 81f22a120876f23f95805e857e1e970134dadea9 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:01:32 +0530 Subject: [PATCH 44/95] Update contributors.md --- contributors.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/contributors.md b/contributors.md index f9a4c54..a0d9bc3 100644 --- a/contributors.md +++ b/contributors.md @@ -54,8 +54,10 @@ Make changes based on what component you are adding. for example If you have a b

Name: - - your name + + + + your name

From 5caf99f2c43db516f98f27634a72ef8867e84522 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:08:21 +0530 Subject: [PATCH 45/95] Update contributors.md --- contributors.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contributors.md b/contributors.md index a0d9bc3..8522ab5 100644 --- a/contributors.md +++ b/contributors.md @@ -1,3 +1,5 @@ +:construction: + # css-components contribution guidelines😬 After cloning this repo open the project folder in a _text-editor_(vs code is preferable). If you don't have vs-code in your machine, [install it](https://code.visualstudio.com/download) From 8da8db067e48228e27fdbe12474d6156ffe1d1ff Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:11:19 +0530 Subject: [PATCH 46/95] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7437edb..c4c8719 100644 --- a/README.md +++ b/README.md @@ -107,4 +107,5 @@ Soon I'll be merging all your changes into the master branch of this project. Yo ## Where to go from here? -Congrats! You just completed the standard _fork -> clone -> edit -> pull request_ workflow that you'll encounter often as a contributor! +Congrats!!:tada: +You just completed the standard _fork -> clone -> edit -> pull request_ workflow that you'll encounter often as a contributor! From d9c695afb8b0e67997c3f48e914b16f3e11adc44 Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Mon, 5 Oct 2020 19:12:38 +0530 Subject: [PATCH 47/95] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c4c8719..ee4fafd 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ cd Desktop Change to the repository directory on your computer (if you are not already there): ``` -cd first-contributions +cd css-components ``` Now create a branch using the `git checkout` command: From 9ebb423d7da03656c3f4f0d2e221483ebf925545 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:19:30 +0530 Subject: [PATCH 48/95] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index ee4fafd..c1066d6 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,6 @@ If you go to your repository on GitHub, you'll see a `Compare & pull request` bu create a pull request

Now submit the pull request. - submit pull request

Soon I'll be merging all your changes into the master branch of this project. You will get a notification email once the changes have been merged. From ad44f86f78561edd0e315d5b3d8771428f5b55db Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Mon, 5 Oct 2020 19:20:47 +0530 Subject: [PATCH 49/95] Update contributors.md --- contributors.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/contributors.md b/contributors.md index 8522ab5..65d3217 100644 --- a/contributors.md +++ b/contributors.md @@ -112,6 +112,13 @@ If you go to your repository on GitHub, you'll see a `Compare & pull request` bu Now submit the pull request. Soon I'll be merging all your changes into the master branch of this project. You will get a notification email once the changes have been merged. + create a pull request

+ +Now submit the pull request. + + submit pull request

+ + ## Where to go from here? Congrats!!🥳 From 768688e8aba0552ddca527e1302509229c34fcea Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Mon, 5 Oct 2020 19:23:46 +0530 Subject: [PATCH 50/95] Update README.md --- README.md | 48 ------------------------------------------------ 1 file changed, 48 deletions(-) diff --git a/README.md b/README.md index c1066d6..845d0b3 100644 --- a/README.md +++ b/README.md @@ -60,51 +60,3 @@ git checkout -b add-alan-mathew ``` (The name of the branch does not need to have the word _add_ in it, but it's a reasonable thing to include because the purpose of this branch is to add your name to a list.) - -## Make necessary changes and commit those changes - -Now open `Contributors.md` file in a text editor, add your name to it. Don't add it at the beginning or end of the file. Put it anywhere in between. Now, save the file. - -

- -If you go to the project directory and execute the command `git status`, you'll see there are changes. - -Add those changes to the branch you just created using the `git add` command: - -``` -git add Contributors.md -``` - -Now commit those changes using the `git commit` command: - -``` -git commit -m "Add to Contributors list" -``` - -replacing `` with your name. - -## Push changes to GitHub - -Push your changes using the command `git push`: - -``` -git push origin -``` - -replacing `` with the name of the branch you created earlier. - -## Submit your changes for review - -If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button. - - create a pull request

- -Now submit the pull request. - submit pull request

- -Soon I'll be merging all your changes into the master branch of this project. You will get a notification email once the changes have been merged. - -## Where to go from here? - -Congrats!!:tada: -You just completed the standard _fork -> clone -> edit -> pull request_ workflow that you'll encounter often as a contributor! From 70dfd19b266fedbce762eb510340d07600919390 Mon Sep 17 00:00:00 2001 From: shan-shaji Date: Mon, 5 Oct 2020 20:33:17 +0530 Subject: [PATCH 51/95] animation: :dizzy: added animation to buttons --- js/index.js | 89 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 26 deletions(-) diff --git a/js/index.js b/js/index.js index 730d63a..1646ca6 100644 --- a/js/index.js +++ b/js/index.js @@ -4,31 +4,68 @@ card.forEach((card) => { card.classList.add("magictime", "swashIn"); }); -// color part -// Random color creation -var color = [ - "#56D1D8", - "#0078D7", - "#EF584A", - "#FF5864", - "#ab0e86", - "#e01171", - "#2aaf74", - "#4ed99c", - "#f7aa00", - "#303841", -]; - const mainPageCards = document.querySelectorAll(".main-page"); -mainPageCards.forEach((mainPageCard) => { - let selectedColor = color[Math.floor(Math.random() * color.length)]; - mainPageCard.style.backgroundColor = selectedColor; -}); - -// Random emoji creation -var emojisList = ["😃", "😁", "🤣", "🙃", "🥰", "😝", "🤔", "😐"]; const emojis = document.querySelectorAll(".emoji"); -emojis.forEach((emoji) => { - let selectedEmoji = emojisList[Math.floor(Math.random() * emojis.length)]; - emoji.textContent = selectedEmoji; -}); + +const changeColor = () => { + // color part + // Random color creation + var color = [ + "56D1D8", + "0078D7", + "EF584A", + "FF5864", + "ab0e86", + "e01171", + "2aaf74", + "4ed99c", + "f7aa00", + "303841", + "ffa5a5", + "7579e7", + "f08a5d", + "132743", + "1a1c20", + "43658b", + "16213e", + ]; + + // color is changing for every two seconds + mainPageCards.forEach((mainPageCard) => { + let selectedColor = "#" + color[Math.floor(Math.random() * color.length)]; + mainPageCard.style.backgroundColor = selectedColor; + }); +}; + +const changeEmoji = () => { + // Random emoji creation + var emojisList = [ + "😃", + "😁", + "🤣", + "🙃", + "🥳", + "😝", + "🤔", + "😐", + "😜", + "🤨", + "🙄", + "😷", + "😈", + "🥱", + "😏", + ]; + + emojis.forEach((emoji) => { + let selectedEmoji = emojisList[Math.floor(Math.random() * emojis.length)]; + emoji.textContent = selectedEmoji; + }); +}; + +changeEmoji(); +changeColor(); + +setInterval(() => { + changeColor(); +}, 2000); From 51dc591e1350efb4f9b095c7036de60420a8a344 Mon Sep 17 00:00:00 2001 From: tonalmathew Date: Mon, 5 Oct 2020 23:21:03 +0530 Subject: [PATCH 52/95] textfield: :boom: --- css/cardcolor.css | 4 ++++ css/textfield.css | 57 +++++++++++++++++++++++++++++++++++++++++++- pages/textfield.html | 45 ++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 1 deletion(-) diff --git a/css/cardcolor.css b/css/cardcolor.css index b7ae521..686e5ce 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -14,6 +14,10 @@ background-color: rgb(229, 9, 20); } +.tonal { + background-color: #43aa8b; +} + .demo { background-color: #35cce0; } diff --git a/css/textfield.css b/css/textfield.css index 6d57bc0..6a07d59 100644 --- a/css/textfield.css +++ b/css/textfield.css @@ -1 +1,56 @@ -/* Add your css for textfields */ \ No newline at end of file +/* Add your css for textfields */ + + + +/* Tonal Mathew : start */ + +.form-tonal { + margin: 100px; +} + +.input-field-tonal { + position: relative; + width: 250px; + height: 44px; + line-height: 44px; +} + +.label-tonal { + position: absolute; + top: 0; + left: 0; + width: 100%; + color: #43aa8b; + transition: 0.2s all; + cursor: text; +} + +.input-tonal { + width: 100%; + border: 0; + outline: 0; + padding: 0.5rem 0; + border-bottom: 2px solid #43aa8b; + box-shadow: none; + color: #111; +} + +.input-tonal:invalid { + outline: 0; +} + +.input-tonal:required { + color: #00dd22; +} + +.input-tonal:focus, +.input-tonal:valid { + border-color: #00dd22; +} + +.input-tonal:focus~label, +.input-tonal:valid~label { + font-size: 14px; + top: -24px; + color: #00dd22; +} /* Tonal Mathew : end */ \ No newline at end of file diff --git a/pages/textfield.html b/pages/textfield.html index 30b19a9..df9b4da 100644 --- a/pages/textfield.html +++ b/pages/textfield.html @@ -47,6 +47,51 @@

Add your different textfields

+ + + + +

+ Textfield +

+ +

+ Creator +

+ Name: + + Tonal Mathew + +

+ + +

+ +

+ Pills +

😀

+ +

+ Pagination +

😀

+ +

+ accordion +

😀

+ +

+ + +

From be2f89f5727a5395273b35dc77b730b6e8c30b25 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Mon, 5 Oct 2020 23:54:07 +0530 Subject: [PATCH 54/95] added pills --- css/pills.css | 1 + pages/pills.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 css/pills.css create mode 100644 pages/pills.html diff --git a/css/pills.css b/css/pills.css new file mode 100644 index 0000000..b32d49e --- /dev/null +++ b/css/pills.css @@ -0,0 +1 @@ +/* Add your css for pills */ \ No newline at end of file diff --git a/pages/pills.html b/pages/pills.html new file mode 100644 index 0000000..3438393 --- /dev/null +++ b/pages/pills.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + From 6997cc8ddb5165b5302f5fbdb23b127cd542b87c Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Mon, 5 Oct 2020 23:56:04 +0530 Subject: [PATCH 55/95] added link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a285317..430096c 100644 --- a/index.html +++ b/index.html @@ -132,7 +132,7 @@

😀

- +

Pills From 9ccb014c97d1d97d262ea16aec9f2b6f9b6f4d2c Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Tue, 6 Oct 2020 00:04:23 +0530 Subject: [PATCH 56/95] added pagination --- css/pagination.css | 0 pages/pagination.html | 57 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 css/pagination.css create mode 100644 pages/pagination.html diff --git a/css/pagination.css b/css/pagination.css new file mode 100644 index 0000000..e69de29 diff --git a/pages/pagination.html b/pages/pagination.html new file mode 100644 index 0000000..36eaf97 --- /dev/null +++ b/pages/pagination.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + From c7b7c7b7977997c2b36579513388ec026c4a918f Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Tue, 6 Oct 2020 00:17:56 +0530 Subject: [PATCH 57/95] added files --- css/accordion.css | 0 index.html | 4 +-- pages/accordion.html | 57 +++++++++++++++++++++++++++++++++++++++++++ pages/pagination.html | 2 +- 4 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 css/accordion.css create mode 100644 pages/accordion.html diff --git a/css/accordion.css b/css/accordion.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 430096c..fb3a42b 100644 --- a/index.html +++ b/index.html @@ -147,7 +147,7 @@

😀

- +

Pagination @@ -162,7 +162,7 @@

😀

- +

accordion diff --git a/pages/accordion.html b/pages/accordion.html new file mode 100644 index 0000000..3bb6fc5 --- /dev/null +++ b/pages/accordion.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + diff --git a/pages/pagination.html b/pages/pagination.html index 36eaf97..57b09a1 100644 --- a/pages/pagination.html +++ b/pages/pagination.html @@ -20,7 +20,7 @@ crossorigin="anonymous" /> - + From fdee8a53356e1accec48e5c16450368233134e06 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Tue, 6 Oct 2020 00:28:10 +0530 Subject: [PATCH 58/95] added forth row --- css/scrollspy.css | 0 css/tabs.css | 0 css/tags.css | 0 index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++ pages/scrollspy.html | 0 pages/tabs.html | 0 pages/tags.html | 0 7 files changed, 50 insertions(+) create mode 100644 css/scrollspy.css create mode 100644 css/tabs.css create mode 100644 css/tags.css create mode 100644 pages/scrollspy.html create mode 100644 pages/tabs.html create mode 100644 pages/tags.html diff --git a/css/scrollspy.css b/css/scrollspy.css new file mode 100644 index 0000000..e69de29 diff --git a/css/tabs.css b/css/tabs.css new file mode 100644 index 0000000..e69de29 diff --git a/css/tags.css b/css/tags.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index fb3a42b..128183a 100644 --- a/index.html +++ b/index.html @@ -175,6 +175,56 @@

😀

+ + +

+ +

+ Tabs +

😀

+ +

+ Tags +

😀

+ +

+ Scrollspy +

😀

+ +

+ + + +

diff --git a/pages/scrollspy.html b/pages/scrollspy.html new file mode 100644 index 0000000..e69de29 diff --git a/pages/tabs.html b/pages/tabs.html new file mode 100644 index 0000000..e69de29 diff --git a/pages/tags.html b/pages/tags.html new file mode 100644 index 0000000..e69de29 From db8c89db89b0ab3934477f611378461ece161874 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Tue, 6 Oct 2020 00:32:22 +0530 Subject: [PATCH 59/95] edited 4th row --- css/scrollspy.css | 1 + css/tabs.css | 1 + css/tags.css | 1 + index.html | 4 ---- pages/scrollspy.html | 57 ++++++++++++++++++++++++++++++++++++++++++++ pages/tabs.html | 57 ++++++++++++++++++++++++++++++++++++++++++++ pages/tags.html | 57 ++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 174 insertions(+), 4 deletions(-) diff --git a/css/scrollspy.css b/css/scrollspy.css index e69de29..88b3f86 100644 --- a/css/scrollspy.css +++ b/css/scrollspy.css @@ -0,0 +1 @@ +/* Add your css for textfields */ diff --git a/css/tabs.css b/css/tabs.css index e69de29..88b3f86 100644 --- a/css/tabs.css +++ b/css/tabs.css @@ -0,0 +1 @@ +/* Add your css for textfields */ diff --git a/css/tags.css b/css/tags.css index e69de29..88b3f86 100644 --- a/css/tags.css +++ b/css/tags.css @@ -0,0 +1 @@ +/* Add your css for textfields */ diff --git a/index.html b/index.html index 128183a..798d394 100644 --- a/index.html +++ b/index.html @@ -223,10 +223,6 @@

😀

- - - -

diff --git a/pages/scrollspy.html b/pages/scrollspy.html index e69de29..05ee1bf 100644 --- a/pages/scrollspy.html +++ b/pages/scrollspy.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + diff --git a/pages/tabs.html b/pages/tabs.html index e69de29..75d048c 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + diff --git a/pages/tags.html b/pages/tags.html index e69de29..d382f12 100644 --- a/pages/tags.html +++ b/pages/tags.html @@ -0,0 +1,57 @@ + + + + + + Css Components + + + + + + + + + + + +

+ + +

+ + + + From 77df93bb200d307843487537f9bfe931a24684e9 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Tue, 6 Oct 2020 00:39:40 +0530 Subject: [PATCH 60/95] small changes --- index.html | 6 +++--- pages/tabs.html | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 798d394..fef2290 100644 --- a/index.html +++ b/index.html @@ -179,7 +179,7 @@

😀

- +

Tabs @@ -194,7 +194,7 @@

😀

- +

Tags @@ -209,7 +209,7 @@

😀

- +

Scrollspy diff --git a/pages/tabs.html b/pages/tabs.html index 75d048c..374db2d 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -46,6 +46,7 @@

Add your different tabs

From e3805d295ec629c14ea3de40d4d315b96d5117a2 Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Thu, 8 Oct 2020 00:47:14 +0530 Subject: [PATCH 61/95] Update README.md --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 845d0b3..93c8587 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ cd css-components Now create a branch using the `git checkout` command: ``` -git checkout -b your-new-branch-name +git checkout -b ``` For example: @@ -60,3 +60,9 @@ git checkout -b add-alan-mathew ``` (The name of the branch does not need to have the word _add_ in it, but it's a reasonable thing to include because the purpose of this branch is to add your name to a list.) + + +### Yeah, you did it :partying_face::partying_face::partying_face: + +Now its time to make your _**contributions**_ :star_struck::star_struck: +For contributing view _**[contributors.md](https://github.com/rubenshibu/css-components/blob/master/contributors.md)**_ From 11706bfc63c673e90d47fc7cc7814e6d038aa76f Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Thu, 8 Oct 2020 00:48:09 +0530 Subject: [PATCH 62/95] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 93c8587..ee7b893 100644 --- a/README.md +++ b/README.md @@ -64,5 +64,6 @@ git checkout -b add-alan-mathew ### Yeah, you did it :partying_face::partying_face::partying_face: -Now its time to make your _**contributions**_ :star_struck::star_struck: +Now its time to make your _**contributions**_ :star_struck::star_struck:. + For contributing view _**[contributors.md](https://github.com/rubenshibu/css-components/blob/master/contributors.md)**_ From f6abcdc8ffa166c08cc57a890b6a363bfd60a11f Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Thu, 8 Oct 2020 00:49:02 +0530 Subject: [PATCH 63/95] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ee7b893..1149ea0 100644 --- a/README.md +++ b/README.md @@ -66,4 +66,4 @@ git checkout -b add-alan-mathew Now its time to make your _**contributions**_ :star_struck::star_struck:. -For contributing view _**[contributors.md](https://github.com/rubenshibu/css-components/blob/master/contributors.md)**_ +For contributing view **[contributors.md](https://github.com/rubenshibu/css-components/blob/master/contributors.md)** From 620ea60417211b1b470263c506df440c335d8914 Mon Sep 17 00:00:00 2001 From: Tonal Mathew Date: Thu, 8 Oct 2020 00:50:17 +0530 Subject: [PATCH 64/95] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1149ea0..d810c41 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ git checkout -b add-alan-mathew (The name of the branch does not need to have the word _add_ in it, but it's a reasonable thing to include because the purpose of this branch is to add your name to a list.) -### Yeah, you did it :partying_face::partying_face::partying_face: +## Yeah, you did it :partying_face::partying_face::partying_face: Now its time to make your _**contributions**_ :star_struck::star_struck:. From 1d6adefa1dbbf80d7093f435219028a3a9fe54cf Mon Sep 17 00:00:00 2001 From: roncyrthomas Date: Thu, 8 Oct 2020 11:31:22 +0530 Subject: [PATCH 65/95] Roncy R Thomas- Button --- css/buttons.css | 37 ++++++++++++++++++++++++++++++++- css/cardcolor.css | 1 + css/style.css | 2 +- pages/buttons.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 89 insertions(+), 2 deletions(-) diff --git a/css/buttons.css b/css/buttons.css index 24f62ca..768b6b9 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -4,7 +4,7 @@ .button { border-radius: 4px; - background-color: #ff7281; + border: none; color: #ffffff; text-align: center; @@ -40,3 +40,38 @@ opacity: 1; right: 0; } +.btn { + width: 180px; + height: 60px; + cursor: pointer; + background: transparent; + border: 1px solid #91C9FF; + outline: none; + transition: 1s ease-in-out; +} + +svg { + position: absolute; + left: 0; + top: 0; + fill: none; + stroke: #fff; + stroke-dasharray: 150 480; + stroke-dashoffset: 150; + transition: 1s ease-in-out; +} + +.btn:hover { + transition: 1s ease-in-out; + background: #4F95DA; +} + +.btn:hover svg { + stroke-dashoffset: -480; +} + +.btn span { + color: black; + font-size: 18px; + font-weight: 300; +} diff --git a/css/cardcolor.css b/css/cardcolor.css index 686e5ce..4ab8309 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -21,3 +21,4 @@ .demo { background-color: #35cce0; } + diff --git a/css/style.css b/css/style.css index 02b8fda..3e87af5 100644 --- a/css/style.css +++ b/css/style.css @@ -78,7 +78,7 @@ footer { position: relative; background-color: #ff5a79; color: #fff; - box-shadow: 0 4px #f3002e; + /* box-shadow: 0 4px #f3002e; */ text-decoration: none; } diff --git a/pages/buttons.html b/pages/buttons.html index 2fdfbaa..7f5354e 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -69,6 +69,57 @@

+ Name: + + + Roncy R Thomas + +

From 9fccca270104f87b966cdaeea691c34cfc12391e Mon Sep 17 00:00:00 2001 From: shan-shaji Date: Thu, 8 Oct 2020 12:00:37 +0530 Subject: [PATCH 66/95] fix: :pencil2: fix typos in button page --- css/buttons.css | 99 ++++++++++++++++++++++++++++++++++------------ css/cardcolor.css | 3 ++ pages/buttons.html | 30 ++++---------- 3 files changed, 83 insertions(+), 49 deletions(-) diff --git a/css/buttons.css b/css/buttons.css index 768b6b9..d8eb323 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -4,7 +4,7 @@ .button { border-radius: 4px; - + border: none; color: #ffffff; text-align: center; @@ -40,38 +40,85 @@ opacity: 1; right: 0; } -.btn { - width: 180px; - height: 60px; + +/* Roncy r thomas */ + +#roncy-btn { + width: 150px; + height: 50px; + border-radius: 180px; + position: relative; + background: linear-gradient( + 60deg, + #f79533, + #f37055, + #ef4e7b, + #a166ab, + #5073b8, + #1098ad, + #07b39b, + #6fba82 + ); cursor: pointer; - background: transparent; - border: 1px solid #91C9FF; - outline: none; - transition: 1s ease-in-out; + line-height: 12px; } -svg { +#roncy-btn:before { + content: ""; + z-index: 1; position: absolute; - left: 0; - top: 0; - fill: none; - stroke: #fff; - stroke-dasharray: 150 480; - stroke-dashoffset: 150; - transition: 1s ease-in-out; -} - -.btn:hover { - transition: 1s ease-in-out; - background: #4F95DA; + display: block; + width: 80%; + height: 70%; + top: 15%; + left: 10%; + transition: 0.3s opacity ease-in-out; + filter: blur(15px); + opacity: 0; + background: linear-gradient( + 60deg, + #f79533, + #f37055, + #ef4e7b, + #a166ab, + #5073b8, + #1098ad, + #07b39b, + #6fba82 + ); } -.btn:hover svg { - stroke-dashoffset: -480; +#roncy-btn:hover:before { + opacity: 1; + transition: 0.3s opacity ease-in-out; + filter: blur(25px); + background: linear-gradient( + 60deg, + #f79533, + #f37055, + #ef4e7b, + #a166ab, + #5073b8, + #1098ad, + #07b39b, + #6fba82 + ); } -.btn span { - color: black; +#roncy-btn:after { + content: "CLICK ME!"; + text-align: center; + line-height: 40px; font-size: 18px; - font-weight: 300; + color: rgba(235, 235, 235, 1); + font-weight: bold; + z-index: 5; + position: absolute; + display: block; + border-radius: 180px; + width: 92%; + height: 80%; + top: 10%; + left: 4%; + background-color: rgb(19, 20, 22); } diff --git a/css/cardcolor.css b/css/cardcolor.css index 4ab8309..3e0f393 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -22,3 +22,6 @@ background-color: #35cce0; } +.roncy { + background-color: #a287f4; +} diff --git a/pages/buttons.html b/pages/buttons.html index 7f5354e..bd5be0b 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -69,28 +69,17 @@

- - - -

Button

- - - - +

@@ -98,20 +87,15 @@

- - - -
+ +
Creator

- Name: - - - Roncy R Thomas + Name: + Roncy R Thomas

From 4ad66ae5ae25d41076325fcf8f51992d925d02da Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 8 Oct 2020 23:56:48 +0530 Subject: [PATCH 67/95] added navbar --- pages/navbar.html | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/pages/navbar.html b/pages/navbar.html index 3cf4f53..e62d1f0 100644 --- a/pages/navbar.html +++ b/pages/navbar.html @@ -47,6 +47,47 @@
Add your different navbar

+ +
+
+
+
+
+ Textfield +
+
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
+

From b2f2aad3d7ac48aebeb1bd24e6d15c8ad6302c03 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Fri, 9 Oct 2020 00:03:19 +0530 Subject: [PATCH 68/95] added dropdown --- css/dropdown.css | 88 ++++++++++++++++++++++++++++++++++++++++++++- pages/dropdown.html | 47 ++++++++++++++++++++++++ 2 files changed, 134 insertions(+), 1 deletion(-) diff --git a/css/dropdown.css b/css/dropdown.css index 42a33e4..b783da8 100644 --- a/css/dropdown.css +++ b/css/dropdown.css @@ -1 +1,87 @@ -/* Add your css for dropdowns / \ No newline at end of file +/ Add your css for dropdowns / + + +{ + padding: 0; + margin: 0; + font-family: 'Lato', sans-serif; + box-sizing: border-box; + } + .float-right{ + float: right; + } + .fa{ + font-size: .8em; + line-height: 22px !important; + } + dropdown{ + display: inline-block; + margin: 20px 50px; + } + dropdown label, dropdown ul li{ + display: block; + width: 200px; + background: #ECF0F1; + padding: 15px 20px; + } + dropdown label:hover, dropdown ul li:hover{ + background: #1ABC9C; + color: white; + cursor: pointer; + } + dropdown label{ + color: #1ABC9C; + border-left: 4px solid #1ABC9C; + border-radius: 0 5px 0 0; + position: relative; + z-index: 2; + } + dropdown input{ + display: none; + } + dropdown input ~ ul{ + position: relative; + visibility: hidden; + opacity: 0; + top: -20px; + z-index: 1; + } + dropdown input:checked + label{ + background: #1ABC9C; + color: white; + } + + dropdown input:checked ~ ul{ + visibility: visible; + opacity: 1; + top: 0; + } + $colors: #E74C3C, #0072B5, #2C3E50; + + @for $i from 1 through length($colors) { + dropdown ul li:nth-child(#{$i}) { + border-left: 4px solid nth($colors, $i); + .fa{ + color: nth($colors, $i); + } + &:hover { + background: nth($colors, $i); + color: white; + .fa{ + color: white; + } + } + } + } + + .animate{ + -webkit-transition: all .3s; + -moz-transition: all .3s; + -ms-transition: all .3s; + -ms-transition: all .3s; + transition: all .3s; + backface-visibility:hidden; + -webkit-backface-visibility:hidden; /* Chrome and Safari / + -moz-backface-visibility:hidden; / Firefox / + -ms-backface-visibility:hidden; / Internet Explorer / + } \ No newline at end of file diff --git a/pages/dropdown.html b/pages/dropdown.html index 8dcde68..9c5ff7f 100644 --- a/pages/dropdown.html +++ b/pages/dropdown.html @@ -47,6 +47,53 @@
Add your different dropdowns

+
+
+
+
+
+ Textfield +
+
+ + + + + + Editor +
+
Source
+
Fullpage
+
Debug
+
+ + +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
+ +

From 59c3f9829f0313f634099c29a6ffbcc5d781998c Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Fri, 9 Oct 2020 00:05:57 +0530 Subject: [PATCH 69/95] added dropdown name --- pages/dropdown.html | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/dropdown.html b/pages/dropdown.html index 9c5ff7f..85775f6 100644 --- a/pages/dropdown.html +++ b/pages/dropdown.html @@ -46,6 +46,7 @@
Add your different dropdowns

+ Ruben Abraham Shibu

From 6030f832d08f3c69e37e6e815ebf0fcca1ec6500 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Fri, 9 Oct 2020 00:07:29 +0530 Subject: [PATCH 70/95] added dropdown name --- pages/dropdown.html | 2 +- pages/navbar.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/pages/dropdown.html b/pages/dropdown.html index 85775f6..059c966 100644 --- a/pages/dropdown.html +++ b/pages/dropdown.html @@ -46,7 +46,7 @@
Add your different dropdowns

- Ruben Abraham Shibu +

diff --git a/pages/navbar.html b/pages/navbar.html index e62d1f0..ef7aac5 100644 --- a/pages/navbar.html +++ b/pages/navbar.html @@ -46,6 +46,7 @@
Add your different navbar

+
From 24538db7f483d1dff1f3646a05f9a617516a522b Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Fri, 9 Oct 2020 00:28:51 +0530 Subject: [PATCH 71/95] added pills --- pages/pills.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/pages/pills.html b/pages/pills.html index 3438393..11c85d1 100644 --- a/pages/pills.html +++ b/pages/pills.html @@ -47,6 +47,74 @@
Add your different Pills

+ + + +
+
+
+
+
+ Textfield +
+
+ + + +
+
+ Home +
+
+ Profile +
+
+ Contact +
+
+
+
Consequat in veniam ad. Eiusmod consequat eu adipisicing + minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt + nostrud.
+
At adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
+
Est + quis nulla laborum officia ad nisi ex nostrud culpa Lorem uis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur + mollit voluptate voluptate consequat non.
+
+ + + + +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
+ + +

From 871cac87b32294d5192a055e63d20d557b40c1e7 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Fri, 9 Oct 2020 00:41:30 +0530 Subject: [PATCH 72/95] added pills --- pages/pills.html | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/pills.html b/pages/pills.html index 11c85d1..44cb4e1 100644 --- a/pages/pills.html +++ b/pages/pills.html @@ -46,6 +46,7 @@
Add your different Pills

+ From fe156b90074112395355433202838b9aa59e228f Mon Sep 17 00:00:00 2001 From: shan-shaji Date: Fri, 9 Oct 2020 08:19:59 +0530 Subject: [PATCH 73/95] fix: :bug: fixed tags page issue --- css/addyourcss.css | 42 ------------------------------------------ pages/forms.html | 3 ++- pages/tags.html | 2 +- 3 files changed, 3 insertions(+), 44 deletions(-) delete mode 100644 css/addyourcss.css diff --git a/css/addyourcss.css b/css/addyourcss.css deleted file mode 100644 index ed2276b..0000000 --- a/css/addyourcss.css +++ /dev/null @@ -1,42 +0,0 @@ -/ Add your component css to this file / - -/ button 1 / - -.button { - border-radius: 4px; - background-color: #ff7281; - border: none; - color: #ffffff; - text-align: center; - font-size: 28px; - padding: 20px; - width: 200px; - transition: all 0.5s; - cursor: pointer; - margin: 5px; -} - -.button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; -} - -.button span:after { - content: "\00bb"; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; -} - -.button:hover span { - padding-right: 25px; -} - -.button:hover span:after { - opacity: 1; - right: 0; -} diff --git a/pages/forms.html b/pages/forms.html index aedb336..664c796 100644 --- a/pages/forms.html +++ b/pages/forms.html @@ -11,9 +11,10 @@ rel="stylesheet" /> + + - diff --git a/pages/tags.html b/pages/tags.html index d382f12..2f276fa 100644 --- a/pages/tags.html +++ b/pages/tags.html @@ -20,7 +20,7 @@ crossorigin="anonymous" /> - + From 373474110b9f8970f21827498b6a9a935739da8f Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Sat, 10 Oct 2020 01:25:17 +0530 Subject: [PATCH 74/95] added tabs --- pages/tabs.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/pages/tabs.html b/pages/tabs.html index 374db2d..83cccef 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -46,7 +46,67 @@
Add your different tabs

+ + +
+
+
+
+
+ Textfield +
+
+ +
+
+ Active +
+
+ Dropdown +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ Link +
+
+ Disabled +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
+ +

From 605a8c661ac8ba32cd8097269fa8aa42ec54e949 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:04:21 +0530 Subject: [PATCH 75/95] navbar --- pages/navbar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/navbar.html b/pages/navbar.html index ef7aac5..a6e83d0 100644 --- a/pages/navbar.html +++ b/pages/navbar.html @@ -54,7 +54,7 @@
Add your different navbar

- Textfield + Navbar

From fbaed3eb37c488c9de0f490cb551bb716ec574e5 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:05:43 +0530 Subject: [PATCH 76/95] pills --- pages/pills.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/pills.html b/pages/pills.html index 44cb4e1..6ba02ab 100644 --- a/pages/pills.html +++ b/pages/pills.html @@ -56,7 +56,7 @@
Add your different Pills

- Textfield + Pills

From c937d0cbfa747810d155dbe5ca2f131d298249c9 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:07:21 +0530 Subject: [PATCH 77/95] Tabs --- pages/tabs.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tabs.html b/pages/tabs.html index 83cccef..d0f5eb9 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -64,7 +64,7 @@
Add your different tabs

Dropdown + aria-expanded="false">Tabs
Action Another action From 883eeaa05d1f8c30ce9ebea97367a170af0c05b4 Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:09:02 +0530 Subject: [PATCH 78/95] dropdown --- pages/dropdown.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/dropdown.html b/pages/dropdown.html index 059c966..335c58b 100644 --- a/pages/dropdown.html +++ b/pages/dropdown.html @@ -53,7 +53,7 @@
Add your different dropdowns

- Textfield + Dropdown

From 2d0887cee6d9de7bf020847061d3f2b3a4a5a69f Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:23:12 +0530 Subject: [PATCH 79/95] pagination --- pages/pagination.html | 51 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/pages/pagination.html b/pages/pagination.html index 57b09a1..454863c 100644 --- a/pages/pagination.html +++ b/pages/pagination.html @@ -47,6 +47,57 @@
Add your different paginations

+ +
+
+
+
+
+ Pagination +
+
+ +
+
+
Previous
+
1
+
2
+
3
+
Next
+
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
+ + + + + + +

From 80d56526e1c1064489e048b2861ee73a22d0b61d Mon Sep 17 00:00:00 2001 From: rubenshibu Date: Thu, 15 Oct 2020 15:24:13 +0530 Subject: [PATCH 80/95] pagination-2 --- pages/pagination.html | 54 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/pages/pagination.html b/pages/pagination.html index 454863c..ec92574 100644 --- a/pages/pagination.html +++ b/pages/pagination.html @@ -93,7 +93,59 @@

- +
+
+
+
+
+ Pagination +
+
+ +
+
+
+ + + Previous + +
+
1
+
2
+
3
+
+ + + Next + +
+
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + Ruben Shibu + +
+
+
+
+
+
+
From 7c969b98eef0fcc6880ec7623b4de071ae7669cc Mon Sep 17 00:00:00 2001 From: Anagha Jayaraj Date: Sat, 17 Oct 2020 17:41:36 +0530 Subject: [PATCH 81/95] Changed a sentence --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fef2290..758886a 100644 --- a/index.html +++ b/index.html @@ -227,7 +227,7 @@
😀

-
made with 💛 by,
CS CHAPTER AJCESB
+
made with 💛 by,
CS CHAPTER AJCESB

From 76bdbd518e40a473d5a80efdf24fc1053dadff24 Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 12:27:38 +0530 Subject: [PATCH 82/95] add name card to html --- pages/buttons.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/pages/buttons.html b/pages/buttons.html index bd5be0b..9ab0bd2 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -171,6 +171,39 @@

+ +
+
+
+
+
+ Button +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + James Kaviyil Jose + +
+
+
+
+
+
+

From 7003d435d863e02fd87b0923006a2d950d4c117d Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 12:33:12 +0530 Subject: [PATCH 83/95] add css to component --- css/buttons.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css/buttons.css b/css/buttons.css index d8eb323..693c8a3 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -122,3 +122,8 @@ left: 4%; background-color: rgb(19, 20, 22); } + +/ James K Jose / +.jkj { + background-color: #f79533; +} \ No newline at end of file From 998eb24333d0ea178a9eabf51a8faa3a33ac2e9b Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 13:06:02 +0530 Subject: [PATCH 84/95] add pagination in html --- pages/pagination.html | 45 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/pages/pagination.html b/pages/pagination.html index ec92574..ed44f8a 100644 --- a/pages/pagination.html +++ b/pages/pagination.html @@ -147,6 +147,51 @@

+
+
+
+
+
+ Pagination +
+
+ +
+ « + 1 + 2 + 3 + 4 + 5 + 6 + » +
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + James Kaviyil Jose + +
+
+
+
+
+
+
+ From c1d464b21d5e833c67d65486964aa0915fd06745 Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 13:07:48 +0530 Subject: [PATCH 85/95] add css to pagination --- css/pagination.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/css/pagination.css b/css/pagination.css index e69de29..e96c60b 100644 --- a/css/pagination.css +++ b/css/pagination.css @@ -0,0 +1,22 @@ +/ James K Jose / +.pagination-jkj { + display: inline-block; + } + + .pagination-jkj a { + color: black; + float: left; + padding: 8px 16px; + text-decoration: none; + } + + .pagination-jkj a.active { + background-color: #4CAF50; + color: white; + border-radius: 5px; + } + + .pagination-jkj a:hover:not(.active) { + background-color: #ddd; + border-radius: 5px; + } \ No newline at end of file From f0bba38da7e5af4c107eda134876a4d388edb6eb Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 13:17:41 +0530 Subject: [PATCH 86/95] add accordion component --- pages/accordion.html | 50 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/pages/accordion.html b/pages/accordion.html index 3bb6fc5..5bbed7b 100644 --- a/pages/accordion.html +++ b/pages/accordion.html @@ -47,6 +47,56 @@
Add your different Accordion

+ + +
+
+
+
+
+ Accordion +
+
+ + +
+
Lorem ipsum...
+
+ + +
+
Lorem ipsum...
+
+ + +
+
Lorem ipsum...
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + James Kaviyil Jose + +
+
+
+
+
+
+

From 218d616d642d543a0482c188c07f1e58e74626ae Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 13:21:15 +0530 Subject: [PATCH 87/95] add css to accordion --- css/accordion.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/css/accordion.css b/css/accordion.css index e69de29..b535f5d 100644 --- a/css/accordion.css +++ b/css/accordion.css @@ -0,0 +1,21 @@ +/ James K Jose */ +.accordion-jkj { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + text-align: left; + border: none; + outline: none; + transition: 0.4s; + } +.active, .accordion-jkj:hover { + background-color: #ccc; + } +.panel { + padding: 0 18px; + background-color: white; + display: none; + overflow: hidden; + } \ No newline at end of file From 6b622bd33d8eec7d818f06aa56809b0d0fa5c3b7 Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Sun, 18 Oct 2020 13:28:22 +0530 Subject: [PATCH 88/95] add js to accordion --- css/accordion.css | 3 ++- js/accordion.js | 14 ++++++++++++++ pages/accordion.html | 9 +++++---- 3 files changed, 21 insertions(+), 5 deletions(-) create mode 100644 js/accordion.js diff --git a/css/accordion.css b/css/accordion.css index b535f5d..67bf4de 100644 --- a/css/accordion.css +++ b/css/accordion.css @@ -16,6 +16,7 @@ .panel { padding: 0 18px; background-color: white; - display: none; + max-height: 0; overflow: hidden; + transition: max-height 0.2s ease-out; } \ No newline at end of file diff --git a/js/accordion.js b/js/accordion.js new file mode 100644 index 0000000..2723f51 --- /dev/null +++ b/js/accordion.js @@ -0,0 +1,14 @@ +var acc = document.getElementsByClassName("accordion-jkj"); +var i; + +for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active"); + var panel = this.nextElementSibling; + if (panel.style.maxHeight) { + panel.style.maxHeight = null; + } else { + panel.style.maxHeight = panel.scrollHeight + "px"; + } + }); +} \ No newline at end of file diff --git a/pages/accordion.html b/pages/accordion.html index 5bbed7b..0ddb3fe 100644 --- a/pages/accordion.html +++ b/pages/accordion.html @@ -22,7 +22,7 @@ - + @@ -60,17 +60,17 @@
Add your different Accordion

-
Lorem ipsum...
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores voluptates doloribus asperiores repellat quaerat illum ad enim minima eaque est!

-
Lorem ipsum...
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate fugit voluptatibus accusamus non inventore laborum aliquam sint! Maxime, saepe repellendus!

-
Lorem ipsum...
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nulla laborum suscipit iusto obcaecati ipsam soluta, in sit iste temporibus?

@@ -103,5 +103,6 @@

made with 💛 by,
CS CHAPTER AJCESB

+ Button +

+ +

+ Creator +

+ Name: + Joyal Joseph + +

+ From 3e762b86dbaf2a190f66bb1f4071a056311e7ed9 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Fri, 2 Oct 2020 22:21:52 +0530 Subject: [PATCH 13/95] Update index.html --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d843fe0..fada558 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,9 @@

Add your css Components

+ + +

@@ -67,7 +70,6 @@

> Ruben Shibu -

@@ -76,6 +78,8 @@

+ +

From 082e82e8a36081c922db763fb0352026e2aa6ae5 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Fri, 2 Oct 2020 22:22:53 +0530 Subject: [PATCH 14/95] Update index.html --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index fada558..f0912b4 100644 --- a/index.html +++ b/index.html @@ -118,6 +118,8 @@

+ +

@@ -152,6 +154,9 @@

+ + +

From 51a321118f2723b727a24a44da5cc30c6d90eeb4 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Fri, 2 Oct 2020 22:23:34 +0530 Subject: [PATCH 15/95] Update index.html --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index f0912b4..521664a 100644 --- a/index.html +++ b/index.html @@ -155,8 +155,7 @@

- - +

From 202ea7da9870c71834a3e9ffd35b7a81716a58c2 Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Fri, 2 Oct 2020 22:24:47 +0530 Subject: [PATCH 16/95] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 521664a..eae6457 100644 --- a/index.html +++ b/index.html @@ -159,7 +159,7 @@

-
+
Creator

From 5ea778e331e032d9cd0d28c79da64807536faf8c Mon Sep 17 00:00:00 2001 From: ruben abraham shibu <42438480+rubenshibu@users.noreply.github.com> Date: Fri, 2 Oct 2020 22:25:39 +0530 Subject: [PATCH 17/95] Update cardcolor.css --- css/cardcolor.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/cardcolor.css b/css/cardcolor.css index 3d9e00e..89daa9e 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -12,6 +12,6 @@ background-color: #0fc9e7; } -.card5 { +.card6 { background-color: rgb(229, 9, 20); } From a773e133a0d91522d0fbc1b9a05430e690445012 Mon Sep 17 00:00:00 2001 From: shan-shaji Date: Fri, 2 Oct 2020 17:30:21 +0530 Subject: [PATCH 18/95] feat: added button page:sparkles: --- css/addyourcss.css | 1 + css/buttons.css | 42 +++++++++++++++++ css/cardcolor.css | 27 ++--------- index.html | 2 - pages/buttons.html | 114 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 162 insertions(+), 24 deletions(-) create mode 100644 css/buttons.css create mode 100644 pages/buttons.html diff --git a/css/addyourcss.css b/css/addyourcss.css index ed2276b..4ea5161 100644 --- a/css/addyourcss.css +++ b/css/addyourcss.css @@ -40,3 +40,4 @@ opacity: 1; right: 0; } + diff --git a/css/buttons.css b/css/buttons.css new file mode 100644 index 0000000..24f62ca --- /dev/null +++ b/css/buttons.css @@ -0,0 +1,42 @@ +/* Add your Button component css to this file / + +/ button 1 / + +.button { + border-radius: 4px; + background-color: #ff7281; + border: none; + color: #ffffff; + text-align: center; + font-size: 28px; + padding: 20px; + width: 200px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; +} + +.button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.button span:after { + content: "\00bb"; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover span { + padding-right: 25px; +} + +.button:hover span:after { + opacity: 1; + right: 0; +} diff --git a/css/cardcolor.css b/css/cardcolor.css index 00caeb7..30766b7 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -1,31 +1,14 @@ / change your card color / -.card1 { - background-color: #ff7281; -} - -.card2 { - background-color: #ff8f56; -} - -.card3 { - background-color: #0fc9e7; -} +/ if you want change card color please specify your name as selector */ -.card4 { - - background-color: #5F067B; +.philip { + background-color: #5f067b; } -.card5 { +.joyal { background-color: #4e739c; } -.card6 { - background-color: #b4e0c1; -} - - -.card6 { +.Kilari { background-color: rgb(229, 9, 20); } - diff --git a/index.html b/index.html index bd685dc..d9aea6f 100644 --- a/index.html +++ b/index.html @@ -250,8 +250,6 @@

- -

Date: Mon, 19 Oct 2020 19:18:40 +0530 Subject: [PATCH 89/95] minor fixes and add form --- pages/forms.html | 54 +++++++++++++++++++++++++++++++++++++++++++ pages/pagination.html | 4 ++-- 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/pages/forms.html b/pages/forms.html index 664c796..acebc8a 100644 --- a/pages/forms.html +++ b/pages/forms.html @@ -90,6 +90,60 @@

+ + + +
+
+
+
+
+ Pagination +
+
+ +
+
+ Username + + + Password + + + Forgot Password? + Register + + + +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + + James Kaviyil Jose + +
+
+
+
+
+
+
+ +
diff --git a/pages/pagination.html b/pages/pagination.html index ed44f8a..95ead23 100644 --- a/pages/pagination.html +++ b/pages/pagination.html @@ -151,7 +151,7 @@

-
+
Pagination

@@ -174,7 +174,7 @@

-
+
Creator

From 3e3cf74f7710f91ac96eef4964644aab1ffe4c2b Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Mon, 19 Oct 2020 19:27:45 +0530 Subject: [PATCH 90/95] add styling to form --- css/forms.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++++ pages/forms.html | 4 +-- 2 files changed, 92 insertions(+), 2 deletions(-) diff --git a/css/forms.css b/css/forms.css index 9a6c8c7..7691920 100644 --- a/css/forms.css +++ b/css/forms.css @@ -152,3 +152,93 @@ bottom: 100%; } } + +/James K Jose / +.form-jkj form { + margin:10% auto 0 auto; + padding:30px; + width:400px; + height:auto; + overflow:hidden; + background:white; + border-radius:10px; +} + +.form-jkj label { + font-size:14px; + color:darkgray; + cursor:pointer; +} + +.form-jkj label, +.form-jkj form input { + float:left; + clear:both; +} + +.form-jkj input { + margin:15px 0; + padding:15px 10px; + width:100%; + outline:none; + border:1px solid #bbb; + border-radius:20px; + display:inline-block; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + -webkit-transition:0.2s ease all; + -moz-transition:0.2s ease all; + -ms-transition:0.2s ease all; + -o-transition:0.2s ease all; + transition:0.2s ease all; +} + +.form-jkj input[type=text]:focus, +.form-jkj input[type="password"]:focus { + border-color:cornflowerblue; +} + +.form-jkj input[type=submit] { + padding:15px 50px; + width:auto; + background:#1abc9c; + border:none; + color:white; + cursor:pointer; + display:inline-block; + float:right; + clear:right; + -webkit-transition:0.2s ease all; + -moz-transition:0.2s ease all; + -ms-transition:0.2s ease all; + -o-transition:0.2s ease all; + transition:0.2s ease all; +} + +.form-jkj input[type=submit]:hover { + opacity:0.8; +} + +.form-jkj input[type="submit"]:active { + opacity:0.4; +} + +.forgot, +.register { + margin:10px; + float:left; + clear:left; + display:inline-block; + color:cornflowerblue; + text-decoration:none; +} + +.forgot:hover, +.register:hover { + color:darkgray; +} + +.jkj { + background-color: #f79533; +} \ No newline at end of file diff --git a/pages/forms.html b/pages/forms.html index acebc8a..c2a0480 100644 --- a/pages/forms.html +++ b/pages/forms.html @@ -98,12 +98,12 @@

- Pagination + Form

-
+ Username From 03ad3bd9e40f3532e1f4aa11c10046a2bbfed3be Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Mon, 19 Oct 2020 19:29:49 +0530 Subject: [PATCH 91/95] minor fixes --- css/accordion.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/accordion.css b/css/accordion.css index 67bf4de..289e4fd 100644 --- a/css/accordion.css +++ b/css/accordion.css @@ -19,4 +19,8 @@ max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; + } + + .jkj{ + background-color: #f79533; } \ No newline at end of file From fcfe5db104b1202827350a107745e03ed406fbc3 Mon Sep 17 00:00:00 2001 From: jamesjose03 Date: Mon, 19 Oct 2020 19:31:04 +0530 Subject: [PATCH 92/95] minor fix --- css/pagination.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/pagination.css b/css/pagination.css index e96c60b..a75a959 100644 --- a/css/pagination.css +++ b/css/pagination.css @@ -19,4 +19,8 @@ .pagination-jkj a:hover:not(.active) { background-color: #ddd; border-radius: 5px; + } + + .jkj { + background-color: #f79533; } \ No newline at end of file From 7e73b094433477b78e3e934e054d658d7a26fc04 Mon Sep 17 00:00:00 2001 From: Saksham Mahajan Date: Tue, 20 Oct 2020 22:08:29 +0530 Subject: [PATCH 93/95] Button Added --- css/buttons.css | 4 ++++ pages/buttons.html | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/css/buttons.css b/css/buttons.css index 693c8a3..505f4ae 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -126,4 +126,8 @@ /* James K Jose / .jkj { background-color: #f79533; +} +/ Saksham Mahajan / +.Saksham { + background-color: #f69696; } \ No newline at end of file diff --git a/pages/buttons.html b/pages/buttons.html index 9ab0bd2..4dff956 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -203,7 +203,42 @@

+ +
+ +
+
+
+
+
+ Button +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+
+ Name: + Saksham Mahajan + +
+
+
+
+
+

+

From e26e771feda66eb75e6b610e87cbfa6bb2fac22a Mon Sep 17 00:00:00 2001 From: irwanphan Date: Sun, 25 Oct 2020 17:00:07 +0700 Subject: [PATCH 94/95] try gaming style button --- css/buttons.css | 34 ++++++++++++++++++++++++++++++++++ css/cardcolor.css | 25 +++++++++++++++++++++++++ pages/buttons.html | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+) diff --git a/css/buttons.css b/css/buttons.css index 505f4ae..1ad3324 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -130,4 +130,38 @@ / Saksham Mahajan / .Saksham { background-color: #f69696; +} + +/ irwanphan */ +#irwanphan-btn { + width: 150px; + height: 54px; + cursor: pointer; + line-height: 12px; + position: relative; + border-radius: 16px; + transition: .3s ease all; + background-color: #000f0b; + border: 2px solid #000f0b; +} +#irwanphan-btn::before { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + display: block; + font-weight: 600; + line-height: 54px; + color: aliceblue; + text-align: center; + position: absolute; + transition: .3s ease all; + content: "it's a button :)"; +} +#irwanphan-btn:hover { + border: 2px solid #13d522; +} +#irwanphan-btn:hover::before { + color: #13d522; } \ No newline at end of file diff --git a/css/cardcolor.css b/css/cardcolor.css index 3e0f393..d0132ac 100644 --- a/css/cardcolor.css +++ b/css/cardcolor.css @@ -25,3 +25,28 @@ .roncy { background-color: #a287f4; } + +.irwanphan { + background: linear-gradient(270deg, #13d522, #000f0b); + background-size: 400% 400%; + -webkit-animation: sway 30s ease infinite; + -moz-animation: sway 30s ease infinite; + animation: sway 30s ease infinite; +} +@-webkit-keyframes sway { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} +} +@-moz-keyframes sway { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} +} +@keyframes sway { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} +} + + diff --git a/pages/buttons.html b/pages/buttons.html index 4dff956..bd0b682 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -239,6 +239,40 @@

+ +
+
+
+
+
+ Button +
+
+
+
+
+
+
+
+
+
+ +
+ Creator +
+
+
+
+ Name: + Irwan Phan + +
+
+
+
+
+
+

From 1371379e255e6d72f1dd601af222a1c7ea169e0f Mon Sep 17 00:00:00 2001 From: joffinfrancisthoppil <45281508+joffinfrancisthoppil@users.noreply.github.com> Date: Wed, 27 Oct 2021 22:06:01 +0530 Subject: [PATCH 95/95] Update Readme :zap: --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d810c41..b66cb2e 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Fork this repository by clicking on the fork button on the top right corner of this page. This will create a copy of this repository in your account. -## Clone the repository +## Clone The Repository

CSS COMPONENTS

Add your css Components

+ Name: + Ruben Shibu + Shan Shaji + Tonal Mathew + +

Add your css Components

- Name: - Ruben Shibu - Shan Shaji - Tonal Mathew - -

+ Name: + Ruben Shibu + Shan Shaji + Tonal Mathew + +

Name: - Ruben Shibu + Shan Shaji - Tonal Mathew +

Button - Hover + Hover @@ -118,11 +118,11 @@

+ Name: + Thejasree Kilari + +

+ Name: + Philipp Proksch + +

+ Name: + Joyal Joseph + +

Add your css Components

> Ruben Shibu -

+ Name: + Philipp Proksch + +

+ Name: + Joyal Joseph + +

BUTTONS

Add your diffrent Buttons

- Name: - Philipp Proksch - -

+ Name: + Philipp Proksch + +

+ Name: + Joyal Joseph + +

- Name: - Joyal Joseph - -

+ Name: + Thejasree Kilari + +

- Name: - Ruben Shibu - -

- Name: - - Shan Shaji - - -

😀

- Name: - Tonal Mathew - -

😀

- Name: - Philipp Proksch - -

😀

- Name: - Joyal Joseph - -

😀

😀

- Name: - Thejasree Kilari - -

😀

BUTTONS

Add your diffrent Buttons

BUTTONS

Add your different Buttons

- Name: - Philipp Proksch - -

+ Name: + Philipp Proksch + +

- Name: - Joyal Joseph - -

+ Name: + Joyal Joseph + +

- Name: - Thejasree Kilari - -

+ Name: + Thejasree Kilari + +

😀

CSS FORMS

Add your css Forms

Login

+ Name: + Ruben Shibu + +

Add your css Forms

+ Name: + + your name + +

😀

😀

😀

😀

BADGES

Add your different badges

DROPDOWNS

Add your different dropdowns

NAVBAR

Add your different navbar

TEXFIELDS

Add your different textfields

TEXFIELDS

TEXTFIELDS

Add your different textfields

Name: - - your name + + + + your name

Add your different textfields

+ Name: + + Tonal Mathew + +

😀

😀

😀

PILLS

Add your different Pills

😀

PAGINATION

Add your different paginations

😀

😀

ACCORDION

+ Name: + Ruben Shibu
+ Shan Shaji
+ Tonal Mathew + +

- Name: - Ruben Shibu
- Shan Shaji
- Tonal Mathew - -

+ Name: + Ruben Shibu
+ Shan Shaji
+ Tonal Mathew + +

Name: - Ruben Shibu
+ Shan Shaji
- Tonal Mathew +

Button
- +
@@ -118,11 +118,11 @@