Skip to content

Commit c7e3afd

Browse files
harshita2216harshita2216
authored
Merge pull request #374 from perveen-neha/neon-light
neon-light website added
2 parents 7cfb929 + 98874d9 commit c7e3afd

File tree

7 files changed

+130
-0
lines changed

7 files changed

+130
-0
lines changed

‎Neon-Light/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Welcome 🖐 to Neon-Light based icons
2+
It is a simple and resonsive Website made using bootstrap.
3+
4+
## Desktop View
5+
![Default View](Neon-Light\image\ss1.png)
6+
![Default View](Neon-Light\image\ss2.png)
7+
![Default View](Neon-Light\image\ss3.png)
8+
![Default View](Neon-Light\image\ss4.png)
9+
10+
11+
## 💻Tech Stack
12+
<br>
13+
14+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
15+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
16+
17+
18+
<br>
19+
20+
### How to use:
21+
22+
---
23+
24+
- Download or clone the repository
25+
26+
```
27+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
28+
```
29+
30+
- Go to the directory
31+
- Run the index.html file
32+
33+
34+
<br>
35+
36+
## Coding is fun, So enjoy :)

‎Neon-Light/image/ss1.png‎

91.3 KB
Loading

‎Neon-Light/image/ss2.png‎

86.4 KB
Loading

‎Neon-Light/image/ss3.png‎

132 KB
Loading

‎Neon-Light/image/ss4.png‎

132 KB
Loading

‎Neon-Light/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Neon Effect</title>
8+
<script src="https://kit.fontawesome.com/4d52623277.js" crossorigin="anonymous"></script>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="icons">
13+
<i class="fab fa-facebook"></i>
14+
<i class="fab fa-whatsapp"></i>
15+
<i class="fab fa-instagram"></i>
16+
<i class="fab fa-twitter"></i>
17+
</div>
18+
</body>
19+
</html>

‎Neon-Light/style.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background: black;
8+
height: 100vh;
9+
width: 100%;
10+
display: flex;
11+
color: white;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
.fab {
16+
cursor: pointer;
17+
margin: 20px 70px;
18+
border-radius: 40%;
19+
padding: 10px 20px;
20+
/* border: 2px solid saddlebrown; */
21+
font-size: 100px;
22+
font-weight: lighter;
23+
transition: 0.5s ease-in;
24+
}
25+
.icons:hover i {
26+
opacity: 0.1;
27+
}
28+
.icons i:hover {
29+
opacity: 1;
30+
font-size: 150px;
31+
font-weight: 200;
32+
33+
}
34+
35+
.icons i:hover:nth-child(1) {
36+
background: rgb(20, 80, 211);
37+
box-shadow: 0 3px 30px 0 rgb(20, 80, 211) inset,
38+
0 3px 30px 0 rgb(20, 80, 211),
39+
0 3px 30px 0 rgb(20, 80, 211) inset,
40+
0 3px 30px 0 rgb(20, 80, 211);
41+
text-shadow: 0 0 5px rgb(20, 80, 211),
42+
0 0 5px rgb(20, 80, 211);
43+
44+
}
45+
.icons i:hover:nth-child(2) {
46+
background: rgb(52, 159, 25);
47+
box-shadow: 0 3px 30px 0 hsl(108, 73%, 36%) inset,
48+
0 3px 30px 0 hsl(108, 73%, 36%),
49+
0 3px 30px 0 hsl(108, 73%, 36%) inset,
50+
0 3px 30px 0 hsl(108, 73%, 36%);
51+
text-shadow: 0 0 5px hsl(108, 73%, 36%),
52+
0 0 5px hsl(108, 73%, 36%);
53+
54+
55+
}
56+
.icons i:hover:nth-child(3) {
57+
background: #c13584;
58+
box-shadow: 0 3px 30px 0 #c13584 inset,
59+
0 3px 30px 0 #c13584,
60+
0 3px 30px 0 #c13584 inset,
61+
0 3px 30px 0 #c13584;
62+
text-shadow: 0 0 5px #c13584,
63+
0 0 5px #c13584;
64+
65+
}
66+
.icons i:hover:nth-child(4) {
67+
background: rgb(82, 120, 201);
68+
box-shadow: 0 3px 30px 0 rgb(82, 120, 201) inset,
69+
0 3px 30px 0 rgb(82, 120, 201),
70+
0 3px 30px 0 rgb(82, 120, 201) inset,
71+
0 3px 30px 0 rgb(82, 120, 201);
72+
text-shadow: 0 0 5px rgb(82, 120, 201),
73+
0 0 5px rgb(82, 120, 201);
74+
}
75+

0 commit comments

Comments
 (0)