Skip to content

Instantly share code, notes, and snippets.

@Beneboe

Beneboe/index.html

Created January 30, 2013 11:15
Show Gist options
  • Save Beneboe/4672543 to your computer and use it in GitHub Desktop.
Save Beneboe/4672543 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Turm Fort Stahlberg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src></script>
</head>
<body>
<div id="navigation-bar">
<!--<div class="center">-->
<!--<h1>Turm Fort Stahlberg</h1>-->
<ul id="navigation">
<li><a href="#prices">Turm</a></li>
<li><a href="#pic-gallery">Bilder</a></li>
<li><a href="#contact">Reservierung</a></li>
</ul>
<!--</div>-->
</div>
<div id="head" class="content-padding">
<div id="banner-wrapper">
<div class="center">
<div id="turm-infotext">
<h2>Der Turm</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim
leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent
mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui
viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut Augue.
</p>
</div>
</div>
</div>
</div>
<div id="prices" class="content-padding">
<div class="center">
<h2>Zimmer</h2>
<div id="two-rooms">
<div class="cols2">
<h3>Personen 1 - 2<span class="avail-rooms">1. OG</span></h3>
<b>1. OG:</b>
<ul>
<li>ca. 14 m² großes Zimmer für bis zu 2 Erwachsene</li>
<li>Doppelbett ( 200 cm x 150 cm)</li>
<li>2 Sthle und kleiner Tisch</li>
<li>kleiner Kleiderschrank</li>
<li>kleinen Balkon</li>
</ul>
<span class="price">84 €</span>
</div>
<div class="cols2">
<h3>Personen 3 - 4<span class="avail-rooms">1. + 2. OG</span></h3>
<b>2. OG</b>
<ul>
<li>ca. 15 m² große Zimmer für bis zu 2 Kinder</li>
<li>2 x Bettsessel (L: 188 x B: 80 cm)</li>
<li>Satelliten-TV (Astra und Hotbird)</li>
<li>Kleine Kommode</li>
<li>2 Stühle und kleiner Tisch</li>
<li>zwei Balkone</li>
</ul>
<span class="price">3 Pers. 105 € | 4 Pers. 126 €</span>
</div>
</div>
<div id="more-rooms">
<div class="cols2">
<h3>Früstücksraum</h3>
<ul>
<li>Saeco Espressovollautomat</li>
<li>Ausziehtisch für 2 - 4 Personen</li>
<li>Wasserkocher</li>
<li>Eierkocher</li>
<li>Toaster</li>
<li>Kühlschrank</li>
<li>Spühlmaschine</li>
</ul>
<b>
Auf Wunsch stellen wir einen Frückstückskorb bereit mit Brötchen/Brot, Wurst, Käse,
Marmelade und Butter: 5 € pro Person. Bitte am Vorabend bis 18 Uhr bestellen.
</b>
</div>
<div class="cols2">
<h3>Bad im EG</h3>
<ul>
<li>ausgestattetes Tageslichtbad (Dusche, WC, Waschbecken, Spiegelschrank, Föhn)</li>
<li>Handtücher und Bademänetl werden zur Verfügung gestellt</li>
</ul>
<h3>Terrassen</h3>
<p>
Auf dem Dach des Turmes befinden sich 2 Aussichtsterrassen mit 360° Rundumblick auf Mainz,
Rheingau, Taunus und bei guter Sicht auf den Odenwald.
</p>
</div>
<h3></h3>
</div>
</div>
</div>
<div id="pic-gallery" class="content-padding">
<div class="center">
<h2>Bilder</h2>
</div>
</div>
<div id="contact" class="content-padding">
<div class="center">
<h2>Reservierung</h2>
<div class="cols2">
<form action="/message">
<label for="user_name">Name:</label><br />
<input type="text" name="" id="user_name"><br />
<label for="user_email">Email:</label><br />
<input type="text" name="" id="user_email"><br />
<label for="user_tel">Telefon:</label><br />
<input type="text" id="user_tel"><br />
<label for="user_msg">Nachricht:</label><br />
<textarea name="" id="user_msg" cols="30" rows="10">
</textarea><br />
<input type="submit" value="Absenden">
</form>
</div>
<div class="cols2">
<div id="googlemap">
</div>
<div id="address-text">
<p><img src="#" alt="maps">Landwehrweg 33, 55131 Mainz, Deutschland</p>
<p><img src="#" alt="maps">GPS: Oberezahlbacherstr. 6, 55131 Mainz, Deutschland</p>
<p><img src="#" alt="telephone">+49 (0)6131 3296768</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="center">
© 2013 Turm Fort Stahlberg | <a href="">Facebook</a> | <a href="impressum">Impressum</a>
<img id="link-up" src="#" alt="page top" />
</div>
</div>
</body>
</html>
Raw
style.css
/*@font-face {
font-family: 'JosefinSlabBold';
src: url('fonts/JosefinSlab-Bold-webfont.eot');
src: url('fonts/JosefinSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/JosefinSlab-Bold-webfont.woff') format('woff'),
url('fonts/JosefinSlab-Bold-webfont.ttf') format('truetype'),
url('fonts/JosefinSlab-Bold-webfont.svg#JosefinSlabLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'JosefinSlabRegular';
src: url('fonts/JosefinSlab-Regular-webfont.eot');
src: url('fonts/JosefinSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/JosefinSlab-Regular-webfont.woff') format('woff'),
url('fonts/JosefinSlab-Regular-webfont.ttf') format('truetype'),
url('fonts/JosefinSlab-Regular-webfont.svg#JosefinSlabRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RobotoLight';
src: url('fonts/Roboto-Light-webfont.eot');
src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Light-webfont.woff') format('woff'),
url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RobotoBold';
src: url('fonts/Roboto-Bold-webfont.eot');
src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Bold-webfont.woff') format('woff'),
url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LobsterTwoRegular';
src: url('fonts/LobsterTwo-Regular-webfont.eot');
src: url('fonts/LobsterTwo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/LobsterTwo-Regular-webfont.woff') format('woff'),
url('fonts/LobsterTwo-Regular-webfont.ttf') format('truetype'),
url('fonts/LobsterTwo-Regular-webfont.svg#LobsterTwoRegular') format('svg');
font-weight: normal;
font-style: normal;
}*/
body {
padding: 0;
margin: 0;
font-size: 18px;
font-family: 'RobotoLight', arial, sans-serif;
}
.center {
width: 960px;
margin: 0 auto;
}
.content-padding {
padding: 80px 0 0 0;
}
/*.cols2 {
width: 48%;
display: inline-block;
}*/
h1 {
font-family: 'LobsterTwoRegular', 'JosefinSlabBold', Arial, sans-serif;
color: #faf8f3;
font-size: 36px;
margin: 5px 0 0 10px;
display: inline;
float: left;
}
h2{
font-family: 'JosefinSlabBold', Arial, sans-serif;
font-size: 40px;
margin: 20px 0;
}
a {
text-decoration: none;
color: #280000;
}
a:visited {
color: #280000;
}
a:hover {
color: #fa9924;
}
#navigation-bar {
top: 10px;
left: 0;
position: fixed;
width: 100%;
height: 50px;
z-index: 2;
}
/*#navigation-bar .center{
width: 940px;
height: 50px;
overflow: hidden;
background: #f9ce7c;
padding: 0;
border-radius: 5px;
box-shadow: 0 5px 0 #280000;
}*/
#navigation {
list-style: none;
float: right;
margin: 0;
padding: 5px 10px 0 0;
}
#navigation li {
height: 20px;
padding: 10px;
font-family: 'JosefinSlabBold', Arial, sans-serif;
font-size: 24px;
float: left;
}
#navigation li a{
width: 100%;
height: 100%;
color: #faf8f3;
}
/*
#banner-wrapper {
background: #f6ef4e;
}
#turm-infotext {
width: 480px;
font-family: 'JosefinSlabRegular', sans-serif;
font-size: 24px;
line-height: 1.25em;
padding: 10px;
}*/
@Beneboe
Copy link
Author

Beneboe commented Feb 12, 2013

Weird Chrome Bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment