image-carousel/index.html at main · farmanwebdev/image-carousel · 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
115
116
117
118
<html>
    <head>
        <title>navbar</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <nav class="nav">
          <a href="/" class="logo">F$joo</a>

          <div class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>

          <div class="nav__link hide">
            <a href="#">home</a>
            <a href="#">about</a>
            <a href="#">contact</a>
            <a href="#">blog</a>
            <a href="#">more info</a>
          </div>
        </nav>
      </header>
      <!-- ddd -->
        <input type="radio" id="image1" name="image" checked>
<input type="radio" id="image2" name="image">
<input type="radio" id="image3" name="image">

<div class="container">
  <div class="featured-wrapper">
    <ul class="featured-list">
      <li>
        <figure>
          <img src="imges/1.jpg" alt="">
          <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature4.jpg" alt=""> -->
        </figure>
      </li>
      <li>
        <figure>
          <img src="imges/2.jpg" alt="">
          <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature11.jpg" alt=""> -->
        </figure>
      </li>
      <li>
        <figure>
          <img src="imges/3.jpg" alt="">
          <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature6.jpg" alt=""> -->
        </figure>
      </li>
    </ul>
    <ul class="arrows">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
    <ul class="dots">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
  </div>
  <ul class="thumb-list">
    <li>
      <label for="image1">
        <img src="imges/1.jpg" alt="">
        <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature4.jpg" alt=""> -->
        <span class="outer">
          <span class="inner">Caption1</span>
        </span>
      </label>
    </li>
    <li>
      <label for="image2">
        <img src="imges/2.jpg" alt="">
        <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature11.jpg" alt=""> -->
        <span class="outer">
          <span class="inner">Caption2</span>
        </span>
      </label>
    </li>
    <li>
      <label for="image3">
        <img src="imges/3.jpg" alt="">
        <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature6.jpg" alt=""> -->
        <span class="outer">
          <span class="inner">Caption3</span>
        </span>
      </label>
    </li>
  </ul>
</div>

<footer class="page-footer">
  <small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">Farman Joo</a>
  </small>
</footer>


        <script src="main.js"></script>
    </body>
</html>