star-wars-slider/index.html at master · david-portilla/star-wars-slider · 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
108
109
110
111
112
113
114
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="owner" content="David Portilla">
  <meta name="robots" content="index, follow">
  <meta name="distribution" content="Global" />
  <meta name="Search Engines" content="all" />
  <meta name="description" content="Vanilla JS Slider using Star Wars API">
  <title>Star Wars Slider</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="dist/index.css" />
  <link rel="icon" type="image/png" href="favicon.ico">

  <!-- Structured Data JSON-LD -->
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",

      "email": "mailto:hello@davidportilla.com",
      "image": "https://davidportilla.com/wp-content/uploads/2018/09/davidportilla.png",
      "jobTitle": "Vanilla JS Slider using Star Wars API",
      "name": "David Portilla",
      "telephone": "+57-304-377-6321",
      "url": "https://davidportilla.com/",
	     "sameAs": [
        "https://www.facebook.com/david.dmi",
        "https://www.instagram.com/david_portilla/",
        "https://www.linkedin.com/in/davidportilla/",
        "https://twitter.com/david_portilla"
      ]
    }
    </script>
</head>

<body>
  <header class="c-brand">
    <div class="c-brand__logo"></div>

    <nav class="c-brand__controls" aria-label="slider control">
      <div class="c-select">
        <div class="c-select__custom">
          <button class="c-select__trigger">
            <p class="c-select__trigger-text">Vehicles</p>
            <div class="c-select__trigger-icon"></div>
          </button>
          <div class="c-select__options">
            <span class="c-select__options-custom selected" data-value="vehicles">Vehicles</span>
            <span class="c-select__options-custom" data-value="starships">Starships</span>
          </div>
        </div>
      </div>
      <!-- custom-select -->
    </nav>
    <!-- c-brand__controls -->

    <div class="c-brand__hire">
      <a href="mailto:hello@davidportilla.com" class="c-brand__hire-link" href="/">hire developer</a>
    </div>
    <!-- c-brand__hire -->
  </header>
  <!-- c-brand -->

  <main id="main-navigation">
    <div class="c-slider">

      <div class="c-slider__container" id="sliderContainer">
        <div class="c-slider__list" id="listContainer">
          <!-- add content slide here -->

        </div>
        <!-- c-slider__list -->
      </div>
      <!-- c-slider__container -->

      <div class="c-slider__controls">
        <button id="js-prev" class="c-slider__btn c-slider__btn--prev">
          <div class="c-slider__btn-arrow"></div>
          <span class="u-sronly">Go to previous slide</span>
        </button>
        <button id="js-next" class="c-slider__btn">
          <div class="c-slider__btn-arrow"></div>
          <span class="u-sronly">Go to next slide</span>
        </button>
      </div>
      <!-- c-slider__controls -->

    </div>
    <!-- c-slider -->

    <div class="c-background">
      <div class="c-background__img"></div>
      <div class="c-background__pattern">
        <div class="c-background__pattern-bottom"></div>
        <div class="c-background__pattern-right"></div>
      </div>
    </div>
    <!-- c-background -->

    <div id="loading" class="c-loading show">
      <div class="c-loading__ball"></div>
      <div class="c-loading__ball"></div>
      <div class="c-loading__ball"></div>
    </div>
    <!-- loading -->

  </main>
  <script type="module" src="dist/index.js"></script>
</body>

</html>