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 clone this repository diff --git a/css/accordion.css b/css/accordion.css index e69de29..289e4fd 100644 --- a/css/accordion.css +++ 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/buttons.css b/css/buttons.css index d8eb323..1ad3324 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -122,3 +122,46 @@ 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 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/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/css/pagination.css b/css/pagination.css index e69de29..a75a959 100644 --- a/css/pagination.css +++ 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/index.html b/index.html index fef2290..758886a 100644 --- a/index.html +++ b/index.html @@ -227,7 +227,7 @@

😀

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 3bb6fc5..0ddb3fe 100644 --- a/pages/accordion.html +++ b/pages/accordion.html @@ -22,7 +22,7 @@ - + @@ -47,11 +47,62 @@

Add your different Accordion

+ + +
+
+
+
+
+ Accordion +
+
+ + +
+

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

+
+ + +
+

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

+
+ + +
+

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

+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+

+ Name: + + James Kaviyil Jose + +

+
+
+
+
+
+
+ diff --git a/pages/buttons.html b/pages/buttons.html index bd5be0b..bd0b682 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -171,6 +171,108 @@

+ +
+
+
+
+
+ Button +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+

+ Name: + James Kaviyil Jose + +

+
+
+
+
+
+ +
+ +
+
+
+
+
+ Button +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+

+ Name: + Saksham Mahajan + +

+
+
+
+
+
+
+ + +
+
+
+
+
+ Button +
+
+
+
+
+
+
+
+
+
+ +
+ Creator +
+
+
+

+ Name: + Irwan Phan + +

+
+
+
+
+
+