Skip to content

Commit 250c719

Browse files
codingwithveer18codingwithveer18
authored
Merge branch 'TusharKesarwani:main' into main
2 parents cd91ae2 + 5a3f75e commit 250c719

557 files changed

Lines changed: 28168 additions & 30739 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Projects/3D Login Page/style.css‎

Lines changed: 126 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,127 @@
11
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
text-decoration: none;
6-
font-family: Arial, sans-serif;
7-
}
8-
9-
html {
10-
font-size: 72.5%;
11-
}
12-
13-
.container {
14-
width: 100%;
15-
height: 100vh;
16-
background: linear-gradient(rgba(31, 7, 7, 0.7), rgba(0, 0, 0, 0.7)),
17-
url(images/bg.png) center no-repeat;
18-
background-size: cover;
19-
perspective: 100rem;
20-
}
21-
22-
.forms-wrapper {
23-
transform-style: preserve-3d;
24-
position: absolute;
25-
top: calc(50% - 17.5rem);
26-
left: calc(50% - 25rem);
27-
transform: rotateY(10deg);
28-
transition: transform 0.5s, left 0.5s;
29-
}
30-
31-
.forms-wrapper.change {
32-
transform: rotateY(70deg);
33-
left: calc(50% + 25rem);
34-
}
35-
36-
.forms-wrapper form {
37-
width: 50rem;
38-
height: 35rem;
39-
background-color: rgba(40, 114, 108, 0.925);
40-
display: flex;
41-
flex-direction: column;
42-
justify-content: space-around;
43-
align-items: center;
44-
box-shadow: 0.1rem 0.1rem 0.1rem #ccc inset, -0.1rem -0.1rem 0.1rem #ccc inset;
45-
position: absolute;
46-
}
47-
48-
.signup-form {
49-
transform: rotateY(270deg) translateZ(25rem) translateX(-25rem);
50-
}
51-
52-
form a {
53-
position: absolute;
54-
top: 2rem;
55-
background-color: #fff;
56-
font-weight: 600;
57-
text-transform: uppercase;
58-
color: rgba(40, 114, 108);
59-
letter-spacing: 0.2rem;
60-
}
61-
62-
.signup-btn {
63-
left: 2rem;
64-
padding: 0.5rem 1rem 0.5rem 3rem;
65-
border-radius: 100% 0.5rem 0.5rem 100%;
66-
}
67-
68-
.signin-btn {
69-
right: 2rem;
70-
padding: 0.5rem 3rem 0.5rem 1rem;
71-
border-radius: 0.5rem 100% 100% 0.5rem;
72-
}
73-
74-
form h2 {
75-
font-size: 2.3rem;
76-
text-transform: uppercase;
77-
letter-spacing: 0.2rem;
78-
color: #fff;
79-
}
80-
81-
.inputs-wrapper {
82-
display: flex;
83-
flex-direction: column;
84-
}
85-
86-
.inputs-wrapper input {
87-
width: 25rem;
88-
height: 3rem;
89-
padding: 0.5rem 1rem;
90-
margin: 0.5rem 0;
91-
background-color: transparent;
92-
border: 0.1rem solid #fff;
93-
border-radius: 5rem;
94-
color: #fff;
95-
letter-spacing: 0.1rem;
96-
outline: none;
97-
}
98-
99-
.inputs-wrapper input::placeholder {
100-
color: #fff;
101-
font-weight: 300;
102-
}
103-
104-
.inputs-wrapper input[type="submit"] {
105-
background-color: #fff;
106-
color: rgba(40, 114, 108);
107-
font-weight: 900;
108-
text-transform: uppercase;
109-
cursor: pointer;
110-
}
111-
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
text-decoration: none;
6+
font-family: Arial, sans-serif;
7+
}
8+
9+
html {
10+
font-size: 72.5%;
11+
}
12+
13+
.container {
14+
width: 100%;
15+
height: 100vh;
16+
background: linear-gradient(rgba(31, 7, 7, 0.7), rgba(0, 0, 0, 0.7)),
17+
url(images/bg.png) center no-repeat;
18+
background-size: cover;
19+
perspective: 100rem;
20+
}
21+
22+
.forms-wrapper {
23+
transform-style: preserve-3d;
24+
position: absolute;
25+
top: calc(50% - 17.5rem);
26+
left: calc(50% - 25rem);
27+
transform: rotateY(10deg);
28+
transition: transform 0.5s, left 0.5s;
29+
}
30+
31+
.forms-wrapper.change {
32+
transform: rotateY(70deg);
33+
left: calc(50% + 25rem);
34+
}
35+
36+
.forms-wrapper form {
37+
width: 50rem;
38+
height: 35rem;
39+
background-color: rgba(40, 114, 108, 0.925);
40+
display: flex;
41+
flex-direction: column;
42+
justify-content: space-around;
43+
align-items: center;
44+
box-shadow: 0.1rem 0.1rem 0.1rem #ccc inset, -0.1rem -0.1rem 0.1rem #ccc inset;
45+
position: absolute;
46+
}
47+
48+
.signup-form {
49+
transform: rotateY(270deg) translateZ(25rem) translateX(-25rem);
50+
}
51+
52+
form a {
53+
position: absolute;
54+
top: 2rem;
55+
background-color: #fff;
56+
font-weight: 600;
57+
text-transform: uppercase;
58+
color: rgba(40, 114, 108);
59+
letter-spacing: 0.2rem;
60+
}
61+
62+
.signup-btn {
63+
left: 2rem;
64+
padding: 0.5rem 1rem 0.5rem 3rem;
65+
border-radius: 100% 0.5rem 0.5rem 100%;
66+
transition: background-color 0.3s;
67+
}
68+
69+
.signup-btn:hover {
70+
background-color: rgba(255, 255, 255, 0.8);
71+
}
72+
73+
.signin-btn {
74+
right: 2rem;
75+
padding: 0.5rem 3rem 0.5rem 1rem;
76+
border-radius: 0.5rem 100% 100% 0.5rem;
77+
transition: background-color 0.3s;
78+
}
79+
80+
.signin-btn:hover {
81+
background-color: rgba(255, 255, 255, 0.8);
82+
}
83+
84+
form h2 {
85+
font-size: 2.3rem;
86+
text-transform: uppercase;
87+
letter-spacing: 0.2rem;
88+
color: #fff;
89+
}
90+
91+
.inputs-wrapper {
92+
display: flex;
93+
flex-direction: column;
94+
}
95+
96+
.inputs-wrapper input {
97+
width: 25rem;
98+
height: 3rem;
99+
padding: 0.5rem 1rem;
100+
margin: 0.5rem 0;
101+
background-color: transparent;
102+
border: 0.1rem solid #fff;
103+
border-radius: 5rem;
104+
color: #fff;
105+
letter-spacing: 0.1rem;
106+
outline: none;
107+
}
108+
109+
.inputs-wrapper input::placeholder {
110+
color: #fff;
111+
font-weight: 300;
112+
}
113+
114+
.inputs-wrapper input[type="submit"] {
115+
background-color: #fff;
116+
color: rgba(40, 114, 108);
117+
font-weight: 900;
118+
text-transform: uppercase;
119+
cursor: pointer;
120+
transition: background-color 0.3s;
121+
}
122+
123+
.inputs-wrapper input[type="submit"]:hover {
124+
background-color: rgba(255, 255, 255, 0.8);
125+
}
126+
127+

‎Projects/3D Rotating Cube/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
### A 3D rotating cube
2+
Created a 3D rotating cube using HTML, CSS, and JavaScript. The end result will be an interactive cube that rotates in 3D space.

‎Projects/3D Rotating Cube/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Modern Rotating 3D Cube Animation</title>
5+
<link rel="stylesheet" href="styles.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="cube">
10+
<div class="face front">
11+
</div>
12+
<div class="face back">
13+
</div>
14+
<div class="face right">
15+
</div>
16+
<div class="face left">
17+
18+
</div>
19+
<div class="face top">
20+
</div>
21+
<div class="face bottom">
22+
</div>
23+
</div>
24+
</div>
25+
</body>
26+
</html>

‎Projects/3D Rotating Cube/styles.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
background: linear-gradient(to bottom right, #18427d, #5d7ac4);
3+
height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
margin: 0;
8+
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); /* Updated box-shadow */
9+
10+
}
11+
12+
.container {
13+
perspective: 800px;
14+
15+
}
16+
17+
.cube {
18+
width: 200px;
19+
height: 200px;
20+
position: relative;
21+
transform-style: preserve-3d;
22+
animation: rotate 6s infinite linear;
23+
transform: rotateX(-20deg) rotateY(-30deg);
24+
background: linear-gradient(to bottom right, #695c29, #e67e22);
25+
}
26+
27+
.face {
28+
position: absolute;
29+
width: 200px;
30+
height: 200px;
31+
color: rgb(255, 255, 255);
32+
font-size: 24px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
text-transform: uppercase;
37+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
38+
}
39+
40+
.front {
41+
background: linear-gradient(to bottom right, #477422, #77f12c); transform: translateZ(100px);
42+
}
43+
44+
.back {
45+
background: linear-gradient(to bottom right, #105561, #0ed7e9); transform: translateZ(-100px) rotateY(180deg);
46+
}
47+
48+
.right {
49+
background: linear-gradient(to bottom right, #b8a249, #e67e22); transform: translateX(100px) rotateY(90deg);
50+
}
51+
52+
.left {
53+
background: linear-gradient(to bottom right, #3e8575, #13eca0); transform: translateX(-100px) rotateY(-90deg);
54+
}
55+
56+
.top {
57+
background: linear-gradient(to bottom right, #f1c40f, #e67e22); transform: translateY(-100px) rotateX(90deg);
58+
}
59+
60+
.bottom {
61+
background: linear-gradient(to bottom right, #d16725, #ce905a); transform: translateY(100px) rotateX(-90deg);
62+
}
63+
64+
65+
@keyframes rotate {
66+
0% {
67+
transform: rotateX(-20deg) rotateY(-30deg);
68+
}
69+
100% {
70+
transform: rotateX(340deg) rotateY(330deg);
71+
}
72+
}
73+

‎Projects/3d_Navbar_Animations/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const hamburger_menu = document.querySelector(".hamburger-menu");
2+
const container = document.querySelector(".container");
3+
4+
hamburger_menu.addEventListener("click", () => {
5+
container.classList.toggle("active");
6+
});

‎Projects/3d_Navbar_Animations/bg.jpg‎

192 KB
Loading

0 commit comments

Comments
 (0)