Hallo, dankeschön!
[HTML]<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsere Bar</title>
<link href= "{{ siteUrl }}/barstyle.css" rel="stylesheet">
</head>
<body>
<header>
<div class="nav">
<ul>
<a href= '#'> Logo </a>
<a href= '#'> Home </a>
<a href= '#'> Karte </a>
<a href= '#'> Galerie </a>
<a href= '#'> FAQ </a>
<a href= '#'> Reservierung </a>
<a href= '#'> Kontakt </a>
</ul>
</div>
<div id="bildtext">
<br>
<br>
<br>
<p class="Ihrfragt"> Ihr fragt</p>
<p classs="Wirantworten"> Wir antworten</p>
<hr>
<br>
</div>
</header>
<main>
<div id="topbar">
<div id="f1">{{entry.faq_frage1}}</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')"> <span id="navarrow"> + </span></button>
</div>
<div id="sections_panel">
<div>
{{ entry.faq_antwort1 }}
</div>
</div>
</div>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="130%";
if(panel.style.height == maxH){
panel.style.height = "0%";
navarrow.innerHTML = "+";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "-";
}
}
</script>
<p class="frage2">
{{ entry.faq_frage2 }}
<br>
{{ entry.faq_antwort2 }}
</p>
<p class="frage3">
{{ entry.faq_frage3 }}
<br>
{{ entry.faq_antwort3 }}
</p>
<p class="frage4">
{{ entry.faq_frage4 }}
<br>
{{ entry.faq_antwort4 }}
</p>
<p class="frage5">
{{ entry.faq_frage5 }}
<br>
{{ entry.faq_antwort5 }}
</p>
</main>
<footer>
<div>
<br>
<h1>Kontakt</h1>
<h2>Öffnungszeiten</h2>
<p class="oeffnungstag1"> {{ entry.kontaktformular_oeffnungstag1}} {{ entry.kontaktformularzeit1 }}</p>
<p class="oeffnungstag2"> {{ entry.kontaktformular_oeffnungstag2 }} {{ entry.kontaktformularzeit2 }}</p>
<div class="Kontaktformular">
{% macro errorList(errors) %}
{% if errors %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{% from _self import errorList %}
<form method="post" action="" accept-charset="UTF-8">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="contactForm/sendMessage">
<input type="hidden" name="redirect" value="contact/thanks">
<div class="Name">
<h3 class="n"><label for="fromName"> Name* </label></h3>
<input id="fromName" type="text" name="fromName" size="50" maxlength="120"value="{% if message is defined %}{{ message.fromName }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromName')) }}
</div>
<br>
<br>
<div class="Email">
<h3 class="e"><label for="fromEmail">E-mail*</label></h3>
<input id="fromEmail" type="email" name="fromEmail" size="50" maxlength="120" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
</div>
<br>
<br>
<div class="Subject">
<h3 class="b"><label for="subject">Betreff*</label></h3>
<input id="subject" type="text" name="subject" size="50" maxlength="120" value="{% if message is defined %}{{ message.subject }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('subject')) }}
</div>
<br>
<br>
<div class="Nachricht">
<h3 class="na"><label for="message">Nachricht*</label></h3>
<textarea rows="10" cols="40" id="message" name="message">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
{{ message is defined and message ? errorList(message.getErrors('message')) }}
</div>
<div class="Senden">
<input type="submit" value="Send" style="background-color: blue">
</div>
</form>
</div>
<br>
<hr>
<br>
<br>
<br>
<p class="Impressum"> Alle Rechte Vorehalten | Unsere Bar Gmbh c |
{{entry.impressum_adresse}} {{entry.impressum_telefonnummer}}</p>
<br>
<p class="I"> Impressum </p>
<br>
</div>
</footer>
</body>
</html>
[/HTML]
Code:
body
{
margin: 0%;
width: 100%;
}
main
{
position: relative;
text-align: left;
min-width: 600px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
width: expression(document.body.clientWidth > 1400 ? '1400px' : 'auto');
}
/*Links*/
.Links
a:visited
{ color:beige;}
a:link
{ color:black;}
/*Dropdown menu Frage 1*/
div#topbar{
background:darkgray;
background:darkgray;
height:60px;
margin-left: 10%;
margin-right: 10%;
}
div#topbar > #f1{
margin-top: 5%;
text-align: center;
font-size:100%;
color:white;
}
div#topbar > #sections_btn_holder{
float:right;
margin-right: 1%;
}
div#topbar > #sections_btn_holder > button
{
background:white;
}
div#topbar > #sections_panel{
position:relative;
height:0%;
margin-right:0%;
background:darkgray;
text-align: center;
overflow:hidden;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div{
background:darkgray;
padding:20px;
margin-left: 10%;
margin-right: 20%;
color:white;
}
/*Hauptteil Fragen*/
.frage1 {
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
text-align: center;
color: white;
border: 20% solid;
margin-left: 10%;
margin-right: 10%;
background-color: darkgray;
}
.frage2
{ font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
text-align: center;
color: white;
margin-left: 10%;
margin-right: 10%;
background-color: darkgray;
}
.frage3
{
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
text-align: center;
color: white;
margin-left: 10%;
margin-right: 10%;
background-color: darkgray;
}
.frage4
{
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
text-align: center;
color: white;
border: 20% solid;
margin-left: 10%;
margin-right: 10%;
background-color: darkgray;
}
.frage5
{
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
text-align: center;
color: white;
border: 20% solid;
margin-left: 10%;
margin-right: 10%;
background-color: darkgray;
}
/*Navigation*/
header
{
background-color: white;
margin-top: 0%;
}
.nav
{ text-align: center;
}
/*Header Bild und Überschriften*/
div#bildtext
{
background-image: url(bilder_karte/weinglass_hintergrund1.jpg);
color:white;
background-repeat: no-repeat;
margin: 0 auto;
text-align: center;
background-size: 120%;
background-size: auto 300px;
padding: 0;
}
.Ihrfragt
{
font-family: 'champagne__Limousinesitalic', arial, sans-serif; }
.Wirantworten
{
font-size: 10%; }
hr
{
color:white;
}
/*Footer*/
footer
{
background-color: black;
color: white;
margin:0%;
}
h1
{ font-size: 150%;
text-align: center;
font-family: 'midnight_valentineregular', serif;
}
h2
{ font-size: 60%;
text-align: center;
}
.oeffnungstag1
{
font-size: 60%;
text-align: center;
}
.oeffnungstag2
{
font-size: 60%;
text-align: center;
}
/*Kontaktformular Namefeld und Überschrift*/
.n
{
padding-right: 17em;
}
.Name
{
text-align:center;
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
font-size:80%;
}
/*Kontaktftmular E-mail feld und Überschrift*/
.e
{
padding-right: 17em; }
.Email
{
text-align:center;
font-size: 80%;
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
}
/*Kontaktftmular Betreff feld und Überschrift*/
.b
{
padding-right: 17em;
}
.Subject
{
text-align:center;
font-size:80%;
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
}
/*Kontaktftmular Nachrichtfeld und Überschrift*/
.na
{ padding-right: 14.5em;
}
.Nachricht
{
text-align:center;
font-size: 80%;
text-align: center;
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
}
.Senden
{
padding-left: 9em;
font-size: 500%;
}
/*Impressum*/
.Impressum
{
text-align: center;
font-size: 60%;
}
.I
{ text-align: center;
font-size:60%; }
/*Icons Impressum */
/*Trennlinie Footer*/
hr
{
width: 50%;
}
![[-]](https://forum.juergens-workshops.de/images/collapse.png)
