bootstrap/index.header.partial.html at main · Halupaaa/bootstrap · 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
<header id="home" class="header">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#">Stickerz</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#header-nav" aria-controls="header-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="header-nav">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Products</a>
          <a class="nav-link" href="#">Contacts</a>
          <a class="nav-link" href="#">Cart</a>
        </div>
      </div>
    </div>
  </nav>
  <div id="products-carousel" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#products-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#products-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#products-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#products-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/baby-yoda.svg" class="d-block w-50 mx-auto" alt="baby-yoda">
      </div>
      <div class="carousel-item">
        <img src="img/banana.svg" class="d-block w-50 mx-auto" alt="banana">
      </div>
      <div class="carousel-item">
        <img src="img/girl.svg" class="d-block w-50 mx-auto" alt="girl">
      </div>
      <div class="carousel-item">
        <img src="img/viking.svg" class="d-block w-50 mx-auto" alt="viking">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#products-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#products-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</header>