Skip to content

Commit b697445

Browse files
geeky-prashantgeeky-prashant
authored
Initial commit
0 parents  commit b697445

File tree

44 files changed

+1425
-0
lines changed

Some content is hidden

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

44 files changed

+1425
-0
lines changed

‎Animated Navigation Menu/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>Animated Navigation Menu</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<nav>
12+
<ul>
13+
<li>Home</li>
14+
<li>Services</li>
15+
<li>Products</li>
16+
<li>Clients</li>
17+
<li>Contact</li>
18+
</ul>
19+
</nav>
20+
</div>
21+
</body>
22+
</html>

‎Animated Navigation Menu/readme-images/Animated-Navigation-Menu.png

28.8 KB
Loading

‎Animated Navigation Menu/styles.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
.container{
8+
background: #55BAB9;
9+
width: 100%;
10+
height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
nav{
16+
background: #fff;
17+
border-radius: 50px;
18+
padding: 10px;
19+
box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
20+
}
21+
nav ul li{
22+
list-style: none;
23+
display: inline-block;
24+
padding: 13px 35px;
25+
margin: 10px;
26+
font-size: 18px;
27+
font-weight: 500;
28+
color: #777;
29+
cursor: pointer;
30+
position: relative;
31+
z-index: 2;
32+
transition: color 0.5s;
33+
}
34+
nav ul li:after{
35+
content: '';
36+
background-color: #19978F;
37+
width: 100%;
38+
height: 100%;
39+
border-radius: 30px;
40+
position: absolute;
41+
top: 100%;
42+
left: 50%;
43+
transform: translate(-50%, -50%);
44+
z-index: -1;
45+
opacity: 0;
46+
transition: top 0.5s, opacity 0.5s;
47+
}
48+
nav ul li:hover{
49+
color: #fff;
50+
}
51+
nav ul li:hover::after{
52+
top: 50%;
53+
opacity: 1;
54+
}

‎Email Signup Form/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Email Signup Form</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="newsletter">
11+
<h1>Signup for Newsletter</h1>
12+
<hr />
13+
<p>
14+
Enter your email in the box below to receive the latest news and
15+
information about our activities
16+
</p>
17+
<form>
18+
<input type="email" placeholder="Email" required />
19+
<br />
20+
<button type="submit">Submit Now</button>
21+
</form>
22+
</div>
23+
</body>
24+
</html>

‎Email Signup Form/readme-images/Email-Signup-Form.png

48.6 KB
Loading

‎Email Signup Form/styles.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
body {
6+
font-family: sans-serif;
7+
background: #c4d7e0;
8+
min-height: 100vh;
9+
padding: 90px 0;
10+
box-sizing: border-box;
11+
}
12+
.newsletter {
13+
background: #3b5ca0;
14+
margin: 0 auto;
15+
text-align: center;
16+
max-width: 330px;
17+
padding: 50px 30px;
18+
border-radius: 15px;
19+
}
20+
.newsletter h1 {
21+
color: #fff;
22+
font-size: 25px;
23+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
24+
}
25+
.newsletter hr {
26+
width: 70px;
27+
height: 3px;
28+
margin: 30px auto;
29+
border: 0;
30+
background: rgba(255, 255, 255, 0.5);
31+
}
32+
.newsletter p {
33+
font-size: 18px;
34+
line-height: 24px;
35+
color: rgba(255, 255, 255, 0.8);
36+
margin-bottom: 30px;
37+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
38+
}
39+
.newsletter input {
40+
border-radius: 8px;
41+
background-color: rgba(0, 0, 0, 0.4);
42+
width: 100%;
43+
height: 55px;
44+
border: 0px;
45+
padding: 0 20px;
46+
color: rgba(255, 255, 255, 0.8);
47+
margin-bottom: 35px;
48+
outline: none;
49+
box-sizing: border-box;
50+
font-size: 16px;
51+
}
52+
::placeholder {
53+
color: rgba(255, 255, 255, 0.8);
54+
}
55+
.newsletter button {
56+
border: 1px solid rgba(255, 255, 255, 0.5);
57+
border-radius: 8px;
58+
height: 50px;
59+
background-color: transparent;
60+
color: #fff;
61+
padding: 0px 28px;
62+
cursor: pointer;
63+
transition: 0.5s;
64+
font-size: 16px;
65+
}
66+
.newsletter button:hover {
67+
background-color: #233760;
68+
border-color: #233760;
69+
}

‎Glassmorphism Profile Card/images/back.jpg

4.1 MB
Loading

‎Glassmorphism Profile Card/images/github.png

102 KB
Loading

‎Glassmorphism Profile Card/images/linkedin.png

59.7 KB
Loading

‎Glassmorphism Profile Card/images/profile.png

35.2 KB
Loading

‎Glassmorphism Profile Card/images/twitter.png

261 KB
Loading

‎Glassmorphism Profile Card/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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>Glassmorphism Profile Card</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="card" data-tilt>
12+
<img src="images/profile.png" alt="profile-img">
13+
<h2>Prashant Bhardwaj</h2>
14+
<p>I'm a Frontend Developer from India 😀</p>
15+
<div class="links">
16+
<a href="https://twitter.com/geekyprashant" target="_blank"><img src="images/twitter.png" alt="twitter"></a>
17+
<a href="https://github.com/geeky-prashant" target="_blank"><img src="images/github.png" alt="github"></a>
18+
<a href="https://www.linkedin.com/in/geekyprashant/" target="_blank"><img src="images/linkedin.png" alt="linkedIn"></a>
19+
</div>
20+
<a href="mailto:[email protected]" target="_blank" class="btn">Contact Me</a>
21+
</div>
22+
</div>
23+
<script src="vanilla-tilt.js"></script>
24+
</body>
25+
</html>

‎Glassmorphism Profile Card/readme-images/Glassmorphism-Profile-Card.png

282 KB
Loading

‎Glassmorphism Profile Card/styles.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
height: 100vh;
10+
background: url(images/back.jpg);
11+
background-position: center;
12+
background-size: cover;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
.card{
18+
width: 90%;
19+
max-width: 440px;
20+
color: #fff;
21+
text-align: center;
22+
padding: 50px 30px;
23+
border: 1px solid rgba(255, 255, 255, 0.3);
24+
background: rgba(255, 255, 255, 0.2);
25+
border-radius: 16px;
26+
box-shadow: 0 4px 30px rgb(0, 0, 0, 0.1);
27+
backdrop-filter: blur(5px);
28+
}
29+
.card img{
30+
width: 100px;
31+
}
32+
.card h2{
33+
font-size: 25px;
34+
font-weight: 600;
35+
margin-top: 20px;
36+
}
37+
.card p{
38+
font-size: 18px;
39+
margin: 5px auto;
40+
}
41+
.card .links img{
42+
width: 40px;
43+
border-radius: 50%;
44+
margin: 10px 5px;
45+
transition: background 0.5s;
46+
}
47+
.card .links img:hover{
48+
width: 40px;
49+
margin: 10px 5px;
50+
background: grey;
51+
}
52+
.btn{
53+
text-decoration: none;
54+
display: inline-block;
55+
font-size: 18px;
56+
font-weight: 500;
57+
background: #fff;
58+
color: #1B1B1B;
59+
padding: 10px 30px;
60+
border-radius: 30px;
61+
margin: 30px 0 10px;
62+
}
63+
.btn:hover{
64+
background: grey;
65+
border: 1px solid #fff;
66+
color: #fff;
67+
}

0 commit comments

Comments
 (0)