ShuffleAndSort/index.html at master · aldunchev/ShuffleAndSort · 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
<html>
<head>
  <link rel="stylesheet" href="assets/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Aleksandar Dunchev">
  <title>Shuffle and Sort</title>
</head>
<body>
  <header class="main-header">
    <div class="container">
      <h1 class="header-title">Shuffle and Sort</h1>
    </div>
  </header>

  <div class="main-content container clearfix">
    <div class="row">
      <div class="buttons-container col-md-4-off">
        <button id="shuffleBtn" class="btn shuffle">Shuffle</button>
        <button id="sortBtn" class="btn sort">Sort</button>
        <button id="reverseBtn" class="btn reverse">Reverse</button>
      </div>

      <ul id="itemList" class="item-list col-md-8-off clearfix">
        <li id="item-1" class="item bg-blue-grey col-md-4">
          <div class="item-inner">
            <span class="item-text">1</span>
          </div>
        </li>
        <li id="item-2" class="item bg-blue col-md-4">
          <div class="item-inner">
            <span class="item-text">2</span>
          </div>
        </li>
        <li id="item-3" class="item bg-dark-blue col-md-4">
          <div class="item-inner">
            <span class="item-text">3</span>
          </div>
        </li>
        <li id="item-4" class="item bg-blue col-md-4">
          <div class="item-inner">
            <span class="item-text">4</span>
          </div>
        </li>
        <li id="item-5" class="item bg-dark-blue col-md-4">
          <div class="item-inner">
            <span class="item-text">5</span>
          </div>
        </li>
        <li id="item-6" class="item bg-grey col-md-4">
          <div class="item-inner">
            <span class="item-text">6</span>
          </div>
        </li>
        <li id="item-7" class="item bg-grey col-md-4">
          <div class="item-inner">
            <span class="item-text">7</span>
          </div>
        </li>
        <li id="item-8" class="item bg-blue-grey col-md-4">
          <div class="item-inner">
            <span class="item-text">8</span>
          </div>
        </li>
        <li id="item-9" class="item bg-dark-blue col-md-4">
          <div class="item-inner">
            <span class="item-text">9</span>
          </div>
        </li>
      </ul>
    </div>
  </div><!-- end main-content-->
  <footer class="main-footer">
    <div class="container">
      <p class="authored">Shuffle and sort by <cite>Aleksandar Dunchev<cite></p>
    </div>
  </footer>
  <script src="assets/script.js"></script>
</body>
</html>