-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (60 loc) · 4.72 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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a2ae6297fc.js" crossorigin="anonymous"></script>
<title>Gallary</title>
</head>
<body data-nav="false" id="B">
<main id="0">
<div class="main-col">
<img class="main-col-image" src="https://images.unsplash.com/photo-1523964517238-b505d09dc571?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1536566320732-ccc210d75500?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1533134663120-ec7e68d56494?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
</div>
<div class="main-col lo">
<img class="main-col-image" src="https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1627672360124-4ed09583e14c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1618336753974-aae8e04506aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
</div>
<div class="main-col">
<img class="main-col-image" src="https://images.unsplash.com/photo-1542379653-b928db1b4956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1542480118439-cbba7870f6f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1542480118439-cbba7870f6f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"/>
</div>
<div class="main-col lo">
<img class="main-col-image" src="https://images.unsplash.com/photo-1602491453631-e2a5ad90a131?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1668355127376-91b48ed7ee7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"/>
<img class="main-col-image" src="https://images.unsplash.com/photo-1668503714845-e5d67cc94f05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=681&q=80"/>
</div>
</main>
<nav>
<div id="nav-links">
<a class="nav-link" href="/index.html">
<h2 class="nav-link-label rubik-font">Home</h2>
<img class="nav-link-image" src="https://images.unsplash.com/photo-1666091863721-54331a5db52d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
</a>
<a class="nav-link" href="/work.html">
<h2 class="nav-link-label rubik-font">Work</h2>
<img class="nav-link-image" src="https://images.unsplash.com/photo-1666055642230-1595470b98fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=995&q=80" />
</a>
<a class="nav-link" href="/about.html">
<h2 class="nav-link-label rubik-font">About</h2>
<img class="nav-link-image" src="https://images.unsplash.com/photo-1666005487638-61f45819c975?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
</a>
<a class="nav-link" href="#">
<h2 class="nav-link-label rubik-font">Contact</h2>
<img class="nav-link-image" src="https://images.unsplash.com/photo-1665910407771-bc84ad45676b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80" />
</a>
<a class="nav-link" href="#">
<h2 class="nav-link-label rubik-font">Join Us</h2>
<img class="nav-link-image" src="https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
</a>
</div>
</nav>
<button id="nav-toggle" type="button" onclick="toggleNav()">
<i class="fa-solid fa-bars " id="menu"></i>
<i class="fa-solid fa-xmark cross" id="close"></i>
</button>
<script src="index.js"></script>
</body>
</html>