Untitled

<!DOCTYPE HTML>
<html>
    <head>
        <title>Autoreifen Guru</title>

        <!-- Meta Tags -->
        <meta content="text/html" http-equiv="content-type" charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <meta name="description" content="Autoreifen Guru - Reifen online kaufen und Geldsparen">
        <meta name="keywords" content="Autoreifen, Geldsparen, Reifen, Guru">
        <meta name="author" content="Henning Werner">

        <!-- Google Authorship and Publisher Markup -->
        <link rel="author" href="https://plus.google.com/[Google+_Profile]/posts">
        <link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]">

        <!-- Schema.org markup for Google+ -->
        <meta itemprop="name" content="Autoreifen Guru">
        <meta itemprop="description" content="Autoreifen Guru - Reifen online kaufen und Geldsparen">
        <meta itemprop="image" content="IMAGE">

        <!-- Twitter Card data -->
        <meta name="twitter:title" content="Autoreifen Guru">
        <meta name="twitter:description" content="Autoreifen Guru - Reifen online kaufen und Geldsparen">
        <meta name="twitter:creator" content="Henning Werner">
        <meta name="twitter:image:src" content="IMAGE">

        <!-- Open Graph data -->
        <meta property="og:description" content="Autoreifen Guru - Reifen online kaufen und Geldsparen">
        <meta property="og:locale" content="de_DE">
        <meta property="og:site_name" content="Autoreifen Guru">
        <meta property="og:image" content="IMAGE">
        <meta property="og:image:type" content="image/png">
        <meta property="og:type" content="website">
        <meta property="og:url" content="loremipsum">
        <meta property="fb:admins" content="lorem ipsum">

        <!-- Style -->
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
        <link href="css/rg.css" type="text/css" rel="stylesheet"/>
        <link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

        <!-- Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="js/jquery.flexslider.js"></script>
        <script defer src="js/jquery.flexslider.js"></script>
        <script defer src="js/bootstrap.min.js"></script>

        <!-- Syntax Highlighter -->
        <script type="text/javascript" src="js/shCore.js"></script>
        <script type="text/javascript" src="js/shBrushXml.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $(window).load(function() {
                $('.flexslider').flexslider({
                animation: "slide"
                    });
                });

                $('.option').click(function(event){
                    event.preventDefault();
                    var $this = $(this);
                    var select = $(this).data('selection');
                    var div = $(this).parents('div.btn-group').eq(0);
                    div.find('a:eq(0)').html(select);
                });
            });
        </script>
    </head>

    <body class="lato">
        <div class="header">
            <div class="wrapper">
                <div class="row">
                    <div class="col span-6">
                        <h1>Autoreifen <span>Guru</span></h1>
                        <h3>Reifen online kaufen und Geldsparen</h3>
                    </div>

                    <div class="col span-6 search">
                        <form>
                            <div class="btn-group dropit">
                                <a href="#" id="owndrop" data-toggle="dropdown" class="btn btn-default">Reifen</a>
                                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                  <li><a class="option" data-selection="Reifen" href="#">Reifen</a></li>
                                  <li><a class="option" data-selection="Felgen" href="#">Felgen</a></li>
                                  <li><a class="option" data-selection="Zubehör" href="#">Zubehör</a></li>
                                  <li class="divider"></li>
                                  <li><a class="option" href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <input type="text" placeholder="z.B. Michelin"/>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                        <div id="clear"></div>
                    </div>
                </div>

                <nav>
                    <div class="row">
                        <div class="col span-2 box">
                            <a href="#">Startseite</a>
                        </div>
                        <div class="col span-2 box">
                            <a href="#">Reifen</a>
                        </div>
                        <div class="col span-2 box">
                            <a href="#">Zubehör</a>
                        </div>
                        <div class="col span-2 box">
                            <a href="#">Weiterer Punkt</a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

        <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-md-12" style="background-image: url(img/road.jpg); background-size: cover; background-position: 50%; color: white; min-height: 400px;">
                                <div class="wrapper center">
                                    <h2>Reifen für jedes Land und Auto <br>
                                    Jetzt neu! Bereits ab 49€ / je Reifen </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-md-12" style="background-image: url(img/ferrari.jpg); background-size: cover; background-position: 50%; color: white; min-height: 400px;">
                                <div class="wrapper center">
                                    <h2>Reifen für jedes Land und Auto <br>
                                    Jetzt neu! Bereits ab 49€ / je Reifen </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- End Item -->
                </div>
                <!-- End Carousel Inner -->
        </div>

        <div id="content">
            <div class="wrapper center">
                <div class="row">
                    <div class="col span-6">
                        <h3>Suchen Sie etwas bestimmtes? Kein Problem.</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col span-3">
                        Fahrzeug <br>
                        <div class="btn-group dropit space">
                            <a href="#" id="owndrop" data-toggle="dropdown" class="btn btn-default">Auto</a>
                            <a href="#" class="btn btn-default dropdown-toggle radius" data-toggle="dropdown"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a class="option" data-selection="Auto" href="#">Auto</a></li>
                              <li><a class="option" data-selection="Felgen" href="#">Felgen</a></li>
                              <li><a class="option" data-selection="Zubehör" href="#">Zubehör</a></li>
                              <li class="divider"></li>
                              <li><a class="option" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col span-3">
                        Hersteller <br>
                        <div class="btn-group dropit space">
                            <a href="#" id="owndrop" data-toggle="dropdown" class="btn btn-default">BMW</a>
                            <a href="#" class="btn btn-default dropdown-toggle radius" data-toggle="dropdown"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a class="option" data-selection="BMW" href="#">BMW</a></li>
                              <li><a class="option" data-selection="Felgen" href="#">Felgen</a></li>
                              <li><a class="option" data-selection="Zubehör" href="#">Zubehör</a></li>
                              <li class="divider"></li>
                              <li><a class="option" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col span-6">
                        Saison <br>
                        <div class="btn-group dropit space">
                            <a href="#" id="owndrop" data-toggle="dropdown" class="btn btn-default">Sommerreifen</a>
                            <a href="#" class="btn btn-default dropdown-toggle radius" data-toggle="dropdown"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a class="option" data-selection="Sommerreifen" href="#">Sommerreifen</a></li>
                              <li><a class="option" data-selection="Felgen" href="#">Felgen</a></li>
                              <li><a class="option" data-selection="Zubehör" href="#">Zubehör</a></li>
                              <li class="divider"></li>
                              <li><a class="option" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col span-6">
                        Geschwindigkeitsindex (optional ?) <br>
                        <div class="btn-group dropit space">
                            <a href="#" id="owndrop" data-toggle="dropdown" class="btn btn-default">Alle</a>
                            <a href="#" class="btn btn-default dropdown-toggle radius" data-toggle="dropdown"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a class="option" data-selection="Reifen" href="#">Reifen</a></li>
                              <li><a class="option" data-selection="Felgen" href="#">Felgen</a></li>
                              <li><a class="option" data-selection="Zubehör" href="#">Zubehör</a></li>
                              <li class="divider"></li>
                              <li><a class="option" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col span-6 button">
                        <button>Jetzt Reifen Suchen</button>
                    </div>
                </div>

                <div id="review">
                    <div class="row">
                        <div class="col span-6">
                            <div class="bubble">
                                <h3>Super schnell!</h3>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col span-2">
                            <div id="circle"></div>
                        </div>
                        <div class="col span-2 reviewer">
                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><br>
                            <p>Maximilian Koch</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>

            <footer>
                <div class="wrapper">
                    <div class="row">
                        <div class="col span-5">
                            <p>Copyright 2014 MLR UG</p>
                        </div>
                        <div class="col span-2 link">
                            <a href="#">AGB</a>
                        </div>
                        <div class="col span-1 link">
                            <a href="#">Wiederuf</a>
                        </div>
                        <div class="col span-1 link">
                            <a href="#">Datenschutz</a>
                        </div>
                        <div class="col span-2 link">
                            <a href="#">Haftungsausschluss</a>
                        </div>
                        <div class="col span-1 link">
                            <a href="#">Vertragsschluss</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>