Skip to content

Commit ddb7cc2

Browse files
Shamli-Singh-YadavShamli-Singh-Yadav
authored
Merge branch 'you-dont-need:master' into Author-Profile-Page-#845 
2 parents cacea5b + b6eeaca commit ddb7cc2

File tree

5 files changed

+387
-0
lines changed

5 files changed

+387
-0
lines changed

‎Mondrian-Composition/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Mondrian Art</title>
8+
<style>
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
padding: 0;
16+
}
17+
.container{
18+
display: inline-grid;
19+
background-color: black;
20+
gap: 9px;
21+
grid-template-columns: 320px 198px 153px 50px;
22+
grid-template-rows: 414px 130px 155px 11px;
23+
}
24+
25+
.red{
26+
background-color: #E72F24;
27+
}
28+
.item{
29+
background-color: #F0F1EC;
30+
}
31+
.white1{
32+
grid-area: 1/2/2/5;
33+
}
34+
.white2{
35+
grid-area: 2/1/4/2;
36+
}
37+
.white3{
38+
grid-area: 4/1/6/2;
39+
}
40+
.white4{
41+
grid-area: 2/2/4/4;
42+
}
43+
.white5{
44+
grid-area: 3/4/6/5;
45+
margin-top: 10px;
46+
}
47+
.yellow{
48+
background-color: #F9D01E ;
49+
grid-area: 4/2/6/3;
50+
}
51+
.blue{
52+
background-color: #004592 ;
53+
grid-area: 2/4/3/5;
54+
}
55+
.black{
56+
background-color:#232629 ;
57+
grid-area: 4/3/6/4;
58+
}
59+
@media (max-width:1250px){
60+
.container{
61+
grid-template-columns: 160px 99px 76px 25px;
62+
grid-template-rows: 207px 65px 78px 6px;
63+
}
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<div class="container">
70+
<div class="red"></div>
71+
<div class="item white1"></div>
72+
<div class="item white2"></div>
73+
<div class="item white3"></div>
74+
<div class="item white4"></div>
75+
<div class="item white5"></div>
76+
<div class="black"></div>
77+
<div class="yellow"></div>
78+
<div class="blue"></div>
79+
</div>
80+
</body>
81+
82+
</html>

‎Password-Strength-Checker/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS Only Password Strength Checker</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="./style.css" />
11+
</head>
12+
<body>
13+
<div class="wrapper">
14+
<h2><s>No</s><br>JavaScript</h2>
15+
</div>
16+
<div class="container">
17+
18+
<h2>Password Strength Checker</h2>
19+
<form>
20+
<div class="password-box">
21+
<input
22+
id="pwd"
23+
type="password"
24+
placeholder="Enter your password"
25+
required
26+
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
27+
/>
28+
<div class="strength"></div>
29+
<!-- <div class="strength-text">Weak</div> -->
30+
</div>
31+
32+
<div class="hint">
33+
<strong>Requirements:</strong> 8+ characters with uppercase, lowercase, numbers, and symbols (@$!%*?&)
34+
</div>
35+
</form>
36+
</div>
37+
</body>
38+
</html>

‎Password-Strength-Checker/style.css‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: "Inter", "Poppins", sans-serif;
9+
background: #fffbf0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
gap: 60px;
15+
padding: 40px;
16+
}
17+
18+
.wrapper {
19+
background: #fff;
20+
padding: 50px 40px;
21+
border: 3px solid #f4c430;
22+
max-width: 300px;
23+
text-align: center;
24+
position: relative;
25+
}
26+
27+
.wrapper::before {
28+
content: '';
29+
position: absolute;
30+
top: -3px;
31+
left: -3px;
32+
right: -3px;
33+
bottom: -3px;
34+
background: #f4c430;
35+
z-index: -1;
36+
transform: rotate(2deg);
37+
}
38+
39+
.wrapper h2 {
40+
font-size: 2.5rem;
41+
font-weight: 300;
42+
color: #2c2c2c;
43+
margin: 0;
44+
line-height: 1.1;
45+
letter-spacing: -1px;
46+
}
47+
48+
.wrapper h2 s {
49+
color: #d32f2f;
50+
text-decoration: line-through;
51+
text-decoration-thickness: 3px;
52+
}
53+
54+
/* Checker Section */
55+
.container {
56+
background: #fff;
57+
padding: 50px 40px;
58+
border: 3px solid #ffcc02;
59+
max-width: 450px;
60+
width: 100%;
61+
text-align: left;
62+
position: relative;
63+
}
64+
65+
.container::before {
66+
content: '';
67+
position: absolute;
68+
top: -3px;
69+
left: -3px;
70+
right: -3px;
71+
bottom: -3px;
72+
background: #ffcc02;
73+
z-index: -1;
74+
transform: rotate(-1deg);
75+
}
76+
77+
.container h2 {
78+
font-size: 1.8rem;
79+
font-weight: 500;
80+
color: #2c2c2c;
81+
margin-bottom: 30px;
82+
text-align: center;
83+
}
84+
85+
h2 {
86+
margin-bottom: 20px;
87+
}
88+
89+
.password-box {
90+
width: 100%;
91+
margin: 0;
92+
font-family: inherit;
93+
}
94+
95+
label {
96+
display: block;
97+
margin-bottom: 12px;
98+
font-weight: 500;
99+
color: #2c2c2c;
100+
font-size: 14px;
101+
text-transform: uppercase;
102+
letter-spacing: 0.5px;
103+
}
104+
105+
input[type="password"] {
106+
width: 100%;
107+
padding: 18px 20px;
108+
border: 2px solid #f0f0f0;
109+
background: #fefefe;
110+
font-size: 16px;
111+
font-weight: 400;
112+
outline: none;
113+
transition: all 0.2s ease;
114+
color: #2c2c2c;
115+
font-family: 'Courier New', monospace;
116+
}
117+
118+
input[type="password"]:focus {
119+
border-color: #f4c430;
120+
background: #fffef8;
121+
}
122+
123+
input[type="password"]::placeholder {
124+
color: #999;
125+
font-family: "Inter", "Poppins", sans-serif;
126+
}
127+
128+
.strength {
129+
position: relative;
130+
height: 4px;
131+
width: 100%;
132+
margin-top: 15px;
133+
background: #f0f0f0;
134+
overflow: hidden;
135+
transition: all 0.3s ease;
136+
}
137+
138+
/* Strength levels with solid colors */
139+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength {
140+
background: #ffe0e0;
141+
}
142+
143+
input:invalid:not(:placeholder-shown) ~ .strength {
144+
background: #fff8e1;
145+
}
146+
147+
input:valid ~ .strength {
148+
background: #f0f8e1;
149+
}
150+
151+
.strength::after {
152+
content: "";
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
height: 100%;
157+
width: 100%;
158+
transform: scaleX(0);
159+
transform-origin: left;
160+
transition: transform 0.4s ease;
161+
}
162+
163+
/* Optional */
164+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength::after {
165+
background: #f57c00;
166+
}
167+
168+
input:invalid:not(:placeholder-shown) ~ .strength::after {
169+
background: #d32f2f;
170+
}
171+
172+
input:valid ~ .strength::after {
173+
background: #388e3c;
174+
}
175+
176+
/* Trigger animation when password is being typed */
177+
input:not(:placeholder-shown) ~ .strength::after {
178+
transform: scaleX(1);
179+
}
180+
181+
182+
.strength-text {
183+
font-size: 12px;
184+
margin-top: 8px;
185+
font-weight: 500;
186+
text-transform: uppercase;
187+
letter-spacing: 1px;
188+
opacity: 0;
189+
transition: opacity 0.3s ease;
190+
}
191+
192+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength-text {
193+
opacity: 1;
194+
color: #d32f2f;
195+
}
196+
197+
input:invalid:not(:placeholder-shown) ~ .strength-text {
198+
opacity: 1;
199+
color: #f57c00;
200+
}
201+
202+
input:valid ~ .strength-text {
203+
opacity: 1;
204+
color: #388e3c;
205+
}
206+
207+
.hint {
208+
font-size: 13px;
209+
color: #666;
210+
margin-top: 25px;
211+
line-height: 1.5;
212+
padding: 20px;
213+
background: #fffbf0;
214+
border-left: 4px solid #f4c430;
215+
}
216+
217+
218+
@media (max-width: 768px) {
219+
body {
220+
flex-direction: column;
221+
gap: 40px;
222+
padding: 30px 20px;
223+
}
224+
225+
.wrapper, .container {
226+
max-width: 100%;
227+
}
228+
229+
.wrapper {
230+
padding: 40px 30px;
231+
}
232+
233+
.wrapper h2 {
234+
font-size: 2rem;
235+
}
236+
237+
.container {
238+
padding: 40px 30px;
239+
}
240+
241+
.container h2 {
242+
font-size: 1.5rem;
243+
}
244+
}
245+
246+
@media (max-width: 480px) {
247+
.wrapper h2 {
248+
font-size: 1.8rem;
249+
}
250+
251+
.container h2 {
252+
font-size: 1.3rem;
253+
}
254+
255+
input[type="password"] {
256+
padding: 16px 18px;
257+
font-size: 15px;
258+
}
259+
}

0 commit comments

Comments
 (0)