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

Lines changed: 22 additions & 0 deletions
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

Lines changed: 54 additions & 0 deletions
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

Lines changed: 24 additions & 0 deletions
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

Lines changed: 69 additions & 0 deletions
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

0 commit comments

Comments
 (0)