sort/index.html at master · dgc-source/sort · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sandbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="grid">
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1493311532826-91f3915a3c6e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3da3872af59c469be8221d933ae6804b&auto=format&fit=crop&w=500&q=60" alt="Disc Golf"></a>
        <p>Rock On</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1482227315428-5d13b43f7f15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=30d544fc4db73f85dc42b69bf2133f1a&auto=format&fit=crop&w=1350&q=80" alt="Backpack"></a>
      <p>Backpack</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1455719103652-8c015f564e2b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=361cd2dc22efed1c4f8149b1dfff409e&auto=format&fit=crop&w=1489&q=80" alt="Bike"></a>
        <p>Bike</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1496425745709-5f9297566b46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b084690f83c5e63fafd161f8bc729a1f&auto=format&fit=crop&w=500&q=60" alt="Camp"></a>
        <p>Zebra</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1496425745709-5f9297566b46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b084690f83c5e63fafd161f8bc729a1f&auto=format&fit=crop&w=500&q=60" alt="Camp"></a>
        <p>Camp</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1510256506868-484d0db06ee2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4a4c9217eb851c87a783c619dcc98a1&auto=format&fit=crop&w=500&q=60" alt="Cave"></a>
        <p>Cave</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1493311532826-91f3915a3c6e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3da3872af59c469be8221d933ae6804b&auto=format&fit=crop&w=500&q=60" alt="Disc Golf"></a>
        <p>Cool Cats</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1503540130927-f730a045483b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=68c88b9694e91e42fc567ec70897b87d&auto=format&fit=crop&w=500&q=60" alt="Climb"></a>
        <p>Climb</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1496425745709-5f9297566b46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b084690f83c5e63fafd161f8bc729a1f&auto=format&fit=crop&w=500&q=60" alt="Camp"></a>
        <p>Violin</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1493311532826-91f3915a3c6e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3da3872af59c469be8221d933ae6804b&auto=format&fit=crop&w=500&q=60" alt="Disc Golf"></a>
        <p>Disc Golf</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1507591663-7404901fc7b9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=948342fb131422096f728dc0c8c6b50a&auto=format&fit=crop&w=500&q=60" alt="Fly"></a>
        <p>Fly</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1481140717212-b0124736c90a?ixlib=rb-0.3.5&s=141a0f6eeecd5ec19c4987266116fdd3&auto=format&fit=crop&w=500&q=60" alt="Hunt"></a>
        <p>SCUBA Diving</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1505232070786-2f46d15f9f5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8d0b72c290cbac7926edb604b1f40793&auto=format&fit=crop&w=1529&q=80" alt="Hike"></a>
        <p>Hike</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1481140717212-b0124736c90a?ixlib=rb-0.3.5&s=141a0f6eeecd5ec19c4987266116fdd3&auto=format&fit=crop&w=500&q=60" alt="Hunt"></a>
        <p>Hunt</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1493311532826-91f3915a3c6e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3da3872af59c469be8221d933ae6804b&auto=format&fit=crop&w=500&q=60" alt="Disc Golf"></a>
        <p>Interns Rock</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1450500392544-c2cb0fd6e3b8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d349573abd263c327d8bec84f825ebb0&auto=format&fit=crop&w=500&q=60" alt="Paddle"></a>
        <p>Paddle</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1486739985386-d4fae04ca6f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1e369b979c594a5e9d2fa5c0d58d91f6&auto=format&fit=crop&w=500&q=60" alt="Run"></a>
        <p>Run</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1496425745709-5f9297566b46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b084690f83c5e63fafd161f8bc729a1f&auto=format&fit=crop&w=500&q=60" alt="Camp"></a>
        <p>Apple</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1517344687790-7338f238f7f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60cbef02eb928db2f4ba8474f972cdb8&auto=format&fit=crop&w=500&q=60" alt="Skeet"></a>
        <p>Skeet</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1493311532826-91f3915a3c6e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3da3872af59c469be8221d933ae6804b&auto=format&fit=crop&w=500&q=60" alt="Disc Golf"></a>
        <p>Adam</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1450500392544-c2cb0fd6e3b8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d349573abd263c327d8bec84f825ebb0&auto=format&fit=crop&w=500&q=60" alt="Paddle"></a>
        <p>Angel</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1450500392544-c2cb0fd6e3b8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d349573abd263c327d8bec84f825ebb0&auto=format&fit=crop&w=500&q=60" alt="Paddle"></a>
        <p>Cuddle</p>
    </div>
    <div class="item">
      <a href="#"><img src="https://images.unsplash.com/photo-1450500392544-c2cb0fd6e3b8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d349573abd263c327d8bec84f825ebb0&auto=format&fit=crop&w=500&q=60" alt="Paddle"></a>
        <p>Fun</p>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>