Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  <head>
    <meta name="description" content="Der Livestyle und Goods Store in Downtown Wandsbek" />
<meta name="keywords" content="Milch, Broetchen, Milchbroetchen" />
<meta name="author" content="Frau Milch" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Milch and More</title>
  </head>
  
  <body>
    <div id="oben"></div>
  <nav>  
    <ul>
      <li><a href="#attitude">attitude</a></li>
      <li><a href="#areas">areas</a></li>
      <li><a href="#events">events</a></li>
      <li><a href="#location">location</a></li>
      <li><a href="#history">history</a></li>
      <li><a href="#angebot">angebot</a></li>
    </ul>
    </nav>
    
   <div id="wrapper"> 
   
   	<header>
    <h1><em>Frau Milch</em> - Lifestyle & Food</h1>
    <h2>Der Laden in Wandsbek</h2>
    </header>

    <div id="attitude">
    <h3>Unsere Attitude</h3>
    <p>Mitten im Herzen von Wandsbek liegt unser trendige <b>Flagship Store</b>. In diesem spacigen singelfloor versorgen wir nationale und internationale <b>Foodseeker</b> und <b>Adrenalin Junkies</b>. Im Angebot: Neben den beliebten <b>Food-Klassikern</b> bieten wir auch immer wieder <b>nervenkitzelige Neukreationen</b> welche schon mehrfach von der Fachpresse ausgezeichnet wurden und dennoch ihre <b>street credibility</b> nicht eingeb&uuml;st haben. <i>Keep it real. Keep it fresh.</i></p>
      <div id="attitudebox"></div>
     </div><!-- attitude ende -->
     
     <div id="nahrung">
     <h4>Nahrung f&uuml;r den Geist und f&uuml;r den K&ouml;rper.</h4> 
     <h5>Alltagsphilosphie und Lebensberatung.</h5>
     <ul>
       <li>Br&ouml;tchen & Bedeutung</li>
       <li>Power Riegel & Power Regeln</li>
       <li>Obst & Obey</li>
       <li>Gem&uuml;se & Gemeinschaft</li>
       <li>Softdrinks & Hardfakts</li>
       <li>Milch & Massage</li>
     </ul>
       <div id="nahrungbox"></div>
     </div><!-- nahrung ende -->
    
    <div id="areas">
    <h3>Die Areas</h3>
    <p>Die <em>Frau Milch</em> Experience beginnt schon vor dem Betreten des Ladens und h&auml;lt den Ganzen Tag. <em>Frau Milch</em> Freunde haben ein "The Joker"-like Dauergrinsen in Gesicht gemeiselt.</p>
   
      <ul>
        <li id="area_freezing">Unsere <b>Freezing Zone</b> ist das Home der Milchprodukte. <span>Brrrrr</span></li>
        <li id="area_pano">Das <b>Panorama Fenster</b> gibt einen atemberaubenden Blick auf die Bussing City frei <span>*Party*</span></li>
        <li id="area_decision">Der <b>Tresen of Decision</b><span> was darf es sein?</span></li>
        <li id="area_kasse">Die <b>Kasse: Pay Day</b> <span>Bling Bling</span></li>
        <li id="area_foodwall">Die <b>Foodwall</b> <span>W&uuml;nsche werden war</span></li>
        <li id="area_entrance">Der <b>Entrance</b> <span>Das Rabbithole in eine andere Welt</span></li>
    </ul>
      <div id="areasbox"></div>
     </div><!-- areas ende -->
     
       <div id="events">   
          <h3>Events</h3>
           <p>Die verschiedenen Areas des Stores sind Begegnungsst&auml;tte und Aktionsfl&auml;che zugleich. Kulturelle Highlights und Dance Action geben sich das Milchbr&ouml;tchen in die Hand. Gespr&auml;che und tiefgr&uuml;ndige Diskussionen sind wichtige Bestandteile eines jeden Besuchs bei <em>Frau Milch</em>. </p>
         <div id="eventsbox"></div>
         </div><!-- event ende -->

    <div id="location">
    <h3>Location Location Location</h3>
    <p>Der <em>Frau Milch</em> Store ist traditionell der Treffpunkt in Wandsbek. Wegen <em>Frau Milch</em> siedelten sich hier die meisten Bewohner der Weltmetropole Hamburgs an. Mietpreise explodierten. Touris und Locals sch&auml;tzen diese Norddeutsche Institution, welche auf keiner ernst zunehmenden Sightseeing-Tour durch Europa fehlen darf. Rock Bands und Kinofilme haben nicht selten ihre Weltpremiere in der N&auml;he dieser Stilikone</p> 
      <div id="locationbox"></div>
     </div><!-- location ende -->
     
     <div id="history">
     <h3>history <span>a story worth telling</span></h3>
     <p>"Gegr&uuml;ndet um abzuliefern. F&uuml;r uns ist Frische schon immer mehr als nur ein Haltbarkeitsdatum. Wenn die W&auml;nde unseres Ladens erz&auml;hlen k&ouml;nnten w&uuml;rden wir nicht zuh&ouml;ren, wir w&uuml;rden stattdessen die freshesten Br&ouml;tchen der hood liefern. Unsere Geschichte schreiben wir ins Steno. Die Zukunft Hamburgs liegt nicht in der Kohle. Ein voller Bauch studiert nicht gerne."</p>
       <div id="historybox"></div>
     </div><!-- history ende-->
     
     <div id="meinungen">
     	<blockquote><span>&raquo;</span>Brot Brot Brot<span>&laquo;</span></blockquote>
     </div><!-- meinungen ende -->
     
     <div id="angebot">
    <h3>Angebot <span>zuschlagen</span></h3>
     <p>Alles was wir in unseren Laden bringen muss nur 2 Bedingungen erf&uuml;llen:</p>
       <ul>
       	 <li>es muss frisch sein</li>
         <li>es muss gut sein</li>
         <li>es muss rocken</li>
       </ul>
     <p>Wir bieten viels selbst angebaute und selbst zusammen gebaute Delicatessen an. Nur so k&ouml;nnen wir die hohe Qualit&auml;t unserer Produkte und Dienstleistungen garantieren</p>
         
       <ul id="angebot_list">
         <li>Milfbr&ouml;tchen</li>
         <li>Schokokussbr&ouml;tchen</li>
         <li>Meet Br&ouml;tchen</li>
         <li>Singel K&auml;se Br&ouml;tchen</li>
         <li>Doppel K&auml;se Br&ouml;tchen</li>
         <li>Trippel K&auml;se Br&ouml;tchen</li>
     </ul>
<div id="angebotbox"></div>
     </div><!--angebot ende -->
     
  
     
     	
    </div><!-- wrapper ende -->
 <aside>
  <a href="#oben">top</a> 
    </aside>
   
   <div id="footer">
   		<p>Marschbefehl: Folge deinem guten Geschmack und uns auf <a href="https://www.facebook.com/kommunikationsdesign">Facebook</a>!</p>
   		</div><!-- footer ende -->
    
  </body>
</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

h1, h2, h3, h4{font-family: 'Open Sans Condensed', sans-serif;}
              
            
!

JS

              
                
              
            
!
999px

Console