-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (197 loc) · 10.5 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="de">
<head prefix="og: https://ogp.me/ns#">
<title>Profikoch</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Profikoch Website - Hier gibt es viele leckere Rezepte!" />
<meta name="keywords" content="Profikoch, Rezepte" />
<meta name="author" content="fab3F, TheKingsSergeant, Flylineo" />
<base href="https://profikoch.netlify.app" target="_self" />
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<script src="js/rechner.js" type="text/javascript" defer></script>
<link rel="icon" type="image/png" href="images/favicon.png" />
<meta property="og:title" content="Profikoch" />
<meta property="og:url" content="https://profikoch.netlify.app" />
<meta property="og:description" content="Profikoch Website - Hier gibt es viele leckere Rezepte!" />
<meta property="og:image" content="images/favicon.png" />
</head>
<body>
<!-- Neues HTML Element: Der Divider (div) kann dazu genutzt werden, die Website in verschiedene Abschnitte zu unterteilen und/oder Inhalte voneinander zu trennen
Das Element selbst ist nicht auf der Website sichtbar, außer es wird mit CSS z.B. eine Border hinzugefügt -->
<!-- Neues CSS Element: Padding und Margin sind für die Regulierung von Abständen zuständig. Padding bestimmt den Abstand innerhalb eines Elements zu seiner Border.
Margin bestimmt den Abstand eines Elements zum nächsten Element -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="#">
<img src="images/favicon.png" class="logo responsive" alt="Logo">
</a>
<a class="navbar-brand" href="#"><b>Profikoch</b></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="zwiebelkuchen">Zwiebelkuchen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kürbissuppe">Kürbissuppe</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chili-con-carne">Chili con Carne</a>
</li>
<li class="nav-item">
<a class="nav-link" href="truthahn">Truthahn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="lasagne">Lasagne</a>
</li>
<li class="nav-item">
<a class="nav-link" href="panna-cotta">Panna Cotta</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Bilderwechsel -->
<header>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('images/zwiebelkuchen2.jpg')">
<a href="zwiebelkuchen">
<div class="carousel-caption">
<h5>Zwiebelkuchen</h5>
<p>Herzhafter elsässischer Kuchen</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/kürbissuppe.jpg')">
<a href="kürbissuppe">
<div class="carousel-caption">
<h5>Kürbissuppe</h5>
<p>Cremiges Herbstgericht</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/chili-con-carne.jpeg')">
<a href="chili-con-carne">
<div class="carousel-caption">
<h5>Chili con Carne</h5>
<p>Scharfes Ragout aus Fleisch und Chilischoten</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/truthahn.jpg')">
<a href="truthahn">
<div class="carousel-caption">
<h5>Truthahn</h5>
<p>Thanksgiving-Klassiker aus den USA</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/lasagne.jpeg')">
<a href="lasagne">
<div class="carousel-caption">
<h5>Lasagne</h5>
<p>Italienisches Nudelgericht</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/panna-cotta.jpg')">
<a href="panna-cotta">
<div class="carousel-caption">
<h5>Panna Cotta</h5>
<p>Dessert mit mediterranem Flair</p>
</div>
</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorheriges</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächstes</span>
</button>
</div>
</header>
<!-- Content -->
<div class="background">
<section class="container content">
<h1>Profikoch</h1>
<h3>Vorspeisen</h3>
<div class="rezept">
<a href="zwiebelkuchen">
<img class="recipe_img responsive" src="images/zwiebelkuchen.jpg";>
</a>
<h4>Zwiebelkuchen</h4>
<p>Der Zwiebelkuchen ist ein herzhafter Kuchen, der nach seinem hauptsächlichen Belag, den Zwiebeln, benannt ist. Bekannt ist der Kuchen im süddeutschen, ostdeutschen und im schweizerischen Raum sowie im Elsass.</p>
<span><a href="zwiebelkuchen" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<div class="rezept">
<a href="kürbissuppe">
<img class="recipe_img responsive" src="images/kürbissuppe2.jpg";>
</a>
<h4>Kürbissuppe</h4>
<img onclick="window.open('404', '_self');" src="images/gluten-free-symbol.png" alt="Glutenfrei" style="width:30px;height:30px" class="icon mt-0 mx-1 responsive"><img onclick="window.open('404', '_self');" src="images/vegetarian-symbol.png" alt="Vegetarisch" style="width:30px;height:30px" class="icon mt-0 mx-1">
<p>Kürbissuppe ist eine meist gebundene Suppe mit Kürbis als Hauptzutat. In Varianten ist sie in vielen europäischen Ländern sowie den USA, anderen Teilen Amerikas und in Australien bekannt. </p>
<span><a href="kürbissuppe" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<h3 class="rezept">Hauptspeisen</h3>
<div class="rezept">
<a href="truthahn">
<img class="recipe_img responsive" src="images/truthahn2.jpg";>
</a>
<h4>Truthahn</h4>
<p>Seit 1941 feiert man Thanksgiving am vierten Donnerstag im November. Es gilt als das wichtigste Familienfest der Amerikaner, das man traditionell mit einem großen Festessen am Donnerstagabend begeht. Dabei kommt bei den meisten ein großer, gefüllter Truthahn als Braten auf den Tisch.</p>
<span><a href="truthahn" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<div class="rezept">
<a href="lasagne">
<img class="recipe_img responsive" src="images/lasagne2.jpg";>
</a>
<h4>Lasagne</h4>
<p>Lasagne, ganz klassisch - mit einer leckeren Hackfleisch-Bolognese und hausgemachter Béchamelsoße. Ein Rezept zum Verlieben! Übrigens: Das Wort „lasagna“ wird vom griechischen „lasanon“ abgeleitet, das schlicht Nachttopf bedeutet. Später machten die Römer daraus „lasanum“, den Kochtopf. Die Lasagne verdankt ihren Namen also jeweils dem Gefäß, in dem sie zubereitet wurde. </p>
<span><a href="lasagne" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<div class="rezept">
<a href="chili-con-carne">
<img class="recipe_img responsive" src="images/chili-con-carne2.jpg";>
</a>
<h4>Chili con Carne</h4>
<img onclick="window.open('404', '_self');" src="images/gluten-free-symbol.png" alt="Glutenfrei" style="width:30px;height:30px" class="icon mt-0 mx-1 responsive">
<p>Chili con Carne, oft kurz auch nur Chili ist die Bezeichnung eines scharfen Ragouts aus Fleisch und Chilischoten. Der Name des Gerichts bedeutet wörtlich Pfefferschoten mit Fleisch. Es ist ein typisches Gericht im Süden von Texas und heute in den gesamten Vereinigten Staaten von Amerika sowie in anderen Teilen der Welt bekannt.</p>
<span><a href="chili-con-carne" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<h3 class="rezept">Desserts</h3>
<div class="rezept">
<a href="panna-cotta">
<img class="recipe_img responsive" src="images/panna-cotta2.jpg";>
</a>
<h4>Panna Cotta</h4>
<img onclick="window.open('404', '_self');" src="images/gluten-free-symbol.png" alt="Glutenfrei" style="width:30px;height:30px" class="icon mt-0 mx-1">
<img onclick="window.open('404', '_self');" src="images/vegetarian-symbol.png" alt="Vegetarisch" style="width:30px;height:30px" class="icon mt-0 mx-1">
<p>Panna cotta ist ein puddingartiges italienisches Dessert, das aus Rahm bzw. Schlagsahne, Zucker und heutzutage meist auch Gelatine zubereitet wird. Traditionell wird lediglich die Sahne aufgekocht und reduziert, daher auch der Name.</p>
<span><a href="panna-cotta" class="rezeptlink">Hier geht es zum Rezept!</a></span>
</div>
<div class="rezept"></div>
</section>
</div>
</body>
</html>