food trends
TRANSCRIPT
Food-TrendsBy Lilli, Luise, Anna
Food-TrendsBy Lilli, Luise, Anna
Html CSS Java Script
Grundgerüst:
Head-Bereich
Foot-Bereich Inhalts-Berich
Menu
<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>
Vorstellung der Website…
<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;}
#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>
<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">
<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>
<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="[email protected]" /><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>
Probleme• Slideshow wird grau• Bei Proteinshake-Übersicht: Bilder
verschieben sich
Pläne• Suchen- Feld
• Erweiterung der Rezepte/ Lücken füllen
Noch Fragen?