Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Kecskepiac - Magyarország első számú kecskekereskedelmi oldala!</title>
        <style type = "text/css">
        a {
            color: inherit;
            text-decoration: none;
        }
        #loginbutton {
            display: none;
        }
        @media (max-width: 960px){
            #usermenu {
            display: none;
            }
            #loginbutton {
            display: inline;
            }
        }

        #menubar {
            list-style-type: none;
            overflow: hidden;
        }
        .menubutton {
            display: inline;
            color: white;
            background-color: #009E00;
            float: left;
        }

        .menubutton a {
            display: block;
            text-align: center;
            padding: 14px 16px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .menubutton:hover {
            background-color: #007700;
        }
        .contentbar {
            display: block;
            border-top-left-radius: 6px;
            padding: 2px;
            color: #ffffff;
            background-color: #009E00;
        }
        #usermenu {
            overflow: hide;
            position: absolute;
            right: 50px;
            top: 130px;
            padding: 15px;
            border: 1px solid #009E00;
        }
        .bar-container {
            position: relative;
            left: 39px;
            width: 80%;
        }
        .grid-container {
            grid-template-columns: auto auto auto;
            grid-gap: 5px;
            position: relative;
            left: 46px;
            width: 75%;
            display: grid;
        }
        .grid-element {
            border: 1px solid #009E00;
            width: 100%;
        }
        .goat-description {
            align: top;
        }

        </style>
    </head>

    <body>
        <ul id = "menubar">
            <li class = "menubutton">
                <a href = "/home" title = "Vissza a főoldalra">Főoldal</a>
            </li>
            <li class = "menubutton">
                <a href = "/kecskek">Hirdetések</a>
            </li>
            <li class = "menubutton">
                <a href = "/postkecske">Hirdetés feladása</a>
            </li>
            <li class = "menubutton">
                <a href = "/kecskek">Saját hirdetéseim</a>
            </li>
            <li class = "menubutton">
                <a href = "/membership">Kiemelt tagság</a>
            </li>
            <li class = "menubutton" id = "loginbutton">
                <a href = "/login">Belépés</a>
            </li>
        </ul>
        <div class = "bar-container">
            <h4 class = "contentbar">
            Kiemelt Hirdetések
            </h4>
        </div>
        <div class = "grid-container">
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
            <div class = "grid-element">
            <img src = "http://www.retrocollect.com/forum/download/file.php?avatar=6147_1384560595.png" style = "float: left;">
                <div class = "goat-description">
                    <span style = "font-weight: bold;">Név: </span> <a href = "/kecske/1"> Jancsi </a><br>
                    <span style = "font-weight: bold;">Életkor: </span> 5 év<br>
                    <span style = "font-weight: bold;">Neme: </span> Bak<br>
                    <span style = "font-weight: bold;">Település: </span> Mucsaröcsöge<br>
                    <span style = "font-weight: bold;">Gazda: </span> <a href = "/profiles/1"> János gazda </a><br>
                    <span style = "font-weight: bold;">Irányár: </span> <a href = "/profiles/1"> 1 FT </a><br>
                </div>
            </div>
        </div>
        <div id = "usermenu">
            <form id = "login">
                Felhasználónév:<br>
                <input type = "text" name = "username"><br>
                Jelszó:<br>
                <input type = "password" name = "password"><br>
            </form>
            <a href = "/register">Regisztráció</a><br>
            <a href = "/lostpassword">Elfelejtett jelszó</a>
        </div>
    </body>
</html>