Food trends
- 4. <head>
<meta charset="UTF-8">
<link href="design.css" type="text/css" rel="stylesheet">
<title>food-trends</title>
</head>
<body>
<div id="head"></div>
<div id="underline"></div>
<div id="menu">
<ul><li><a href="home.html">Home</a></li>
<li><a href="rezepte.html">Rezepte</a>
<li><a href="ycyxc">Videos</a></li>
<li><a href=„galerie.html">Galerie</a></li>
<li><a href="kontakt.html">Kontakt</a></li></ul>
</div>
<div id="content"></div>
<div id="foot">
</div>
</body>
- 6. <head>
<a href=“galerie.css”
type=“text/css” rel=“stylesheet>
#container{
margin:50px auto;
width:620px;
height:600px;
background:#000;
border-radius:10px;
padding-top:10px;
box-shadow:3px 3px 10px
rgba(0,0,0,0.8);
#window{
width:600px;
height: 500px;
overflow:hidden;
margin:0 10px;}
#all{
width:6000px;
-moz-transition:1s;
-webkit-transition:1s;
-o-transition:1s;
transition:1s;}
#all div{
float:left;
width:580px;
padding:10px;}
#all img.ls{
display:block;
width:580px;
margin:0 auto;}
#all img.pt{
display:block;
height:390px;
margin:0 auto;}
#container ul{
list-style:none;
margin:0 0 0 10px;
padding:0;}
#container li{
margin:0;
padding:0;
float:left;}
- 7. #container a{
display:block;
text-decoration:none;
width:50px;
padding:5px;
margin:10px 0 0 0;
border-radius:3px;
-moz-transition:1s;
-webkit-transition:1s;
-o-transition:1s;
transition:1s;}
#container a:hover{
background:#0f0;}
#container a img{
display:block;
width:40px;
height:30px;
margin:0 auto}
#t01:target ~ .appwin .app #container #all {margin-left:0px;}
#t02:target ~ .appwin .app #container #all {margin-left:-600px;}
.top{position:absolute;left:0;top:0;display:none;}
</style>
</head>
- 8. <body class="font-selector">
<div id="head">
<div id="content">
<!-- Font-Switch START first after <body> -->
<div> <!-- dont forget to close before </body>
-->
<input class="font-switch" type="radio"
id="font-k" name="radio0">
<input class="font-switch" type="radio"
id="font-s" name="radio0"
checked="checked">
<input class="font-switch" type="radio"
id="font-g" name="radio0">
<!-- Font-Switch END -->
<div id="page" class="">
<div id="t01" class="top"></div>
<div id="t02" class="top"></div>
<div class="appwin">
<div class="app">
- 9. <h1 id="h1">Galerie</h1>
<!-- APP start -->
<div id="container">
<div id="window">
<div id="all">
<div><img class="ls" src="bilder/macarons.jpg"
alt="picture"></div>
<div><img class="ls" src="bilder/protein_banane.jpg"
alt="picture"></div>
</div>
</div><ul>
<li><a href="#t01"><img src="bilder/macarons.jpg"
alt="picture"></a></li>
<li><a href="#t02"><img
src="bilder/protein_banane.jpg" alt="picture"></a></li>
</ul>
</div>
<!-- APP end -->
</div></div>
</div>
</div> <!-- end font-switch -->
</body>
- 10. <h1 id="h1">Kontakt</h1>
<div id="schrift">
<br>
Hey, there! Egal, was ihr fragen wollt, ihr könnt mich immer anschreiben,
ich würd mich freuen, von euch zu hören.
</div>
<br>
<form id="kontaktformular" name="kontaktformular" action="http://www.formular-
chef.de/fc.cgi"
method="post">
<input type="hidden" name="empfaenger" value="lillikiessling@gmail.com" />
<div>
<label for="absender">Ihre E-Mail-Adresse:</label>
<input type="text" id="absender" name="absender" />
</div>
<div>
<label for="nachricht">Ihre Nachricht:</label>
<textarea id="nachricht" name="nachricht" cols="20" rows="5"></textarea>
</div>
<div>
<input type="submit" value="Abschicken" />
</div>
</form>
- 11. Probleme
• Slideshow wird grau
• Bei Proteinshake-Übersicht: Bilder verschieben
sich
Pläne
• Suchen- Feld
• Erweiterung der Rezepte/ Lücken füllen
