Untitled

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>HALOBAZA</title>
        <meta name="description" content="">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/normalize.css">

        <!-- jQuery -->
        <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

        <style>

        </style>

    </head>
    <body>

        <!-- top bar when logged in -->
        <div class="top_panel_content">
            <div id="logo"></div>
            <ul>
                <li><a href="#" class="menu_item bordered" id="addOfferBtn">Dodaj ofertę</a></li>
                <li><a href="#" class="menu_item" id="learnMoreBtn">Jak to działa?</a></li>
                <li><a href="#" class="menu_item" id="current"><div class="user_img"></div>Janusz</a>
                    <ul>
                        <li><a href="#">Edycja profilu</a></li>
                        <li><a href="#">Ustawienia powiadomień</a></li>
                        <li><a href="#">Moje oferty</a></li>
                        <li><a href="#">Wiadomości</a></li>
                        <li><a href="#">Ulubione</a></li>
                        <li><a href="#">Wyloguj</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="mid_menu">
            <ul>
                <li><a href="#">Edycja profilu</a></li>
                <li><a href="#">Ustawienia powiadomień</a></li>
                <li><a href="#">Moje oferty</a></li>
                <li><a href="#">Wiadomości</a></li>
                <li><a href="#">Ulubione</a></li>
            </ul>
        </div>

        <div class="content_wrap">
            <div class="personal_content_wrap">
                <div class="header">
                    <h1>Dane osobowe</h1>
                </div>
                <div class="content_form">
                    <div class="content_body">
                        <div class="row">
                            <label class="row_label">Imię</label><input type="text" class="row_input">
                        </div>
                        <div class="row">
                            <label class="row_label">Nazwisko</label><input type="text" class="row_input">
                        </div>
                        <div class="row">
                            <label class="row_label">Adres e-mail</label><input type="text" class="row_input">
                        </div>
                        <button class="logreg_buttons change_button">Zmień dane</button>
                    </div>
                </div>
            </div>

            <div class="password_content_wrap">
                <div class="header">
                    <h1>Zmiana hasła</h1>
                </div>
                <div class="content_form">
                    <div class="content_body">
                        <div class="row">
                            <label class="row_label">Stare hasło</label><input type="text" class="row_input">
                        </div>
                        <div class="row">
                            <label class="row_label">Nowe hasło</label><input type="text" class="row_input">
                        </div>
                        <div class="row">
                            <label class="row_label">Potwierdź hasło</label><input type="text" class="row_input">
                        </div>
                        <button class="logreg_buttons change_button">Zmień hasło</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- login -->
        <div id="login_wrap" class="common logreg">
            <button class="close"></button>
            <button class="logreg_buttons" id="fb_btn" type="submit">Zaloguj się za pomocą Facebook</button>
            <div class="lub"></div>
            <input type="text" placeholder="Adres e-mail" name="login">
            <input type="password" placeholder="Hasło" name="password" id="input_password">
            <button class="logreg_buttons" id="login_btn" type="submit">Zaloguj się</button>
        </div>

        <!-- register -->
        <div id="register_wrap" class="common logreg">
            <button class="close"></button>
            <button class="logreg_buttons" id="fb_btn" type="submit">Zarejestruj się przez Facebook</button>
            <div class="lub"></div>
            <input type="text" placeholder="Imię" name="imie">
            <input type="text" placeholder="Nazwisko" name="nazwisko">
            <input type="text" placeholder="Adres e-mail" name="email">
            <input type="password" placeholder="Hasło" name="password">
            <input type="password" placeholder="Powtórz hasło" name="repassword">
            <button class="logreg_buttons" id="login_btn" type="submit">Zarejestruj się</button>
        </div>

        <!-- screen fader -->
        <div id="fader"></div>

        <script type="text/javascript">

            $("#loginBtn").click(function() {
                $("#fader").fadeIn(200);
                $("#login_wrap").show( "drop", { direction: "up" }, 200 );
            });

            $("#registerBtn").click(function() {
                $("#fader").fadeIn(200);
                $("#register_wrap").show( "drop", { direction: "up" }, 200 );
            });

            $("#userBtn").hover(function() {
                $(".user_menu").show();
            }, function() {
                $(".user_menu").hide();
            });

            $(".close").click(function() {
                $("#fader").fadeOut(200);
                $(".logreg").hide( "drop", { direction: "up" }, 200 );
            });

        </script>

    </body>
</html>