kakkulaari/index.html at main · joohei/kakkulaari · 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
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="fi">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Kakkulaari - Kauniita ja hyvänmakuisia erikoiskakkuja Espoosta. Inspiroivia kakkuideoita ja leivontaa.">
  <link rel="stylesheet" href="style.css">
  <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=Cookie&family=Inter:wght@400;500;600&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
  <title>kakkulaari | Etusivu</title>
</head>

<body>

  <nav>
    <div class="container">
      <h1>kakkulaari</h1>

      <div class="menu">
        <a class="is-active" href="index.html">etusivu</a>
        <a href="gallery.html">galleria</a>
        <a href="about.html">tarina</a>
      </div>

      <button class="hamburger" aria-label="Avaa valikko">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </nav>

  <nav class="mobile-nav">
    <a class="is-active" href="index.html">etusivu</a>
    <a href="gallery.html">galleria</a>
    <a href="about.html">tarina</a>
  </nav>

  <main class="content front-page">

    <div class="welcome">
      <p class="welcome-text">Tervetuloa nettisivuilleni! Täällä voit katsella leivonnaisiani ja hakea inspiraatiota omiisi.</p>
    </div>

    <div class="intro">
      <h2>Kakkufilosofiani</h2>

      <div class="wrapper flower">
        <img src="/photos/flower.webp" alt="Sokerimassakukin koristeltu suklaakakku" class="img-flower">
        <article class="img-info">
          <p class="quote">
            "Kakun tulee olla herkullista ja kahvipöydän keskipiste"
          </p>
          <p>
            Tätä sokerimassakukin koristeltua suklaakakkua nautittiin mieheni äidin syntymäpäivillä.
          </p>
        </article>
      </div>

      <div class="wrapper bin">
        <img src="/photos/bin.webp" alt="Kukkalaatikkokakku" class="img-bin">
        <article class="img-info">
          <p class="quote">
            "Kakku ei saa näyttää kakulta ja kaiken kakussa tulisi olla syötävää"
          </p>
          <p>
            Kakku on tehty kesäiseen kahvipöytään. Kukkalaatikko on sokerimassaa ja multa suklaakakkua. Koristeina on yrttejä ja syötäviä luonnonkukkia suoraan mökkipihasta.
          </p>
        </article>
      </div>

      <div class="wrapper cheese">
        <img src="/photos/cheese.webp" alt="Leikkuulautakakku juustoineen" class="img-cheese">
        <article class="img-info">
          <p class="quote">
            "Kakun tulisi olla hauska ja yllättävä"
          </p>
          <p>
            Tämä leikkuulauta juustoineen on vaaleaa kakkua lakkatäytteellä. Tässäkin kakussa kaikki on syötävää, myös leikkuulauta.
          </p>
        </article>
      </div>

      <div class="wrapper cat">
        <img src="/photos/cat.webp" alt="Kissakakku" class="img-cat">
        <article class="img-info">
          <p class="quote">
            "Ei niin pientä juhlaa, etteikö voi leipoa kakkua"
          </p>
          <p>
            Tällä läpeensä suklaisella kakulla juhlistettiin Molla-kissamme syntymäpäivää.
          </p>
        </article>
      </div>

    </div>

    <div class="wrapper ig">
      <h2>Uusimmat julkaisuni</h2>

      <!-- moved the widget out of .img-content so it won't affect column layout -->
      <div class="ig-widget">
        <h4>Instagram</h4>
        <a href="https://www.instagram.com/kakkulaari" target="_blank" rel="noopener noreferrer">
          @kakkulaari
          <img src="/photos/instagram.webp" alt="Instagram">
        </a>
      </div>

      <article class="img-content">
        <!-- posts will be appended here by scripts/recent.js -->
      </article>

      <script src="scripts/recent.js"></script>
    </div>

  </main>


  <footer>
    <p>© 2026 Päivi Heimonen</p>
  </footer>

  <script src="scripts/hamburger.js"></script>
</body>

</html>