+
+#### _If you don't have git on your machine,_ [install it](https://help.github.com/articles/set-up-git/)
+
+## Fork this repository
+
+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
+
+
+
+Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the _copy to clipboard_ icon.
+
+Open a terminal and run the following git command:
+
+```
+git clone "url you just copied"
+```
+
+where "url you just copied" (without the quotation marks) is the url to this repository (your fork of this project). See the previous steps to obtain the url.
+
+
+
+For example:
+
+```
+https://github.com/this-is-you/css-components.git
+```
+
+where `this-is-you` is your GitHub username. Here you're copying the contents of the [css-components](https://github.com/rubenshibu/css-components) repository on GitHub to your computer.
+
+Before cloning the repository you just make sure that you have changed the directory to _Desktop_ or to some other locations, To change the directory to Desktop run the following command:
+
+```
+cd Desktop
+```
+
+## Create a branch
+
+Change to the repository directory on your computer (if you are not already there):
+
+```
+cd css-components
+```
+
+Now create a branch using the `git checkout` command:
+
+```
+git checkout -b
+ Button
+
+
+
+
+```
+
+# Changing card color
+
+You can change your card color by adding your name as a `selector`(in the above example `philip` is the selector). After adding your name as selector you can change its color by editing the file cardcolor.css like this:
+
+```css
+/* You can add your name */
+.your-name {
+ background-color: #5f067b;
+}
+```
+
+## commit these changes
+
+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 .
+```
+
+Now commit those changes using the `git commit` command:
+
+```
+git commit -m "Added new
+
+
+
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Creator
+
+
+
+
+
+ + Name: + + + + your name + +
+
+
+Now submit the pull request.
+
+
+
+
+## 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!
diff --git a/css/accordion.css b/css/accordion.css
new file mode 100644
index 0000000..289e4fd
--- /dev/null
+++ b/css/accordion.css
@@ -0,0 +1,26 @@
+/* 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;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ }
+
+ .jkj{
+ background-color: #f79533;
+ }
\ No newline at end of file
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/css/badges.css b/css/badges.css
new file mode 100644
index 0000000..914bb59
--- /dev/null
+++ b/css/badges.css
@@ -0,0 +1 @@
+/* Add your css for badges */
\ No newline at end of file
diff --git a/css/buttons.css b/css/buttons.css
new file mode 100644
index 0000000..1ad3324
--- /dev/null
+++ b/css/buttons.css
@@ -0,0 +1,167 @@
+/* Add your Button component css to this file */
+
+/* button 1 */
+
+.button {
+ border-radius: 4px;
+
+ 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;
+}
+
+/* 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;
+ line-height: 12px;
+}
+
+#roncy-btn:before {
+ content: "";
+ z-index: 1;
+ position: absolute;
+ 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
+ );
+}
+
+#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
+ );
+}
+
+#roncy-btn:after {
+ content: "CLICK ME!";
+ text-align: center;
+ line-height: 40px;
+ font-size: 18px;
+ 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);
+}
+
+/* James K Jose */
+.jkj {
+ background-color: #f79533;
+}
+/* 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 8942236..d0132ac 100644
--- a/css/cardcolor.css
+++ b/css/cardcolor.css
@@ -1,5 +1,52 @@
/* change your card color */
-.card1 {
- background-color: #ff7281;
+/* if you want change card color please specify your name as selector */
+
+.philip {
+ background-color: #5f067b;
+}
+
+.joyal {
+ background-color: #4e739c;
+}
+
+.Kilari {
+ background-color: rgb(229, 9, 20);
+}
+
+.tonal {
+ background-color: #43aa8b;
+}
+
+.demo {
+ background-color: #35cce0;
}
+
+.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/css/dropdown.css b/css/dropdown.css
new file mode 100644
index 0000000..b783da8
--- /dev/null
+++ b/css/dropdown.css
@@ -0,0 +1,87 @@
+/* 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/css/forms.css b/css/forms.css
new file mode 100644
index 0000000..7691920
--- /dev/null
+++ b/css/forms.css
@@ -0,0 +1,244 @@
+.login-box{
+ background: linear-gradient(#141e30, #243b55);
+ border-radius: 10px;
+ padding: 40px;
+ box-sizing: border-box;
+ width: 400px;
+ box-shadow: 0 15px 25px rgba(0,0,0,.6);
+ margin-top: 0px;
+}
+
+.login-box h2 {
+ margin: 0 0 30px;
+ padding: 0;
+ color: #fff;
+ text-align: center;
+}
+
+.login-box .user-box {
+ position: relative;
+}
+
+.login-box .user-box input {
+ width: 100%;
+ padding: 10px 0;
+ font-size: 16px;
+ color: #fff;
+ margin-bottom: 30px;
+ border: none;
+ border-bottom: 1px solid #fff;
+ outline: none;
+ background: transparent;
+}
+.login-box .user-box label {
+ position: absolute;
+ top:0;
+ left: 0;
+ padding: 10px 0;
+ font-size: 16px;
+ color: #fff;
+ pointer-events: none;
+ transition: .5s;
+}
+
+.login-box .user-box input:focus ~ label,
+.login-box .user-box input:valid ~ label {
+ top: -20px;
+ left: 0;
+ color: #03e9f4;
+ font-size: 12px;
+}
+
+.login-box form a {
+ position: relative;
+ display: inline-block;
+ padding: 10px 20px;
+ color: #03e9f4;
+ font-size: 16px;
+ text-decoration: none;
+ text-transform: uppercase;
+ overflow: hidden;
+ transition: .5s;
+ margin-top: 40px;
+ letter-spacing: 4px
+}
+
+.login-box a:hover {
+ background: #03e9f4;
+ color: #fff;
+ border-radius: 5px;
+ box-shadow: 0 0 5px #03e9f4,
+ 0 0 25px #03e9f4,
+ 0 0 50px #03e9f4,
+ 0 0 100px #03e9f4;
+}
+
+.login-box a span {
+ position: absolute;
+ display: block;
+}
+
+.login-box a span:nth-child(1) {
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, #03e9f4);
+ animation: btn-anim1 1s linear infinite;
+}
+
+@keyframes btn-anim1 {
+ 0% {
+ left: -100%;
+ }
+ 50%,100% {
+ left: 100%;
+ }
+}
+
+.login-box a span:nth-child(2) {
+ top: -100%;
+ right: 0;
+ width: 2px;
+ height: 100%;
+ background: linear-gradient(180deg, transparent, #03e9f4);
+ animation: btn-anim2 1s linear infinite;
+ animation-delay: .25s
+}
+
+@keyframes btn-anim2 {
+ 0% {
+ top: -100%;
+ }
+ 50%,100% {
+ top: 100%;
+ }
+}
+
+.login-box a span:nth-child(3) {
+ bottom: 0;
+ right: -100%;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(270deg, transparent, #03e9f4);
+ animation: btn-anim3 1s linear infinite;
+ animation-delay: .5s
+}
+
+@keyframes btn-anim3 {
+ 0% {
+ right: -100%;
+ }
+ 50%,100% {
+ right: 100%;
+ }
+}
+
+.login-box a span:nth-child(4) {
+ bottom: -100%;
+ left: 0;
+ width: 2px;
+ height: 100%;
+ background: linear-gradient(360deg, transparent, #03e9f4);
+ animation: btn-anim4 1s linear infinite;
+ animation-delay: .75s
+}
+
+@keyframes btn-anim4 {
+ 0% {
+ bottom: -100%;
+ }
+ 50%,100% {
+ 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/css/navbar.css b/css/navbar.css
new file mode 100644
index 0000000..3526751
--- /dev/null
+++ b/css/navbar.css
@@ -0,0 +1 @@
+/* Add your css for navbar */
\ No newline at end of file
diff --git a/css/pagination.css b/css/pagination.css
new file mode 100644
index 0000000..a75a959
--- /dev/null
+++ b/css/pagination.css
@@ -0,0 +1,26 @@
+/* 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;
+ }
+
+ .jkj {
+ background-color: #f79533;
+ }
\ No newline at end of file
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/css/scrollspy.css b/css/scrollspy.css
new file mode 100644
index 0000000..88b3f86
--- /dev/null
+++ b/css/scrollspy.css
@@ -0,0 +1 @@
+/* Add your css for textfields */
diff --git a/css/style.css b/css/style.css
index 4785cff..3e87af5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,7 @@
--padding-main: 20px;
--primary-font: "Montserrat", sans-serif;
--secondary-font: "Anton", sans-serif;
+ --button-color: #ef584a;
}
body {
@@ -14,9 +15,26 @@ a {
text-decoration: none !important;
}
+footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ color: rgb(160, 160, 160);
+ text-align: center;
+}
+
+/* global color values */
+
+.title,
+.card-title {
+ color: white;
+}
+
/* main section css */
-.header {
+.header,
+.items {
padding: var(--padding-main);
}
@@ -60,7 +78,7 @@ a {
position: relative;
background-color: #ff5a79;
color: #fff;
- box-shadow: 0 4px #f3002e;
+ /* box-shadow: 0 4px #f3002e; */
text-decoration: none;
}
@@ -69,10 +87,40 @@ a {
.component {
display: flex;
justify-content: center;
+ padding: var(--padding-main);
}
-.card {
+/* main-page css */
+
+.main-page {
transition: 0.3s;
+ border-radius: 10px;
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 300px;
+ height: 200px;
+ border: 2px solid #f0f0f0;
+ margin: 10px;
+ transition: 0.4s;
+}
+
+.title strong {
+ font-size: 30px;
+ padding-top: 30px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+}
+
+.content h1 {
+ font-size: 60px;
+}
+
+/* common css for cards in other pages */
+
+.card {
border-radius: 10px;
padding: 0px;
display: flex;
@@ -81,20 +129,26 @@ a {
align-items: center;
width: 500px;
max-height: 800px;
- border: 2px solid #f0f0f0;
+ border: 2px solid #dddddd;
margin: 10px;
+ transition: 0.4s;
}
.card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
+.main-page:hover {
+ box-shadow: 3px 3px 20px 2px rgba(96, 96, 96, 0.25),
+ -3px -3px 20px 2px rgba(99, 99, 99, 0.22);
+ transform: scale(0.9, 0.9);
+}
+
.card-title {
border-radius: 10px 10px 0px 0px;
width: inherit;
padding: 20px;
margin: 0px;
- color: white;
text-align: center;
}
@@ -105,12 +159,3 @@ a {
.creater-name h2 {
font-size: 20px;
}
-
-footer {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: white;
- color: rgb(160, 160, 160);
- text-align: center;
-}
diff --git a/css/tabs.css b/css/tabs.css
new file mode 100644
index 0000000..88b3f86
--- /dev/null
+++ b/css/tabs.css
@@ -0,0 +1 @@
+/* Add your css for textfields */
diff --git a/css/tags.css b/css/tags.css
new file mode 100644
index 0000000..88b3f86
--- /dev/null
+++ b/css/tags.css
@@ -0,0 +1 @@
+/* Add your css for textfields */
diff --git a/css/textfield.css b/css/textfield.css
new file mode 100644
index 0000000..6a07d59
--- /dev/null
+++ b/css/textfield.css
@@ -0,0 +1,56 @@
+/* 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/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..91ff40d
Binary files /dev/null and b/favicon/android-chrome-192x192.png differ
diff --git a/index.html b/index.html
index e0951a6..758886a 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
CSS COMPONENTS
Add your css Components
@@ -39,87 +42,192 @@Add your css Components
-
+
-
-
-
- Button
-
-
-
+
+
+
+
-
+
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+