-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
95 lines (91 loc) · 3.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--- Don't forget to add this meta tag otherwise your design won't responsive ---->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Image Lightbox | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="heading">Hack2skill Gallery</div>
<div class="wrapper">
<div class="gallery">
<div class="image">
<span><img src="./images/halloween.jpg" alt="" /></span>
</div>
<div class="image">
<span><img src="./images/Hack2Skill.jpeg" alt="" /></span>
</div>
<div class="image">
<span><img src="./images/img7.jpg" alt="" /></span>
</div>
<div class="image">
<span><img src="./images/drakula.png" alt="" /></span>
</div>
<div class="image">
<span class="firstphoto"><img src="images/18828.jpg" alt=""></span>
</div>
<div class="image">
<span class="secondphoto"><img src="images/18976.jpg" alt=""></span>
</div>
<div class="image">
<span><img src="images/img-10.png" alt=""></span>
</div>
<div class="image">
<span><img src="images/laptop.jpg" alt=""></span>
</div>
<div class="image">
<span><img src="images/h2s.jpg" alt=""></span>
</div>
<div class="image">
<span><img src="images/boys.jpg" alt=""></span>
</div>
<div class="image">
<span><img src="images/peeps.jpg" alt=""></span>
</div>
<div class="image"><span><img src="W3.jpg" alt=""></span></div>
<div class="image"><span><img src="W4.jpg" alt=""></span></div>
<div class="image"><span><img src="W5.jpg" alt=""></span></div>
<div class="image"><span><img src="W1.jpg" alt=""></span></div>
<div class="image"><span><img src="W2.jpg" alt=""></span></div>
<div class="image"><span><img src="W6.jpg" alt=""></span></div>
</div>
</div>
<div class="preview-box">
<div class="details">
<span class="title"
>Image
<p class="current-img"></p>
of
<p class="total-img"></p
></span>
<span class="icon fas fa-times"></span>
</div>
<div class="image-box">
<div class="slide prev"><i class="fas fa-angle-left"></i></div>
<div class="slide next"><i class="fas fa-angle-right"></i></div>
<img src="" alt="" />
</div>
</div>
<div class="image-box">
<div class="slide prev"><i class="fas fa-angle-left"></i></div>
<div class="slide next"><i class="fas fa-angle-right"></i></div>
<img src="./img-1.jpg" alt="" style="width: 80px; height: 80px;" class="image-box">
</div>
</div>
<div class="shadow"></div>
<h1>Follow us</h1>
<div class="Social-media">
<a href="https://github.com/hack2skill"><font color="#007cc4"><i class="fab fa-github"></i></font></a>
<a href="https://www.linkedin.com/company/hack2skill/"><font color="#007cc4"><i class="fab fa-linkedin"></i></font></a>
<a href="https://www.instagram.com/hack2skill/?hl=en"><font color="#007cc4"><i class="fab fa-instagram"></i></font></a>
<a href="https://www.youtube.com/c/Hack2skill?app=desktop"><font color="#007cc4"><i class="fab fa-youtube"></i></a></font>
<a href="https://twitter.com/hack2skill"><font color="#007cc4"><i class="fab fa-twitter"></i></a></font>
</div>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>