39 |
57 |
58 |
--------------------------------------------------------------------------------
/Button/Button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
--------------------------------------------------------------------------------
/Button/Button/style.css:
--------------------------------------------------------------------------------
1 | body
2 | {
3 | margin: 0;
4 | padding: 0;
5 | }
6 | a
7 | {
8 | position: absolute;
9 | top: 50%;
10 | left: 50%;
11 | transform: translate(-50%,-50%);
12 | width: 180px;
13 | height: 60px;
14 | text-align: center;
15 | line-height: 60px;
16 | font-family: sans-serif;
17 | text-transform: uppercase;
18 | font-size: 24px;
19 | letter-spacing: 2px;
20 | color: #000;
21 | text-decoration: none;
22 | }
23 | a svg,
24 | a svg rect
25 | {
26 | position: absolute;
27 | top: 0;
28 | left: 0;
29 | width: 100%;
30 | height: 100%;
31 | fill: transparent;
32 | }
33 | a svg rect
34 | {
35 | stroke: #000;
36 | stroke-width: 4;
37 | transition: 1s;
38 | stroke-dasharray: 180,60;
39 | }
40 | a:hover svg rect
41 | {
42 | stroke-dasharray: 60,180;
43 | stroke-dashoffset: 330;
44 | }
--------------------------------------------------------------------------------
/Button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
--------------------------------------------------------------------------------
/Button/style.css:
--------------------------------------------------------------------------------
1 | body {background: #d6eaf8}
2 | a {
3 | text-decoration: none;
4 | outline: none;
5 | display: inline-block;
6 | color: white;
7 | padding: 20px 30px;
8 | margin: 10px 20px;
9 | border-radius: 10px;
10 | font-family: 'Montserrat', sans-serif;
11 | text-transform: uppercase;
12 | letter-spacing: 2px;
13 | background-image: linear-gradient(to right, #4b0c3b 0%, #853a76 51%, #ffc600 100%);
14 | background-size: 200% auto;
15 | box-shadow: 0 0 20px rgba(0,0,0,.1);
16 | transition: .5s;
17 | }
18 | a:hover {background-position: right center;}
--------------------------------------------------------------------------------
/Calendar/calendar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
122 |
123 |
--------------------------------------------------------------------------------
/Car Game/Login_Form/form.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family:Verdana, Geneva, Tahoma, sans-serif;
6 | }
7 | body{
8 | background-color: rgb(234, 231, 231);
9 | }
10 | .container{
11 | height: 100vh;
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 |
16 | }
17 | .login-form{
18 | background-color:white;
19 | height: 400px;
20 | width: 320px;
21 | box-shadow: 2px 2px 10px;
22 | border-radius: 20px;
23 | text-align: center;
24 |
25 |
26 | }
27 | .login-form h1{
28 | background: rgb(11,11,138);
29 | background: linear-gradient(90deg, rgba(11,11,138,1) 0%, rgba(231,0,255,1) 100%);
30 | height: 80px;
31 | border-top-left-radius: 20px;
32 | border-top-right-radius: 20px;
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 | color: white;
37 | font-weight: 600;
38 | }
39 | .email{
40 | margin-top: 22px;
41 | }
42 |
43 | .common{
44 | height: 40px;
45 | width: 240px;
46 | border-radius: 20px;
47 | outline: none;
48 | border: 1px solid rgb(216, 212, 212);
49 | padding-left: 18px;
50 | margin-bottom: 17px;
51 | background-color: white;
52 |
53 | }
54 |
55 | .remember-password{
56 | font-size: 13.5px;
57 | }
58 | .login-button{
59 | margin: 20px;
60 | margin-bottom: 27px;
61 | }
62 | .login-button input{
63 | height: 40px;
64 | width: 240px;
65 | border-radius: 20px;
66 | outline: none;
67 | border: none;
68 | background: rgb(11,11,138);
69 | background: linear-gradient(90deg, rgba(11,11,138,1) 0%, rgba(231,0,255,1) 100%);
70 | color: white;
71 | font-size: 20px;
72 | }
73 |
74 | .sign-up{
75 | font-size: 13.5px;
76 |
77 | }
78 | .sign-up a{
79 | text-decoration: none;
80 | }
81 |
82 | .link{
83 | background-color: white;
84 | box-shadow:1px 1px 2px ;
85 | margin-top:30px;
86 | padding:10px 30px;
87 | display:inline;
88 | justify-content:center ;
89 | align-items:center ;
90 | border-radius:10px;
91 | position:relative ;
92 | bottom:80px;
93 | left:110px;
94 | padding-top:15px;
95 | }
96 | .link a{
97 | color:red;
98 | text-decoration:none;
99 | font-size:22px;
100 | font-weight:900;
101 | text-shadow:0.5px 0.5px 0.5px black;
102 | }
--------------------------------------------------------------------------------
/Car Game/Login_Form/form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
43 |
You Tube
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Car Game/cargame.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page Title
5 |
180 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
--------------------------------------------------------------------------------
/Facebook Login Page/page.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #01f;
3 | text-align: justify;
4 | }
5 | .lala {
6 | position: absolute;
7 | top: 210px;
8 | left: 70px;
9 | text-align: justify;
10 | }
11 | #saha {
12 | position: absolute;
13 | top: 90px;
14 | left: 100px;
15 | font-size: 210%;
16 | width: 60px;
17 | color: white;
18 | font-family:sans-serif;
19 | text-decoration:underline;
20 | }
21 | #huhu {
22 | position: absolute;
23 | top: 410px;
24 | left: 140px;
25 | font-size: 130%;
26 | width: 100px;
27 | color: white;
28 | background-color: darkblue;
29 | border-color:white;
30 | }
--------------------------------------------------------------------------------
/Facebook Login Page/page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page title
5 |
6 |
7 |
8 |
15 |
23 |
24 | Facebook
25 |
26 |
27 |
--------------------------------------------------------------------------------
/Full page navigation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page Title
5 |
6 |
7 |
8 |
9 |
10 |
FULL PAGE NAVIGATION
11 |
Thanks For Watching
12 |
13 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/Full page navigation/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 | box-sizing:border-box;
5 | font-family:arial;
6 | }
7 | .wrapper{
8 | position:fixed;
9 | top:0;
10 | left:0;
11 | height:100%;
12 | width:100%;
13 | clip-path:circle(25px at calc(100% - 45px)45px); background:linear-gradient(-135deg,black,cyan);
14 | transition:all 0.3s ease-in-out;
15 | }
16 |
17 | #active:checked ~.wrapper{
18 | clip-path:circle(75%);
19 | }
20 |
21 | .menu-btn{
22 | position:absolute ;
23 | right:20px;
24 | top:20px;
25 | z-index:2;
26 | text-align:center;
27 | line-height:50px;
28 | height:50px;
29 | width:50px;
30 | background:linear-gradient(45deg,black,cyan);
31 | color:#fff;
32 | font-size:20px;
33 | border-radius:50%;
34 | cursor:pointer;
35 | }
36 |
37 | .wrapper ul{
38 | position:absolute;
39 | top:50%;
40 | left:50%;
41 | transform:translate(-50%,-50%);
42 | list-style:none;
43 | text-align:center;
44 |
45 | }
46 | .wrapper ul li{
47 | margin:20px 0;
48 | }
49 |
50 | .wrapper ul li a{
51 | color:#fff;
52 | font-size:35px;
53 | font-weight:bolder;
54 | text-decoration:none;
55 | padding:5px 5px;
56 |
57 | }
58 | .wrapper ul li a:after{
59 | content:"";
60 | position:absolute ;
61 | left:0;
62 | width:100%;
63 | height:50px;
64 | text-align:center;
65 | background:#fff;
66 | border-radius:50px;
67 | z-index:-1;
68 | transform:scaleY(0);
69 | transition:transform 0.2s ease;
70 | }
71 | .wrapper ul li a:hover:after{
72 | transform:scaleY(1);
73 | }
74 | .wrapper ul li a:hover{
75 | color:#155455;
76 | }
77 | #active:checked~.menu-btn{
78 | background:white;
79 | color:#133456;
80 | }
81 | input{
82 | display:none;
83 | }
84 | h2{
85 | margin-top:80px;
86 | font-size:50px;
87 | text-align:center;
88 | text-shadow:1px 2px 3px gray,
89 | 2px 3px 4px gray;
90 | }
91 | h3{
92 | text-align:center;
93 | padding:5px;
94 | letter-spacing:3px;
95 | font-size:25px;
96 | }
--------------------------------------------------------------------------------
/Hospital Registration Form/hospital _registration_form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
University of Port Harcourt Teaching Hospital
5 |
6 |
7 |
8 | New Patient Registration Form
9 | Please fill in the form below
10 |
11 |
12 |
13 |
120 |
121 |
--------------------------------------------------------------------------------
/Loading/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Cool Loader
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Loading/index.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | window.onload = function(){
4 | var hiddenElements = document.getElementsByClassName("hidden");
5 | var shownElements = document.getElementsByClassName("shown");
6 |
7 | //get shown elements' pos
8 | const shownPos = [];
9 | Array.from(shownElements).forEach((element) => {
10 |
11 | const move = window.getComputedStyle(element);
12 |
13 | const pos = move.getPropertyValue("left");
14 |
15 | shownPos.unshift(pos);
16 | })
17 |
18 | //get hidden elements' pos
19 | const hiddenPos = [];
20 | Array.from(hiddenElements).forEach((element) =>{
21 | const move2 = window.getComputedStyle(element);
22 |
23 | const pos2 = move2.getPropertyValue("left");
24 |
25 | hiddenPos.unshift(pos2);
26 | })
27 |
28 |
29 |
30 | //start shown elements' animation
31 | var td = 1;
32 |
33 | Array.from(shownElements).reverse().forEach((element) => {
34 | element.style.transition = `all 3s ease ${td}s`;
35 | element.style.left = "200%";
36 | td += 0.2;
37 | })
38 |
39 | //start hidden elements' animation
40 |
41 | var i = 0;
42 | var delay = 0;
43 | if(i < shownPos.length){
44 | Array.from(hiddenElements).forEach((element) =>{
45 | element.style.transition = `all 3s ease ${delay}s`;
46 | element.style.left = shownPos[i];
47 | i++;
48 | delay += 0.3;
49 | })
50 | }
51 |
52 |
53 | //create new elemnts
54 | var size = hiddenElements.length;
55 | var dly = 1.5;
56 | setTimeout(() => {
57 | if(shownElements[0].style.left === "200%"){
58 | Array.from(hiddenElements).forEach((element) =>{
59 | element.style.transition = `all 3s ease ${dly}s`;
60 | element.style.left = "200%";
61 | dly += 0.3;
62 | })
63 | }
64 | }, 3000);
65 |
66 |
67 | for(let i = 0; i < 3; i++) {
68 | var circle = document.createElement("div");
69 | circle.classList.add("circle", "hidden2");
70 | var parent = document.getElementById("container");
71 | parent.insertBefore(circle, parent.firstChild);
72 | }
73 |
74 | var hiddenElements2 = document.getElementsByClassName("hidden2");
75 |
76 |
77 | setTimeout(() =>{
78 | let i = 0;
79 | let delay = 1.5;
80 | if(hiddenElements[0].style.left === "200%"){
81 | Array.from(hiddenElements2).forEach((element) =>{
82 | element.style.transition = `all 3s ease ${delay}s`;
83 | element.style.left = shownPos[i];
84 | i++;
85 | delay += 0.3;
86 | })
87 |
88 | }
89 |
90 | }, 3000);
91 |
92 | setTimeout(() => {
93 | let delay = 2; Array.from(hiddenElements2).forEach((element) =>{
94 | element.style.transition = `all 3s ease ${delay}s`;
95 | element.style.left = "-200%";
96 | delay += 0.3;
97 | })
98 | }, 8000);
99 |
100 |
101 | setTimeout(() => {
102 | let td = 2;
103 | let i = 0;
104 | Array.from(hiddenElements).forEach((element) => {
105 | element.style.transition = `all 3s ease ${td}s`;
106 | element.style.left = shownPos[i];
107 | i++;
108 | td += 0.2;
109 | })
110 | }, 9000);
111 |
112 |
113 | setTimeout(() => {
114 | let td = 2;
115 | let i = 0;
116 | Array.from(hiddenElements).forEach((element) => {
117 | element.style.transition = `all 3s ease ${td}s`;
118 | element.style.left = "-200%"
119 | td += 0.2;
120 | })
121 | }, 15000);
122 |
123 |
124 | setTimeout(() => {
125 | let td = 2;
126 | let i = 0;
127 | Array.from(shownElements).forEach((element) => {
128 | element.style.transition = `all 3s ease ${td}s`;
129 | element.style.left = shownPos[i];
130 | i++;
131 | td += 0.2;
132 | })
133 | }, 16000);
134 |
135 | var circles = document.getElementsByClassName("circle");
136 | let d = 2.5;
137 | Array.from(circles).forEach((element) => {
138 | element.style.animationDelay = `${d}s`;
139 | d += 0.5;
140 | })
141 |
142 |
143 |
144 | }
145 |
146 |
147 |
--------------------------------------------------------------------------------
/Loading/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin:0;
3 | padding:0;
4 | background:linear-gradient(110deg,#00171f, #003652);
5 | display:flex;
6 | justify-content: center;
7 | align-items:center;
8 | min-height: 100vh;
9 | }
10 |
11 |
12 | .container{
13 | background-color: transparent;
14 | height: 6rem;
15 | width: 80%;
16 | display:flex;
17 | justify-content: center;
18 | align-items:center;
19 | position:relative;
20 | }
21 |
22 |
23 | .circle{
24 | border-radius: 50%;
25 | background-color: #1E6091;
26 | border: 1px solid white;
27 | height:1rem;
28 | width: 1rem;
29 | position:absolute;
30 | animation: blink 1s ease-in-out infinite;
31 | }
32 |
33 | .hidden{
34 | left: -200%;
35 | }
36 |
37 | .hidden2{
38 | left: -200%;
39 | }
40 |
41 |
42 | .circle:hover{
43 | filter: blur(2px);
44 | backdrop-filter: blur(10px);
45 | scale: 1.2;
46 | opacity: 0.5;
47 | }
48 |
49 |
50 |
51 | .circle:nth-child(1){
52 | animation: blink 2s ease-in-out 2.5s infinite, move3 3s ease 10s forwards;
53 | }
54 |
55 | .circle:nth-child(2){
56 | animation: blink 2s ease-in-out 3s infinite, move2 3s linear 8s forwards;
57 | }
58 |
59 | .circle:nth-child(3){
60 | animation: blink 2s ease-in-out 3.5s infinite, move 3s linear 6s forwards;
61 |
62 | }
63 |
64 |
65 | .circle:nth-child(4){
66 | left:6rem;
67 | animation: blink 2s ease-in-out 2.5s infinite, move3 3s ease 10s forwards;
68 | }
69 |
70 | .circle:nth-child(5){
71 | left: 8.5rem;
72 | animation: blink 2s ease-in-out 3s infinite, move2 3s linear 8s forwards;
73 | }
74 |
75 | .circle:nth-child(6){
76 | left: 11rem;
77 | animation: blink 2s ease-in-out 3.5s infinite, move 3s linear 6s forwards;
78 |
79 | }
80 |
81 | .circle:nth-child(7){
82 | animation: blink 2s ease-in-out 2.5s infinite, move3 3s ease 10s forwards;
83 | }
84 |
85 | .circle:nth-child(8){
86 | animation: blink 2s ease-in-out 3s infinite, move2 3s linear 8s forwards;
87 | }
88 |
89 | .circle:nth-child(9){
90 | animation: blink 2s ease-in-out 3.5s infinite, move 3s linear 6s forwards;
91 |
92 | }
93 |
94 |
95 | @keyframes blink{
96 | 0%{
97 | opacity: 0.1;
98 | }50%,80%{
99 | opacity: 1;
100 | }
101 | 100%{
102 | opacity: 0.3;
103 | }
104 | }
105 |
106 |
107 | /*@keyframes move{
108 | to{
109 | left: 200%;
110 | }
111 | }
112 |
113 |
114 | @keyframes move2{
115 | to{
116 | right: 6rem;
117 | }
118 | }
119 |
120 | @keyframes move3{
121 | to{
122 | left: 8.5rem;
123 | }
124 | }*/
125 |
126 |
127 |
128 |
--------------------------------------------------------------------------------
/Login Page (with Header)/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 |
Login
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 |
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/Login Page (with Header)/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2 |
3 |
4 | :root {
5 | --maincolor: #FF4D00;
6 | --visiblecolor: #fff;
7 | }
8 |
9 | * {
10 | margin: 0;
11 | padding: 0;
12 | font-family: poppins;
13 | }
14 |
15 | body {
16 | height: 100vh;
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | background-image: url("https://i.ibb.co/SN2RbLG/background.jpg");
21 | background-size: cover;
22 | background-repeat: no-repeat;
23 | }
24 |
25 | header {
26 | position: fixed;
27 | top: 0;
28 | display: flex;
29 | justify-content: space-between;
30 | align-items: center;
31 | height: 50px;
32 | width: 100%;
33 | box-sizing: border-box;
34 | padding: 0px 10px;
35 | background-color: #fff;
36 | border-bottom-left-radius: 10px;
37 | border-bottom-right-radius: 10px;
38 | box-shadow: 0px 0px 10px #c1c1c1;
39 | }
40 |
41 | header button {
42 | cursor: pointer;
43 | background-color: var(--maincolor);
44 | color: #fff;
45 | border: none;
46 | padding: 7px;
47 | border-radius: 5px;
48 | font-weight: 600;
49 | }
50 |
51 | .container {
52 | border: 3px solid rgba(255, 255, 255, 0.568);
53 | border-radius: 10px;
54 | height: 420px;
55 | width: 320px;
56 | background-color: rgba(0, 0, 0, 0.267);
57 | backdrop-filter: blur(25px);
58 | }
59 |
60 | form {
61 | width: 100%;
62 | height: 100%;
63 | display: flex;
64 | flex-direction: column;
65 | align-items: center;
66 | }
67 |
68 | .container h2 {
69 | padding: 15px;
70 | font-size: 30px;
71 | color: var(--visiblecolor);
72 | }
73 |
74 | .input-container {
75 | width: 85%;
76 | height: 40px;
77 | box-sizing: border-box;
78 | color: var(--visiblecolor);
79 | border: 2px solid var(--visiblecolor);
80 | border-radius: 20px;
81 | padding: 0px 10px;
82 | display: flex;
83 | gap: 4px;
84 | align-items: center;
85 | margin-bottom: 12px;
86 | }
87 |
88 | .pass-container {
89 | margin-bottom: 5px;
90 | }
91 |
92 |
93 | .input-container input {
94 | background-color: transparent;
95 | color: var(--visiblecolor);
96 | height: 100%;
97 | width: 220px;
98 | font-size: 17px;
99 | border: none;
100 | }
101 |
102 | .input-container input::placeholder {
103 | font-weight: 450;
104 | color: var(--visiblecolor);
105 | }
106 |
107 | .input-container input:focus {
108 | border: none;
109 | outline: none;
110 | }
111 |
112 | .input-container i {
113 | font-size: 18px;
114 | }
115 |
116 | .remember-forgot {
117 | display: flex;
118 | justify-content: space-between;
119 | width: 85%;
120 | font-size: 12px;
121 | color: var(--visiblecolor);
122 | }
123 |
124 | .remember-forgot label {
125 | display: flex;
126 | align-items: center;
127 | gap: 1px;
128 | }
129 |
130 | .remember-forgot a {
131 | text-decoration: none;
132 | color: var(--visiblecolor);
133 | }
134 |
135 | .remember-forgot a:hover {
136 | text-decoration: underline;
137 | }
138 |
139 | .remember-me {
140 | cursor: pointer;
141 | }
142 |
143 | .login-button {
144 | padding-top: 18px;
145 | width: 100%;
146 | display: flex;
147 | justify-content: center;
148 | }
149 |
150 | .login-button button {
151 | width: 85%;
152 | height: 40px;
153 | border: none;
154 | border-radius: 20px;
155 | background-color: var(--visiblecolor);
156 | color: black;
157 | font-size: 17px;
158 | font-weight: 700;
159 | cursor: pointer;
160 | }
161 |
162 | .login-button button:hover {
163 | background-color: #f5f5f5;
164 | }
165 |
166 | .account-register {
167 | display: flex;
168 | gap: 4px;
169 | justify-content: center;
170 | width: 85%;
171 | font-size: 11px;
172 | padding-bottom: 25px;
173 | color: var(--visiblecolor);
174 | }
175 |
176 | .account-register a {
177 | text-decoration: none;
178 | color: var(--visiblecolor);
179 | font-weight: 600;
180 | }
181 |
182 | .account-register a:hover {
183 | text-decoration: underline;
184 | }
185 |
186 | .google-login {
187 | width: 100%;
188 | display: flex;
189 | justify-content: center;
190 | }
191 |
192 | .google-login button {
193 | display: flex;
194 | justify-content: center;
195 | align-items: center;
196 | gap: 10px;
197 | width: 50%;
198 | height: 35px;
199 | border: 2px solid #ffffff93;
200 | border-radius: 20px;
201 | background-color: transparent;
202 | color: #ffffff93;
203 | font-size: 17px;
204 | font-weight: 500;
205 | cursor: pointer;
206 | margin: 7px 0px;
207 | }
208 |
209 | .google-login button:hover {
210 | color: var(--visiblecolor);
211 | border: 2px solid var(--visiblecolor);
212 | }
213 |
214 | .google-login img {
215 | opacity:0.5;
216 | }
217 |
218 | .google-login button:hover img {
219 | opacity:1;
220 | }
221 |
222 | .apple-login {
223 | width: 100%;
224 | display: flex;
225 | justify-content: center;
226 | }
227 |
228 | .apple-login button {
229 | display: flex;
230 | justify-content: center;
231 | align-items: center;
232 | gap: 10px;
233 | width: 50%;
234 | height: 35px;
235 | border: 2px solid #ffffff93;
236 | border-radius: 20px;
237 | background-color: transparent;
238 | color: #ffffff93;
239 | font-size: 17px;
240 | font-weight: 500;
241 | cursor: pointer;
242 | }
243 |
244 | .apple-login button:hover {
245 | color: var(--visiblecolor);
246 | border: 2px solid var(--visiblecolor);
247 | }
248 |
249 | .apple-login img {
250 | opacity:0.5;
251 | }
252 |
253 | .apple-login button:hover img {
254 | opacity:1;
255 | }
256 |
257 | .continue {
258 | font-size: 12px;
259 | width: 100%;
260 | display: flex;
261 | justify-content: center;
262 | align-items: center;
263 | }
264 |
265 | .continue .hr {
266 | width: 272px;
267 | height: 1px;
268 | position: absolute;
269 | /* background-color: #ffffff; */
270 | background-image: linear-gradient(to right, #fff, #ffffff00, #ffffff00, #fff);
271 | z-index: -1;
272 | }
273 |
274 | .continue .text {
275 | color: #ffffff93;
276 | border-radius: 10px;
277 | padding: 0px 5px;
278 | }
--------------------------------------------------------------------------------
/Login Page Logo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page Title
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
USER LOGIN
14 |
15 |
16 |
17 |
18 |
Remember me
19 |
20 |
Forgot password
21 |
Sign Up
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Login Page Logo/index.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | alert("Please Upvote if you like the code.")
3 | $("button").click(function(){
4 | var a = $("#text").value();
5 | var b = $("#pass").value();
6 | if (a == "Saviee" && b == "saviee") {
7 | alert("Login Complete")
8 | }
9 | else{
10 | alert("Incorrect Username or Password")
11 | }
12 | });
13 | });
14 | function a() {
15 | alert("Awwwwnnn, So sad!")
16 | }
17 | function b() {
18 | alert("Awwwwnnn, You are so sweet!")
19 | }
20 | function c() {
21 | alert("Common, we both know its not gonna work!")
22 | }
23 |
--------------------------------------------------------------------------------
/Login Page Logo/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | text-align:center;
3 | background-image:url(https://scontent-los2-1.xx.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/95906409_1079242375782017_863084626002837504_o.jpg?_nc_cat=111&_nc_sid=110474&efg=eyJpIjoidCJ9&_nc_eui2=AeH2JA_xLBRkB9yTPaGkyoS1v4FPFzo7ZcC_gU8XOjtlwEOXCB50gaM-R-8Otqghe7hG3RFKKxoAVQ9URrWgcfDd&_nc_oc=AQl_0tntRvAbhJh5igj91WGqeMKfWPUtQP23Lkp4rIy1YQ8Ci2luomC9g1CT02QRkNs&_nc_ht=scontent-los2-1.xx&_nc_tp=14&oh=7e4245dd0a491eaab17f3248423c5af0&oe=5EDBA45A);
4 | background-repeat:no-repeat;
5 | backdrop-filter: blur(6px);
6 | font-family:Raleway;
7 | }
8 | .login {
9 | font-size:30px;
10 | font-weight:bolder;
11 |
12 | }
13 | input {
14 | transition:0.3s;
15 | width:250px;
16 | height:20px;
17 | background:none;
18 | border-right:none;
19 | border-left:none;
20 | border-top:none;
21 | padding:8px;
22 | margin:10px;
23 | border-color:black;
24 | font-size:15px;
25 | outline:none;
26 | font-weight:bold;
27 | }
28 | button {
29 | width:100px;
30 | height:px;
31 | background-color:black;
32 | opacity:0.5;
33 | border-right:;
34 | border-left:;
35 | border-top:;
36 | padding:8px;
37 | font-family:Raleway;
38 | margin:10px;
39 | border-color:black;
40 | font-size:15px;
41 | outline:none;
42 | transition:0.3s;
43 | font-weight:bold;
44 | color:white;
45 | }
46 | button:hover {
47 | background-color:green;
48 | border-color:green;
49 | border-style:solid;
50 | opacity:0.5;
51 | }
52 | .g:hover {
53 | border-color:green;
54 | width:270px;
55 | }
56 | .me {
57 | width:20px;
58 | padding:0px;
59 | margin-left:-145px;
60 | font-weight:bolder;
61 | }
62 | p {
63 | color:black;
64 | font-weight:bold;
65 | }
66 | marquee {
67 | margin-top:150px;
68 | font-size:20px;
69 | }
--------------------------------------------------------------------------------
/Login Page Max/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Login Page
5 |
6 |
7 |
8 |
9 |
10 |
11 |
user Login
12 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/Login Page Max/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color:#00Eeff;
3 | overflow:hidden;
4 | }
5 |
6 | #box{
7 | height:100vh;
8 | display:flex;
9 | align-items:center;
10 |
11 | }
12 |
13 | #log{
14 | background:#ffe;
15 | padding:24px;
16 | border-radius:5px;
17 | display:flex;
18 | margin:auto;
19 | justify-content:center;
20 | font-size:30px;
21 | box-shadow:5px 5px 5px grey;
22 |
23 | }
24 |
25 | #submit{
26 | width: 90%;
27 | background: #0905f0;
28 | padding: 8px;
29 | margin: 6px;
30 | border-radius: 10px;
31 | border: none;
32 | color: white;
33 |
34 | }
35 | #submit:hover{
36 | color:red;
37 | background:skyblue;
38 | }
39 |
40 | input{
41 | border: none;
42 | border-radius:12px;
43 | border-bottom: 1px solid #000;
44 | padding: 8px;
45 | margin:3px;
46 | box-shadow:1px 1px 1px grey;
47 | border-right-color:none;
48 | }
49 |
50 |
--------------------------------------------------------------------------------
/Login Page New/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Login Page
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Login
16 |
50 |
51 |
52 |
53 |
54 |
55 |
62 |
63 |
2020: © All copyright CK.
64 |
65 |
66 |
--------------------------------------------------------------------------------
/Login Page New/style.css:
--------------------------------------------------------------------------------
1 | Body{
2 |
3 | background: linear-gradient(90deg,
4 | rgba(255, 255, 255, 0) 0%,
5 | rgba(255, 255, 255, 0.2) 25%,
6 | rgba(255, 255, 255, 0.2) 75%,
7 | rgba(255, 255, 255, 0) 100%);
8 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
9 | inset 0 0 1px rgba(255, 255, 255, 0.6);
10 |
11 | }
12 | .container {
13 | Padding:10px;
14 | height: 480px;
15 | width:250px;
16 | border: 1px solid none;
17 | box-shadow: 10px 7px 12px -webkit-linear-gradient(violet,indigo,blue,green,yellow,orange,red );
18 | background: #ddd;
19 | position:relative ;
20 | border-radius:20px;
21 | margin-top:15px;
22 | display:center ;
23 | }
24 | h1 {
25 | font-style:italic;
26 | Border:2px solid gray;
27 | background-color:#ddd;
28 | border-radius:5px;
29 | display:block;
30 | margin:20px auto;
31 | text-align:center;
32 | border: 0px solid#1267e7;
33 | padding: 14px 40px;
34 | width:150px;
35 | outline: none;
36 | color:#000000;
37 | box-shadow: 8px 5px 10px gray;
38 | }
39 | .username{
40 | font-weight:bold;
41 | font-style:italic ;
42 | }
43 | .username_box{
44 | Border:none;
45 | background-color:skyblue;
46 | display:inline-block;
47 | box-shadow: 6px 5px 10px gray;
48 | }
49 | .password{
50 | font-weight:bold;
51 | font-style:italic ;
52 | }
53 | .password_box{
54 | Border:none;
55 | background-color:skyblue;
56 | display:inline-block ;
57 | box-shadow: 6px 5px 10px gray;
58 | }
59 | .Submit [type="submit"]{
60 | font-weight:bold;
61 | font-style:italic;
62 | border: 0;
63 | background: none;
64 | display:block;
65 | margin:20px auto;
66 | text-align:center;
67 | border:0px solid#1267e7;
68 | padding: 14px 40px;
69 | width:150px;
70 | outline:none;
71 | color:#0000FF;
72 | border-radius:50px;
73 | transition: 0.25s;
74 | cursor: pointer;
75 | box-shadow: 8px 5px 10px gray;
76 | }
77 | .Submit [type="submit"]:hover{
78 | background: #0be064;
79 | }
80 | span{
81 | Font-weight:bold;
82 | float:right;
83 | }
84 | a:link {
85 | font-weight:bold;
86 | color:red;
87 | text-decoration: none;
88 | }
89 | input{
90 | border:none;
91 | padding: 5px 10px 10px;
92 | background:transparent ;
93 | outline:none;
94 | }
--------------------------------------------------------------------------------
/Login Page like/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
profile card
9 |
10 |
11 |
12 |
33 |
34 |
--------------------------------------------------------------------------------
/Login Page like/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
2 | *{
3 | font-family:"Poppins",sans-serif;
4 | margin:0;
5 | padding:0;
6 | box-sizing:border-box;
7 | }
8 | body{
9 | display:flex;
10 | justify-content:center;
11 | align-items:center;
12 | min-height:100vh; background-image:url("https://dl.dropboxusercontent.com/scl/fi/dq26ys1z9hqt1xm8s1z3u/dark-moonlight-night-in-forest-nature-landscape-vector.jpg?rlkey=fes5cq2jg2n8mmviq6dzvirto&dl=0");
13 | background-repeat:no-repeat;
14 | background-attachment:fixed;
15 | background-size:cover;
16 | background-position:center;
17 |
18 | }
19 |
20 | .box1{
21 | width:340px;
22 | background-color:rgba(0,0,0,0.345);
23 | color:#fff;
24 | border-radius:7px;
25 | padding:30px 40px ;
26 | backdrop-filter:blur(25px);
27 | }
28 | .box1 h1{
29 | font-size:30px;
30 | text-align:center ;
31 | }
32 | .box1 .box2{
33 | position:relative;
34 | width:100%;
35 | height: 50px;
36 | margin:20px 0;
37 | }
38 | .box2 input{
39 | background:transparent;
40 | width:100%;
41 | height:100%;
42 | border:none;
43 | outline:none;
44 | border:2px solid rgba(255,255,255,0.2);
45 | border-radius:50px;
46 | font-size:16px;
47 | padding:25px 40px 25px 20px;
48 | color:#fff;
49 | }
50 | .box2 input::placeholder{
51 | color:#fff;
52 | }
53 | .box2 i{
54 | right:20px;
55 | position:absolute;
56 | top:30%;
57 | font-size:20px;
58 | }
59 | .box1 .remember-forgot{
60 | display:flex;
61 | justify-content:space-between;
62 | font-size:12px;
63 | }
64 | .remember-forgot label input {
65 | color:#fff;
66 | margin-right:3px;
67 | }
68 | .remember-forgot a{
69 | color:#fff;
70 | text-decoration:none;
71 | }
72 | .remember-forgot a:hover {
73 | text-decoration:underline
74 | }
75 | .box1 .btn{
76 | width:100%;
77 | height:40px;
78 | border:none;
79 | outline:0;
80 | font-weight:bold;
81 | border-radius:40px;
82 | margin-top:10px;
83 | }
84 | .register a{
85 | text-decoration:none;
86 | color:#fff;
87 | }
88 | .register a:hover {
89 | text-decoration:underline
90 | }
91 | .box1 .register{
92 | font-size:12px;
93 | text-align:center;
94 | margin-top:10px 0 10px;
95 | }
96 | .register p a{
97 | text-decoration:none;
98 | color:#fff;
99 | font-weight:bold;
100 | }
101 | .register p a:hover{
102 | text-decoration:underline ;
103 | }
--------------------------------------------------------------------------------
/Login page Basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Form
5 |
6 |
7 |
8 |
9 |
10 |
11 |
Log in Here
12 |
13 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Login page Basic/style.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | body
4 | {
5 | margin:0;
6 | padding:0;
7 | background:url("https://goo.gl/D1V7Qn");
8 | height:100%;
9 | background-size:cover;
10 | font-family:sans-serif;
11 | }
12 |
13 | .loginbox
14 | {
15 | position:absolute;
16 | top:50%;
17 | left:50%;
18 | transform: translate(-50%, -50%);
19 | width:350px;
20 | height:420px;
21 | padding:80px 40px;
22 | box-sizing: border-box;
23 | background:rgba(0,0,0,0.5);
24 | border:inset;
25 | border-color:#fff;
26 | }
27 |
28 | h2
29 | {
30 | margin:0;
31 | padding:0 0 20px;
32 | color:#fff;
33 | text-align:center;
34 | }
35 |
36 | .loginbox p
37 | {
38 | padding: 0;
39 | margin: 0 ;
40 | font-weight :bold;
41 | color:#fff
42 | }
43 |
44 | .loginbox input
45 | {
46 |
47 | width:100%;
48 | margin-bottom: 20px;
49 | }
50 |
51 | .loginbox input[type="text"], .loginbox input[type="password"]
52 | {
53 | border: none;
54 | border-bottom:1px solid #fff;
55 | background:transparent;
56 | outline:none;
57 | height:40px;
58 | color:#fff;
59 | font-size:16px;
60 | }
61 |
62 | .loginbox input[type="button"]
63 | {
64 | border:none;
65 | outline:none;
66 | height:40px;
67 | color:#fff;
68 | background:rgb(255,38,125);
69 | cursor:pointer;
70 | border-radius:20px;
71 | }
72 |
73 | .loginbox input[type="button"]:hover
74 | {
75 | background:#efed40;
76 | color:262626;
77 |
78 | }
79 |
80 | .loginbox a
81 | {
82 | color:#fff;
83 | font-size:14px;
84 | font-weight:bold;
85 | }
86 |
87 | ::placeholder
88 | {
89 | color:rgba(255,255,255,0.5);
90 | }
--------------------------------------------------------------------------------
/Login page home/inex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Login Page
6 |
7 |
8 |
9 |
28 |
29 |
--------------------------------------------------------------------------------
/Login page home/style.css:
--------------------------------------------------------------------------------
1 | /* Reset CSS */
2 | html, body, div, span, applet, object, iframe,
3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4 | a, abbr, acronym, address, big, cite, code,
5 | del, dfn, em, font, img, ins, kbd, q, s, samp,
6 | small, strike, strong, sub, sup, tt, var,
7 | b, u, i, center,
8 | dl, dt, dd, ol, ul, li,
9 | fieldset, form, label, legend,
10 | table, caption, tbody, tfoot, thead, tr, th, td {
11 | margin: 0;
12 | padding: 0;
13 | border: 0;
14 | outline: 0;
15 | font-size: 100%;
16 | vertical-align: baseline;
17 | background: transparent;
18 | }
19 | body {
20 | background: #DCDDDF url(https://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
21 | color: #000;
22 | font: 14px Arial;
23 | margin: 0 auto;
24 | padding: 0;
25 | position: relative;
26 | }
27 | h1{ font-size:28px;}
28 | h2{ font-size:26px;}
29 | h3{ font-size:18px;}
30 | h4{ font-size:16px;}
31 | h5{ font-size:14px;}
32 | h6{ font-size:12px;}
33 | h1,h2,h3,h4,h5,h6{ color:#563D64;}
34 | small{ font-size:10px;}
35 | b, strong{ font-weight:bold;}
36 | a{ text-decoration: none; }
37 | a:hover{ text-decoration: underline; }
38 | .left { float:left; }
39 | .right { float:right; }
40 | .alignleft { float: left; margin-right: 15px; }
41 | .alignright { float: right; margin-left: 15px; }
42 | .clearfix:after,
43 | form:after {
44 | content: ".";
45 | display: block;
46 | height: 0;
47 | clear: both;
48 | visibility: hidden;
49 | }
50 | .container { margin: 25px auto; position: relative; width: 900px; }
51 | #content {
52 | background: #f9f9f9;
53 | background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
54 | background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
55 | background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
56 | background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
57 | background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
58 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
59 | -webkit-box-shadow: 0 1px 0 #fff inset;
60 | -moz-box-shadow: 0 1px 0 #fff inset;
61 | -ms-box-shadow: 0 1px 0 #fff inset;
62 | -o-box-shadow: 0 1px 0 #fff inset;
63 | box-shadow: 0 1px 0 #fff inset;
64 | border: 1px solid #c4c6ca;
65 | margin: 0 auto;
66 | padding: 25px 0 0;
67 | position: relative;
68 | text-align: center;
69 | text-shadow: 0 1px 0 #fff;
70 | width: 400px;
71 | }
72 | #content h1 {
73 | color: #7E7E7E;
74 | font: bold 25px Helvetica, Arial, sans-serif;
75 | letter-spacing: -0.05em;
76 | line-height: 20px;
77 | margin: 10px 0 30px;
78 | }
79 | #content h1:before,
80 | #content h1:after {
81 | content: "";
82 | height: 1px;
83 | position: absolute;
84 | top: 10px;
85 | width: 27%;
86 | }
87 | #content h1:after {
88 | background: rgb(126,126,126);
89 | background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
90 | background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
91 | background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
92 | background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
93 | background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
94 | right: 0;
95 | }
96 | #content h1:before {
97 | background: rgb(126,126,126);
98 | background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
99 | background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
100 | background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
101 | background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
102 | background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
103 | left: 0;
104 | }
105 | #content:after,
106 | #content:before {
107 | background: #f9f9f9;
108 | background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
109 | background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
110 | background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
111 | background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
112 | background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
113 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
114 | border: 1px solid #c4c6ca;
115 | content: "";
116 | display: block;
117 | height: 100%;
118 | left: -1px;
119 | position: absolute;
120 | width: 100%;
121 | }
122 | #content:after {
123 | -webkit-transform: rotate(2deg);
124 | -moz-transform: rotate(2deg);
125 | -ms-transform: rotate(2deg);
126 | -o-transform: rotate(2deg);
127 | transform: rotate(2deg);
128 | top: 0;
129 | z-index: -1;
130 | }
131 | #content:before {
132 | -webkit-transform: rotate(-3deg);
133 | -moz-transform: rotate(-3deg);
134 | -ms-transform: rotate(-3deg);
135 | -o-transform: rotate(-3deg);
136 | transform: rotate(-3deg);
137 | top: 0;
138 | z-index: -2;
139 | }
140 | #content form { margin: 0 20px; position: relative }
141 | #content form input[type="text"],
142 | #content form input[type="password"] {
143 | -webkit-border-radius: 3px;
144 | -moz-border-radius: 3px;
145 | -ms-border-radius: 3px;
146 | -o-border-radius: 3px;
147 | border-radius: 3px;
148 | -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
149 | -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
150 | -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
151 | -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
152 | box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
153 | -webkit-transition: all 0.5s ease;
154 | -moz-transition: all 0.5s ease;
155 | -ms-transition: all 0.5s ease;
156 | -o-transition: all 0.5s ease;
157 | transition: all 0.5s ease;
158 | background: #eae7e7 url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
159 | border: 1px solid #c8c8c8;
160 | color: #777;
161 | font: 13px Helvetica, Arial, sans-serif;
162 | margin: 0 0 10px;
163 | padding: 15px 10px 15px 40px;
164 | width: 80%;
165 | }
166 | #content form input[type="text"]:focus,
167 | #content form input[type="password"]:focus {
168 | -webkit-box-shadow: 0 0 2px #ed1c24 inset;
169 | -moz-box-shadow: 0 0 2px #ed1c24 inset;
170 | -ms-box-shadow: 0 0 2px #ed1c24 inset;
171 | -o-box-shadow: 0 0 2px #ed1c24 inset;
172 | box-shadow: 0 0 2px #ed1c24 inset;
173 | background-color: #fff;
174 | border: 1px solid #ed1c24;
175 | outline: none;
176 | }
177 | #username { background-position: 10px 10px !important }
178 | #password { background-position: 10px -53px !important }
179 | #content form input[type="submit"] {
180 | background: rgb(254,231,154);
181 | background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
182 | background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
183 | background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
184 | background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
185 | background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
186 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
187 | -webkit-border-radius: 30px;
188 | -moz-border-radius: 30px;
189 | -ms-border-radius: 30px;
190 | -o-border-radius: 30px;
191 | border-radius: 30px;
192 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
193 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
194 | -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
195 | -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
196 | box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
197 | border: 1px solid #D69E31;
198 | color: #85592e;
199 | cursor: pointer;
200 | float: left;
201 | font: bold 15px Helvetica, Arial, sans-serif;
202 | height: 35px;
203 | margin: 20px 0 35px 15px;
204 | position: relative;
205 | text-shadow: 0 1px 0 rgba(255,255,255,0.5);
206 | width: 120px;
207 | }
208 | #content form input[type="submit"]:hover {
209 | background: rgb(254,193,81);
210 | background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
211 | background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
212 | background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
213 | background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
214 | background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
215 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
216 | }
217 | #content form div a {
218 | color: #004a80;
219 | float: right;
220 | font-size: 12px;
221 | margin: 30px 15px 0 0;
222 | text-decoration: underline;
223 | }
224 | .button {
225 | background: rgb(247,249,250);
226 | background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
227 | background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
228 | background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
229 | background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
230 | background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
231 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
232 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
233 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
234 | -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
235 | -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
236 | box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
237 | -webkit-border-radius: 0 0 5px 5px;
238 | -moz-border-radius: 0 0 5px 5px;
239 | -o-border-radius: 0 0 5px 5px;
240 | -ms-border-radius: 0 0 5px 5px;
241 | border-radius: 0 0 5px 5px;
242 | border-top: 1px solid #CFD5D9;
243 | padding: 15px 0;
244 | }
245 | .button a {
246 | background: url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
247 | color: #7E7E7E;
248 | font-size: 17px;
249 | padding: 2px 0 2px 40px;
250 | text-decoration: none;
251 | -webkit-transition: all 0.3s ease;
252 | -moz-transition: all 0.3s ease;
253 | -ms-transition: all 0.3s ease;
254 | -o-transition: all 0.3s ease;
255 | transition: all 0.3s ease;
256 | }
257 | .button a:hover {
258 | background-position: 0 -135px;
259 | color: #00aeef;
260 | }
--------------------------------------------------------------------------------
/Login page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
profile card
9 |
10 |
11 |
12 |
33 |
34 |
--------------------------------------------------------------------------------
/Login page/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
2 | *{
3 | font-family:"Poppins",sans-serif;
4 | margin:0;
5 | padding:0;
6 | box-sizing:border-box;
7 | }
8 | body{
9 | display:flex;
10 | justify-content:center;
11 | align-items:center;
12 | min-height:100vh; background-image:url("https://dl.dropboxusercontent.com/scl/fi/dq26ys1z9hqt1xm8s1z3u/dark-moonlight-night-in-forest-nature-landscape-vector.jpg?rlkey=fes5cq2jg2n8mmviq6dzvirto&dl=0");
13 | background-repeat:no-repeat;
14 | background-attachment:fixed;
15 | background-size:cover;
16 | background-position:center;
17 |
18 | }
19 |
20 | .box1{
21 | width:340px;
22 | background-color:rgba(0,0,0,0.245);
23 | color:#fff;
24 | border-radius:7px;
25 | padding:30px 40px ;
26 | backdrop-filter:blur(20px);
27 | }
28 | .box1 h1{
29 | font-size:30px;
30 | text-align:center ;
31 | }
32 | .box1 .box2{
33 | position:relative;
34 | width:100%;
35 | height: 50px;
36 | margin:20px 0;
37 | }
38 | .box2 input{
39 | background:transparent;
40 | width:100%;
41 | height:100%;
42 | border:none;
43 | outline:none;
44 | border:2px solid rgba(255,255,255,0.2);
45 | border-radius:50px;
46 | font-size:16px;
47 | padding:25px 40px 25px 20px;
48 | }
49 | .box2 input::placeholder{
50 | color:#fff;
51 | }
52 | .box2 i{
53 | right:20px;
54 | position:absolute;
55 | top:30%;
56 | font-size:20px;
57 | }
58 | .box1 .remember-forgot{
59 | display:flex;
60 | justify-content:space-between;
61 | font-size:12px;
62 | }
63 | .remember-forgot label input {
64 | color:#fff;
65 | margin-right:3px;
66 | }
67 | .remember-forgot a{
68 | color:#fff;
69 | text-decoration:none;
70 | }
71 | .remember-forgot a:hover {
72 | text-decoration:underline
73 | }
74 | .box1 .btn{
75 | width:100%;
76 | height:40px;
77 | border:none;
78 | outline:0;
79 | font-weight:bold;
80 | border-radius:40px;
81 | margin-top:10px;
82 | }
83 | .register a{
84 | text-decoration:none;
85 | color:#fff;
86 | }
87 | .register a:hover {
88 | text-decoration:underline
89 | }
90 | .box1 .register{
91 | font-size:12px;
92 | text-align:center;
93 | margin-top:10px 0 10px;
94 | }
95 | .register p a{
96 | text-decoration:none;
97 | color:#fff;
98 | font-weight:bold;
99 | }
100 | .register p a:hover{
101 | text-decoration:underline ;
102 | }
--------------------------------------------------------------------------------
/Loginform/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
LOG IN
8 |
105 |
106 |
107 |
108 |
109 |
Login
110 | Sign Up
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
158 |
159 |
160 |
161 |
--------------------------------------------------------------------------------
/Magic Sidebar Menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Sidebar Menu
11 |
12 |
13 |
14 |
15 |
56 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/Magic Sidebar Menu/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: sans-serif;
6 | }
7 |
8 | :root {
9 | --bg: #2f323f;
10 | }
11 |
12 | body {
13 | min-height: 100vh !important;
14 | background: var(--bg) !important;
15 | }
16 |
17 | .navigation {
18 | position: fixed;
19 | inset: 40px 0 40px 20px;
20 | background: #fff;
21 | width: 75px;
22 | display: flex;
23 | align-items: center;
24 | justify-content: center;
25 | transition: .5s;
26 | }
27 |
28 | .navigation.active {
29 | width: 250px;
30 | }
31 |
32 | .navigation .menutoggle {
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | width: 100%;
37 | height: 60px;
38 | padding: 0 23px;
39 | border-bottom: 1px solid rgba(0, 0, 0, 0.25);
40 | display: flex;
41 | justify-content: flex-start;
42 | align-items: center;
43 | cursor: pointer;
44 | }
45 |
46 | .navigation .menutoggle::before {
47 | content: '';
48 | position: absolute;
49 | width: 30px;
50 | height: 2px;
51 | background: #333;
52 | transform: translateY(-8px);
53 | transition: .5s;
54 | }
55 |
56 | .navigation.active .menutoggle::before {
57 | transform: rotate(45deg);
58 | }
59 |
60 | .navigation .menutoggle::after {
61 | content: '';
62 | position: absolute;
63 | width: 30px;
64 | height: 2px;
65 | background: #333;
66 | transform: translateY(8px);
67 | box-shadow: 0 -8px 0 #333;
68 | transition: .5s;
69 | }
70 |
71 | .navigation.active .menutoggle::after {
72 | box-shadow: 0 0 0 #333;
73 | transform: rotate(-45deg);
74 | }
75 |
76 | .navigation ul {
77 | display: flex;
78 | width: 100%;
79 | flex-direction: column;
80 | }
81 |
82 | .navigation ul li {
83 | list-style: none;
84 | position: relative;
85 | width: 100%;
86 | height: 76px;
87 | border-radius: 12px;
88 | border: 8px solid transparent;
89 | transition: .5s;
90 | }
91 |
92 | .navigation ul li.active {
93 | transform: translateX(30px);
94 | background: var(--bg);
95 | }
96 |
97 | .navigation ul li::before {
98 | content: '';
99 | position: absolute;
100 | top: -28px;
101 | right: -10px;
102 | width: 20px;
103 | height: 20px;
104 | background: transparent;
105 | border-bottom-right-radius: 20px;
106 | box-shadow: 6px 5px 0 5px var(--bg);
107 | transform: scale(0);
108 | transform-origin: bottom right;
109 | transition: .5s;
110 | }
111 |
112 | .navigation ul li.active::before {
113 | right: 22px;
114 | transform: scale(1);
115 | }
116 |
117 | .navigation ul li::after {
118 | content: '';
119 | position: absolute;
120 | bottom: -28px;
121 | right: -10px;
122 | width: 20px;
123 | height: 20px;
124 | background: transparent;
125 | border-top-right-radius: 20px;
126 | box-shadow: 6px -3px 0 3px var(--bg);
127 | transform: scale(0);
128 | transform-origin: bottom right;
129 | transition: .5s;
130 | }
131 |
132 | .navigation ul li.active::after {
133 | right: 22px;
134 | transform: scale(1);
135 | }
136 |
137 | .navigation ul li a {
138 | position: relative;
139 | display: flex;
140 | justify-content: flex-start;
141 | align-items: center;
142 | width: 100%;
143 | text-align: center;
144 | text-decoration: none;
145 | z-index: 1000;
146 | }
147 |
148 | .navigation ul li a #icon {
149 | position: relative;
150 | display: block;
151 | min-width: 60px;
152 | height: 60px;
153 | border-radius: 10px;
154 | font-size: 1.75em;
155 | line-height: 60px;
156 | transition: .5s;
157 | color: #333;
158 | }
159 |
160 | .navigation ul li.active a #icon {
161 | color: #fff;
162 | background: var(--clr);
163 | }
164 |
165 |
166 | .navigation ul li a span {
167 | position: relative;
168 | padding: 0 15px;
169 | color: #333;
170 | display: flex;
171 | align-items: center;
172 | height: 60px;
173 | opacity: 0;
174 | visibility: hidden;
175 | transition: .5s;
176 | }
177 |
178 | .navigation.navigation ul li a span {
179 | visibility: visible;
180 | opacity: 1;
181 | }
182 |
183 | .navigation.active ul li.active a span {
184 | color: #fff;
185 | }
--------------------------------------------------------------------------------
/Modern Login/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
Modern Login Page | AsmrProg
10 |
11 |
12 |
13 |
14 |
15 |
31 |
47 |
48 |
49 |
50 |
Welcome Back!
51 |
Enter your personal details to use all of site features
52 |
53 |
54 |
55 |
Hello, Friend!
56 |
Register with your personal details to use all of site features
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/Modern Login/script.js:
--------------------------------------------------------------------------------
1 | const container = document.getElementById('container');
2 | const registerBtn = document.getElementById('register');
3 | const loginBtn = document.getElementById('login');
4 |
5 | registerBtn.addEventListener('click', () => {
6 | container.classList.add("active");
7 | });
8 |
9 | loginBtn.addEventListener('click', () => {
10 | container.classList.remove("active");
11 | });
--------------------------------------------------------------------------------
/Modern Login/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Montserrat', sans-serif;
8 | }
9 |
10 | body{
11 | background-color: #c9d6ff;
12 | background: linear-gradient(to right, #e2e2e2, #c9d6ff);
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | flex-direction: column;
17 | height: 100vh;
18 | }
19 |
20 | .container{
21 | background-color: #fff;
22 | border-radius: 30px;
23 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
24 | position: relative;
25 | overflow: hidden;
26 | width: 768px;
27 | max-width: 100%;
28 | min-height: 480px;
29 | }
30 |
31 | .container p{
32 | font-size: 14px;
33 | line-height: 20px;
34 | letter-spacing: 0.3px;
35 | margin: 20px 0;
36 | }
37 |
38 | .container span{
39 | font-size: 12px;
40 | }
41 |
42 | .container a{
43 | color: #333;
44 | font-size: 13px;
45 | text-decoration: none;
46 | margin: 15px 0 10px;
47 | }
48 |
49 | .container button{
50 | background-color: #512da8;
51 | color: #fff;
52 | font-size: 12px;
53 | padding: 10px 45px;
54 | border: 1px solid transparent;
55 | border-radius: 8px;
56 | font-weight: 600;
57 | letter-spacing: 0.5px;
58 | text-transform: uppercase;
59 | margin-top: 10px;
60 | cursor: pointer;
61 | }
62 |
63 | .container button.hidden{
64 | background-color: transparent;
65 | border-color: #fff;
66 | }
67 |
68 | .container form{
69 | background-color: #fff;
70 | display: flex;
71 | align-items: center;
72 | justify-content: center;
73 | flex-direction: column;
74 | padding: 0 40px;
75 | height: 100%;
76 | }
77 |
78 | .container input{
79 | background-color: #eee;
80 | border: none;
81 | margin: 8px 0;
82 | padding: 10px 15px;
83 | font-size: 13px;
84 | border-radius: 8px;
85 | width: 100%;
86 | outline: none;
87 | }
88 |
89 | .form-container{
90 | position: absolute;
91 | top: 0;
92 | height: 100%;
93 | transition: all 0.6s ease-in-out;
94 | }
95 |
96 | .sign-in{
97 | left: 0;
98 | width: 50%;
99 | z-index: 2;
100 | }
101 |
102 | .container.active .sign-in{
103 | transform: translateX(100%);
104 | }
105 |
106 | .sign-up{
107 | left: 0;
108 | width: 50%;
109 | opacity: 0;
110 | z-index: 1;
111 | }
112 |
113 | .container.active .sign-up{
114 | transform: translateX(100%);
115 | opacity: 1;
116 | z-index: 5;
117 | animation: move 0.6s;
118 | }
119 |
120 | @keyframes move{
121 | 0%, 49.99%{
122 | opacity: 0;
123 | z-index: 1;
124 | }
125 | 50%, 100%{
126 | opacity: 1;
127 | z-index: 5;
128 | }
129 | }
130 |
131 | .social-icons{
132 | margin: 20px 0;
133 | }
134 |
135 | .social-icons a{
136 | border: 1px solid #ccc;
137 | border-radius: 20%;
138 | display: inline-flex;
139 | justify-content: center;
140 | align-items: center;
141 | margin: 0 3px;
142 | width: 40px;
143 | height: 40px;
144 | }
145 |
146 | .toggle-container{
147 | position: absolute;
148 | top: 0;
149 | left: 50%;
150 | width: 50%;
151 | height: 100%;
152 | overflow: hidden;
153 | transition: all 0.6s ease-in-out;
154 | border-radius: 150px 0 0 100px;
155 | z-index: 1000;
156 | }
157 |
158 | .container.active .toggle-container{
159 | transform: translateX(-100%);
160 | border-radius: 0 150px 100px 0;
161 | }
162 |
163 | .toggle{
164 | background-color: #512da8;
165 | height: 100%;
166 | background: linear-gradient(to right, #5c6bc0, #512da8);
167 | color: #fff;
168 | position: relative;
169 | left: -100%;
170 | height: 100%;
171 | width: 200%;
172 | transform: translateX(0);
173 | transition: all 0.6s ease-in-out;
174 | }
175 |
176 | .container.active .toggle{
177 | transform: translateX(50%);
178 | }
179 |
180 | .toggle-panel{
181 | position: absolute;
182 | width: 50%;
183 | height: 100%;
184 | display: flex;
185 | align-items: center;
186 | justify-content: center;
187 | flex-direction: column;
188 | padding: 0 30px;
189 | text-align: center;
190 | top: 0;
191 | transform: translateX(0);
192 | transition: all 0.6s ease-in-out;
193 | }
194 |
195 | .toggle-left{
196 | transform: translateX(-200%);
197 | }
198 |
199 | .container.active .toggle-left{
200 | transform: translateX(0);
201 | }
202 |
203 | .toggle-right{
204 | right: 0;
205 | transform: translateX(0);
206 | }
207 |
208 | .container.active .toggle-right{
209 | transform: translateX(200%);
210 | }
--------------------------------------------------------------------------------
/Profile Stack/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
UI-Stackcard
8 |
9 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/Profile Stack/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmrchandan006/Full-Stack-Projects/1676377cd29752a445d1f9f9721f16e94bc46b0a/Profile Stack/index.js
--------------------------------------------------------------------------------
/Profile Stack/style.css:
--------------------------------------------------------------------------------
1 |
2 | *{
3 | padding: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | font-family: "Poppins", sans-serif;
7 | }
8 | html, body{
9 | width: 100%;
10 | height: 100%;
11 | -webkit-tap-highlight-color:transparent;
12 | }
13 | .main{
14 | width: 100%;
15 | height: 100%;
16 | background-color:#000000;
17 | background-image:url( https://www.dropbox.com/scl/fi/e7kpzlvkey8nnyi61pn3r/920534b7a416a5d1c5b34d002f920435.jpg?rlkey=sabohvup2kzqzfydz8n61sov4&dl=1);
18 | background-repeat:no-repeat ;
19 | background-size:cover;
20 | }
21 | .main:hover{
22 | box-shadow: 0 0 5px green,
23 | 0 0 25px lightcyan,
24 | 0 0 50px purple, 0 0 100px blue;
25 | }
26 | .stack{
27 | min-height:50%;
28 | width: 230px;
29 | border:2px solid white;
30 | border-radius: 20px ;
31 | display: flex;
32 | flex-direction: column;
33 | align-items: center;
34 | justify-content: center;
35 | position: absolute;
36 | top: 50%;
37 | left: 50%;
38 | transform: translate(-50%,-50%);
39 | background-image: url(https://www.dropbox.com/scl/fi/dhi6tazzgafphupn0vekz/6f60dd993a4c1343cfb50dd8267de3da.jpg?rlkey=2qbafc25x86yo2t3izkajl9bc&dl=1);
40 | background-size:contain;
41 | background-position:center;
42 | mask-image: linear-gradient(var(--direction), rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%);
43 | mask-position: 50% 50%;
44 | z-index: 1;
45 | box-shadow: 0 0 5px lightcyan,
46 | 0 0 25px salmon ;
47 | }
48 | .stack:hover,
49 | .stack:active{
50 | box-shadow: 0 0 5px green,
51 | 0 0 25px lightcyan,
52 | 0 0 50px purple, 0 0 100px blue;
53 | border:1px solid skyblue;
54 | background-image:url(https://www.dropbox.com/scl/fi/qchi5yxgwarpsx26jx8ip/d27cf8230fb630ef79aaf40b2ccb8d98.jpg?rlkey=suaswisl4jrm5g3bj9hc7yt4m&dl=1);
55 | background-size:cover;
56 | background-position:center;
57 |
58 | }
59 | .profile{
60 | width: 100%;
61 | height: 150px;
62 | display: flex;
63 | flex-direction: column;
64 | align-items: center;
65 | justify-content: center;
66 | }
67 | .profile img{
68 | width:100px;
69 | height: 100px;
70 | object-fit: cover;
71 | object-position: top;
72 | border-radius: 50px;
73 | margin-top: 30%;
74 | }
75 | .profile img:hover{
76 | box-shadow: 0 0 5px lightcyan,
77 | 0 0 25px salmon ;
78 | border:4px double lightcyan;
79 | }
80 | .profile h3{
81 | font-size: 1rem;
82 | font-weight: bold;
83 | color: white;
84 | opacity: 0.78;
85 | }
86 | .profile h4{
87 | font-size: 0.80rem;
88 | font-weight: normal;
89 | color: white;
90 | opacity: 0.67;
91 | }
92 | .profile a{
93 | text-decoration: none;
94 | color: white;
95 | }
96 | .profile a:hover{
97 | color: red;
98 | cursor: pointer;
99 | }
100 | .follow{
101 | display: flex;
102 | justify-content: space-around;
103 | align-items: center;
104 | width: 100%;
105 | height: 100px;
106 | margin-top: 50px;
107 | padding: 0 4%;
108 | }
109 | button{
110 | color: white;
111 | padding: 4% 6%;
112 | font-size: 0.80rem;
113 | text-align: center;
114 | background-color: rgb(54, 122, 250);
115 | cursor: pointer;
116 | border: none;
117 | border-radius: 15px;
118 | font-weight: bold;
119 | }
120 | button:hover{
121 | color:orange ;
122 | box-shadow: 0 0 5px lightcyan,
123 | 0 0 25px salmon ;
124 | }
125 | .follow i{
126 | color: rgb(212, 208, 208);
127 | padding: 5%;
128 | background-color: transparent;
129 | cursor: pointer;
130 | border: 1px solid grey ;
131 | border-radius: 17px;
132 | font-weight: bold;
133 | opacity: 0.78;
134 | }
135 | .follow i:hover{
136 | animation:tilt 5s ease-in-out ;
137 | }
138 | @keyframes tilt{
139 | 0%{
140 | rotate:0deg;
141 | }
142 | 30%, 70%{
143 | rotate:25deg;
144 | }
145 | 50%, 85%{
146 | rotate:-25deg;
147 | }
148 | }
149 |
150 | .socials{
151 | display: flex;
152 | justify-content: space-around;
153 | align-items: center;
154 | width: 100%;
155 | height: 100px;
156 | padding:24%;
157 | }
158 | .socials i{
159 | color: rgb(212, 208, 208);
160 | background-color: transparent;
161 | cursor: pointer;
162 | font-weight: normal;
163 | opacity: 0.98;
164 | }
165 | .socials i:hover,
166 | .follow i:hover{
167 | color: orange;
168 | }
--------------------------------------------------------------------------------
/Profile Stack/xyz.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmrchandan006/Full-Stack-Projects/1676377cd29752a445d1f9f9721f16e94bc46b0a/Profile Stack/xyz.ico
--------------------------------------------------------------------------------
/Quiz game/Quiz.css:
--------------------------------------------------------------------------------
1 | body {
2 |
3 | }
4 | #submit{
5 | font-size:25px;background-color:#000;color:#fff;top:430px;
6 | }
--------------------------------------------------------------------------------
/Registrtion form/Login_Design/design.css:
--------------------------------------------------------------------------------
1 | /* Add all your styles here */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box ;
6 | }
7 |
8 | body {
9 | font-size: 15pt;
10 | background-color: #1e2328;
11 | }
12 |
13 | .login_page {
14 | margin-top: 50px ;
15 | margin: 0 auto;
16 | border: 1px solid black;
17 | max-width: 400px ;
18 | height: 500px;
19 | background: url('https://images.unsplash.com/photo-1714517615056-e8d12c09b3bd?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
20 | color: #ffffff;
21 | border-radius: 20px;
22 | box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
23 | background-size: cover;
24 | background-position: center;
25 | overflow: hidden;
26 | }
27 |
28 | form {
29 | display: block ;
30 | padding: 40px;
31 | width: 100%;
32 | height: 100%;
33 | backdrop-filter: brightness(40%);
34 | display: flex ;
35 | flex-direction: column;
36 | gap: 5px;
37 | }
38 |
39 | h1 {
40 | font-weight: normal;
41 | font-size: 24px;
42 | text-shadow: 0 0 2px rgba(0,0,0,0.5);
43 | margin-bottom: 50px;
44 | }
45 |
46 | label {
47 | color: rgba(255,255,255,0.5);
48 | text-transform: uppercase ;
49 | font-size: 10px;
50 | letter-spacing: 10px;
51 | padding-top: 10p ;
52 | }
53 |
54 | input {
55 | background: rgba(255,255,255,0.5);
56 | height: 40px;
57 | line-height: 40px;
58 | border-radius: 20px;
59 | padding: 0 20px;
60 | border: none;
61 | margin-bottom: 20px;
62 | color: #ffffff;
63 | }
64 |
65 | button {
66 | background: orangered;
67 | height: 40px;
68 | line-height: 40px;
69 | border-radius: 40px;
70 | border: none;
71 | margin: 10px 0 ;
72 | text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
73 | color: white;
74 | font-size: 12px;
75 | text-transform: uppercase ;
76 | }
77 |
78 | input:focus {
79 | outline: none;
80 | border: none;
81 | box-shadow: 0 0 5px orangered;
82 | }
83 |
84 | p {
85 | text-align: center;
86 | color: orangered;
87 | }
88 |
89 |
90 | @media screen and (max-width: 600px) {
91 | .login_page {
92 | max-width: 100%;
93 | padding: 10px;
94 | border-radius: none;
95 | }
96 |
97 | form {
98 | border-radius: 20px;
99 | }
100 |
101 | .login_page h1 {
102 | font-size: 24px;
103 | }
104 |
105 | .login_page input[type="text"],
106 | .login_page input[type="password"],
107 | .login_page button {
108 | width: 100%;
109 | margin-bottom: 10px;
110 | }
111 | }
112 |
113 |
114 |
--------------------------------------------------------------------------------
/Registrtion form/Login_Design/design.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page Title
5 |
6 |
7 |
8 |
9 |
10 |
21 |
22 |
23 |
© 2024
24 |
25 |
26 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Registrtion form/Registration Form/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | background-color: #f3f3f3;
4 | margin: 0;
5 | padding: 0;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | margin-top: 20px;
10 | }
11 |
12 | .main {
13 | background-color: #fff;
14 | border-radius: 15px;
15 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
16 | padding: 20px;
17 | width: 300px;
18 | margin-bottom: 20px;
19 | }
20 |
21 | .main h2 {
22 | color: #4caf50;
23 | margin-bottom: 20px;
24 | text-align: center;
25 | }
26 |
27 | label {
28 | display: block;
29 | margin-bottom: 5px;
30 | color: #555;
31 | font-weight: bold;
32 | }
33 |
34 | input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
35 | width: 100%;
36 | margin-bottom: 15px;
37 | padding: 10px;
38 | box-sizing: border-box;
39 | border: 1px solid #ddd;
40 | border-radius: 5px;
41 | }
42 |
43 | button[type="submit"] {
44 | padding: 15px;
45 | border-radius: 10px;
46 | border: none;
47 | background-color: #4caf50;
48 | color: white;
49 | cursor: pointer;
50 | width: 100%;
51 | font-size: 16px;
52 | }
--------------------------------------------------------------------------------
/Registrtion form/Registration Form/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Registration Form
7 |
8 |
9 |
10 |
11 |
Registration Form
12 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/Registrtion form/form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Page Title
5 |
6 |
7 |
Registrtion form
8 |
9 |