-
Notifications
You must be signed in to change notification settings - Fork 0
/
das-cafe.html
115 lines (108 loc) · 4.97 KB
/
das-cafe.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Das Café</title>
<link rel="stylesheet" href="/css/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<header class="header-das-cafe">
<div class="header__logo-box">
<img src="img/Logo.svg" alt="Logo" class="header__logo">
</div>
<!--
<div class="header__menu-box">
<a href="navi.html"> <img src="img/Burger Menu.svg" alt="Menu" class="header__menu"> </a>
</div>
-->
<!-- Entweder schaust du dir das Tutorial nochmal an oder du codest was anderes -->
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for ="navi-toggle" class="navigation__button">
<a href="navi.html"> <img src="img/Burger Menu.svg" alt="Menu" class="header__menu"> </a>
</label>
<div class ="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"> <a href="das-cafe.html" class="navigation__link heading-tertiary"> Das Cafe </a> </li>
<li class="navigation__item"> <a href="die-herkunft.html" class="navigation__link heading-tertiary"> Herkunft </a> </li>
<li class="navigation__item"> <a href="#" class="navigation__link heading-tertiary"> Shop </a> </li>
</ul>
</nav>
</div>
</header>
<body>
<section class="section-roesterei">
<div class="u-margin-top-big u-margin-bottom-small">
<h2 class="heading-secondary"> Rösterei & Café </h2>
</div>
<p class="u-margin-bottom-small">
Kaffee aus Kiel, direkt gehandelt und geröstet in der eigenen Rösterei, serviert im gemütlichen Café in der Innenstadt.
</p>
<div class="flex-container-text u-margin-bottom-big">
<p class="flex-item">Komm uns besuchen! <br> Fraunhofer Str. 13, Kiel</p>
<p class="flex-item"> Mo – Fr 8–18 Uhr <br> Sa 11–18 Uhr</p>
</div>
<div class="flex-left u-margin-bottom-big"> <!-- keine class? -->
<img src="img/FEND-Coffee-machine-2.png" alt="coffe shop" class="image">
<!-- image muss hier in klasse vorkommen, damit eigenschaften von image angewandt werden-->
</div>
<div class="u-margin-top-big u-margin-bottom-big">
<h3 class="heading-tertiary"> Frisches Gebäck von nebenan </h3>
<p class="u-margin-bottom-small"> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf.
Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort.
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles,
was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. </p>
</div>
</section>
<section class="gallery">
<div class="gallery-flexbox">
<img class="gallery__short-img" src="img/FEND-danish 1.png">
<img class="gallery__short-img" src="img/FEND-coffee-machine.png">
<img class="gallery__long-img" src="img/FEND-Coffee-latte-art.png">
<img class="gallery__long-img" src="img/FEND-Coffee-sign.png">
<img class="gallery__long-img" src="img/FEND-Coffee-latte-art-2.png">
<img class="gallery__short-img" src="img/FEND-coffee-breakfast 1.png">
<img class="gallery__long-img" src="img/FEND-coffee-list.png">
<img class="gallery__short-img" src="img/FEND-Coffee-latte-art-3.png">
</div>
</section>
</body>
<section class="section-map">
<div class=" u-margin-top-big u-margin-bottom-small">
<h2 class="heading-secondary"> Komm vorbei</h2>
</div>
<img src="img/Map.png" alt="map" class="image-map">
</section>
<footer class="footer">
<div class="grid-footer-container">
<div class="grid-footer-item footer-logo-item">
<div class="footer__logo-box">
<img src="img/Logo.svg" alt="Logo" class="footer__logo">
</div>
<div class="footer__text-box">
<h3 class="heading-tertiary">
<span class="heading-tertiary--main"> Rustica </span>
<span class="heading-tertiary--sub"> Café & Rösterei </span>
</h3>
</div>
</div>
<div class="grid-footer-item">
Komm uns besuchen! <br> Fraunhofer Str. 13, Kiel
</div>
<div class="grid-footer-item">
Mo – Fr 8–18 Uhr <br> Sa 11–18 Uhr
</div>
<div class="grid-footer-item">
Impressum <br> Datenschutz
</div>
<div class="grid-footer-item">
Café <br>
Shop <br>
Herkunft
</div>
</div>
</footer>
</html>