gridPan/index.html at main · akhil16pro/gridPan · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid pan</title>
    <link
      rel="stylesheet"
      href="./scss/main.css?ver=5.6.3"
      type="text/css"
      media="all"
    />
  </head>
  <body>
    <main>
      <h1>Grid Pan</h1>
      <section>
        <a href="#" class="gallery__item" alt="Joby">
          <img src="./images/a1.jpg" class="gallery__item-inner" />
        </a>
        <a class="gallery__item" alt="Priya">
          <img src="./images/a2.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Clara">
          <img src="./images/a3.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Akhil">
          <img src="./images/a4.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Jaison">
          <img src="./images/a5.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Jisna">
          <img src="./images/a6.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Honey">
          <img src="./images/a7.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Kiran">
          <img src="./images/a8.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Vipin">
          <img src="./images/a9.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Arun">
          <img src="./images/a10.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Alan">
          <img src="./images/a11.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Shamjas">
          <img src="./images/a12.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Jayan">
          <img src="./images/b1.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Nouphal">
          <img src="./images/b2.jpg" class="gallery__item-inner" />
        </a>
        <a href="#" class="gallery__item" alt="Shan">
          <img src="./images/b3.jpg" class="gallery__item-inner" />
        </a>
      </section>
    </main>

    <div class="credit">
      Image credits :
      <a href="https://tympanus.net/Development/GridFlowEffect/" target="_blank"
        >tympanus</a
      >
    </div>
  </body>
  <script src="./js/pan.js"></script>
  <script src="./js/title.js"></script>
</html>