Bevor du dir Gedanken zum Logo und dem Akkordion (das ich nicht sehe) machst, solltest du erst einmal dein Markup gründlich überarbeiten. Unter anderem Validieren und die Fehler ausbessern. Nach dem Doctype fehlt beispielsweise das öffnende HTML-Tag. Für die Groß- und Kleinschreibung gibt es in CSS nicht umsonst die Eigenschaft text-transform upper- und lowercase. Also nutze sie auch. Davon ab sollte jegliche Formatierung in CSS notiert werden.
Da deine Website mittig als "Block" zentriert ist, sprich keine Viewport-füllenden Bereiche dabei sind,
einmal einen umschließenden Container für deine Inhalte definierten, den du dann mittels margin 0 auto zentrierst. Für den Container muss auch nicht extra eine neue (eigene) Division angelegt werden. Funktioniert auch wunderbar mit dem Body-Tag. Zumal es dir auch die Umsetzung für andere Devices etwas erleichtert. Gib dem ganzen eine maximale Breite!
Die gemischte Social und Sprachnavigation würde ich voneinander trennen. Dessen Icons über CSS als CSS-Sprite einbinden. Stichworte wären wohl schlankes Markup und unnötige HTTP-Requests (ein)sparen. Zu deinem Layout, dieses würde auch nochmal überdenken. Wozu einen doppelt gemoppelte Navigation? Wenn die Navigation immer erreichbar sein soll, die Hauptnavigation beim scrollen "on top" fixieren.
Im Footer dann lediglich zum Impressum und gegebenenfalls zu existierenden AGB verlinken. Ebenso alle anderen rechtlichen Hinweise wie Nutzungsbedingungen un der gleichen dort verlinken. Die gewählten Farben würde ich auch etwas anpassen. Hier vor allem ein Farbproof machen und schauen wie es im Bezug auf Farbenblindheit: Deuteranopie/Protanopie ausschaut.
Edit:
Ganz vergessen, aus Usability und SEO Gründen, relevante Inhalte wie Text nicht als Grafik einbinden. Ebenso sollte beim Rabatt auch bei stehen, wie viel es denn gibt. Nach meinem Wissenstand müssen solche Aktionen genau wie Preise deutlich ausgezeichnet werden. Mir da jedoch nicht hunderprozentig sicher bin. Was die Optik angeht, das Logo Vektorisieren und als SVG einbinden. Für die Social Icons vielleicht auf entsprechende Icon-Fonts (z.B.
Font Awesome) zurückgreifen.
Ich habe dein Quellcode mal etwas aufgeräumt:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World!</title>
</head>
<body id="container">
<div id="topbar">
<h1 class="brand"><span>First Lady Belezza - Schönheitssalon</span></h1>
<ul id="contact-bar">
<li class="spr icon-phone"><a href="tel:+4319137533">+43 191 375 33</a></li>
<li class="spr icon-facebook"><a href="#">Facebook</a></li>
<li class="spr icon-lang-de"><a href="#"></a>Deutsch</li>
<li class="spr icon-lang-tur"><a href="#">Türkce</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Angebote</a></li>
<li><a href="#">Preise</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<header id="slider">
<!-- Slideshow here! -->
</header>
<main id="primary">
<!-- Primary content here! -->
</main>
<footer id="footer">
<!-- Secondary content here! -->
</footer>
</body>
</html>
Liebe Grüße, Patrick
