Autobunker/index.html at main · Matheus-OAMK/Autobunker · 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
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" href="./img/favicon_64.png" />
    <link rel="apple-touch-icon" href="./img/apple_touch_icon.png" />
    <link rel="manifest" href="./manifest.webmanifest" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />

    <script defer src="./js/index.js"></script>
    <title>Autobunker</title>
  </head>

  <body>
    <div class="inner-header">
      <div class="grid-box">
        <a href="./contacts.html" class="hero-contacts">Yhteystiedot</a>
      </div>
    </div>
    <header class="hero">
      <div class="hero-center">
        <img
          class="hero-logo"
          src="./img/logo_scaled.webp"
          alt="Autobunker logo"
        />
        <span class="hero-slogan">LAAJA HUOLTO</span>
      </div>
      <a href="#services" class="hero-services-cta"
        >PALVELUT
        <div class="hero-down-arrow"></div>
      </a>
    </header>

    <section class="services" id="services">
      <template data-card-template>
        <div class="card" onclick="cardRotate(this)">
          <!-- NOTE: attention to style tag!!! Image of the service is set as a background image, example: style="background-image: url(./img/front/card_1.webp)" -->
          <div
            class="card__side card__side--front"
            card-data-front-image
            style="background-image: url()"
          >
            <span class="service-name" card-data-service-name></span>
            <div class="card__cta">
              <div class="btn-flip">
                <ion-icon name="sync-outline" class="flip-icon"></ion-icon>
              </div>
            </div>
          </div>
          <!-- NOTE: attention to style tag!!! Image of the service is set as a background image, example: style="background-image: url(./img/back/card_1.webp)" -->
          <div
            class="card__side card__side--back"
            card-data-back-image
            style="background-image: url()"
          >
            <ul class="subservices-list" card-data-subservices-list>
              <!-- HERE ARE JUST LIST ELEMENTS: <li>subservice name</li> -->
            </ul>
            <div class="card__cta">
              <div class="btn-flip">
                <ion-icon name="sync-outline" class="flip-icon"></ion-icon>
              </div>
            </div>
          </div>
        </div>
      </template>
    </section>

    <div class="footer">
      <div class="footer_small-grid-box">
        <a href="https://www.instagram.com/autobunker.fi" target="_blank"
          ><ion-icon name="logo-instagram" class="logo-footer"></ion-icon>
        </a>
      </div>
      <div class="footer_small-grid-box">
        <a href="tel:+358465256617" target="_blank">
          <ion-icon name="call" class="logo-footer"></ion-icon>
        </a>
      </div>
      <div class="footer_small-grid-box">
        <a href="mailto:Autobunkerfi@gmail.com" target="_blank">
          <ion-icon name="mail" class="logo-footer"></ion-icon>
        </a>
      </div>
      <div class="footer_big-grid-box">
        <div class="copyright-box">
          <span class="footer_copyright">Copyright ©</span>
          <img
            class="footer_rulers-logo"
            src="./img/rulers-logo.png"
            alt="rulers-logo"
          />
        </div>
      </div>
    </div>
    <script>
      // FUNCTION TO ROTATE CARDS
      function cardRotate(el) {
        el.classList.toggle(`rotated`);
      }
    </script>
  </body>
</html>