applecom-banner/index.html at master · magicnode/applecom-banner · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Apple</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/banner.css">
</head>

<body>
    <main>
      <div class="homepage">
          <nav class="arrownav-cricle">
              <ul>
                  <li>
                      <button class="arrownav-arrow arrownav-arrow-previous" id="previous"><span class="arrow-icon arrow-icon-previous"></span></button>
                  </li>
                  <li>
                      <button class="arrownav-arrow arrownav-arrow-next" id="next"><span class="arrow-icon arrow-icon-next"></span></button>
                  </li>
              </ul>
          </nav>
          <nav class="dashnav dot-nav">
              <ul>
                  <li>
                      <a href="#" class="dashnav-item">
                          <div class="dashnav-dash"><span class="dashnav-progress"></span></div>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="dashnav-item">
                          <div class="dashnav-dash"><span class="dashnav-progress"></span></div>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="dashnav-item">
                          <div class="dashnav-dash"><span class="dashnav-progress"></span></div>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="dashnav-item">
                          <div class="dashnav-dash"><span class="dashnav-progress"></span></div>
                      </a>
                  </li>
              </ul>
          </nav>
          <div class="banner-wrapper">
              <a href="#" class="banner-item banner-item-iphone">
                  <div class="banner-image banner-image-iphone"></div>
              </a>
              <a href="#" class="banner-item banner-item-watch">
                  <div class="banner-image banner-image-watch"></div>
              </a>
              <a href="#" class="banner-item banner-item-airpods">
                  <div class="banner-image banner-image-airpods"></div>
              </a>
              <a href="#" class="banner-item banner-item-event">
                  <div class="banner-image banner-image-event"></div>
              </a>
          </div>
      </div>
    </main>
    <h1>apple banner demo by windy :)</h1>
    <script src="js/banner.js"></script>
</body>

</html>