Untitled

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>WME Course Exercise HTML</title>

    <!--KOMMT INS STYLESHEET-->

     <!--Schriften-->
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
    <!-- Iconschrift-->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <!--CSS Reset-->
    <link href="https://html5resetcss.googlecode.com/files/html5reset-1.6.1.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <style>

        /*
            Farben:
            dunkelgrau  #666666
            hellgrau    #CCCCCC
            mittelgrau  #999999
            gruen       #68C519
            dunkelgruen #3D7D02
        */

        /* ALLGEMEIN */

            body {
                margin: 0;
                padding: 0;
            }

            body, .navbtn {
                font-family: Ubuntu;
                font-size: 14px;
                line-height: 145%;
            }

            a {
                cursor: pointer;
                text-decoration: none;
            }
            a:visited{
                color:#666;
            }

         /* Header-Elemente (NAVBAR) */

            header {
                height: 75px;
                background: -webkit-linear-gradient(#D0D0D0, #F0F0F0);
                border-bottom: 1px solid #ccc;
            }

            /* garantiere dass Listelemente in der Nav in einer Zeile stehen */
            ul li {
                display: inline;
            }

            .righthead {
                float: right;
            }

            nav {
                width: 1170px;
                margin: 0;
                margin-left: auto;
                margin-right: auto;
            }

            /* garantiere dass Listen (va in Nav) nebeneinander stehen */
            nav ul {
                display: inline-block;
                margin: 0;
                padding: 0;
            }

            .navbtn, .navbtn1 {
                height: 75px;
                color: #666;
                text-align:center;
                vertical-align: text-bottom;
                cursor: pointer;
                margin: 0px -4px 0px 0px;

                padding-top: 20px; /*setzt Text nach unten*/
                padding-left: 10px;
                padding-right: 10px;

                border-top: none;
                border-bottom: none;
                border-left: none;
                border-right: 1px solid #CCC;
                background:none;

            }

            .navbtn:hover {
                color: black;
                background: -webkit-linear-gradient(#C0C0C0, #E0E0E0);

            }

             #icon {
                background: url('http://s21.postimg.org/5trj4qh4z/infbox_logo.png') no-repeat;
                width: 220px;
            }

             #icon:hover {

             }

            .content {
                width: 1170px;
                margin-left: auto;
                margin-right: auto;
            }

            .content a {
                color: #68C519;
            }

            .content a:hover {
                color:#3D7D02;
            }


         /* Leiste über Tabelle */

            #heading1 {
                font-family: Ubuntu Condensed;
                font-size: 3em;
                line-height: 140%;
            }

            .tabn_head, .tabn_sec {
                color: #999999;
                display: inline;
                padding-left: 0;
            }

            .tabn_sec a {
                color: #68C519;
                text-decoration: underline;
            }

            .tabn_sec a:hover {
                text-decoration: none;
                color: #3D7D02;
            }

            .tabn_head, #table1 {
                padding-left: 0;
            }

        /* Tabelle */

            #table1 {
                width: 1170px;
                text-align: left;
            }

            #table1 thead {
                border-bottom: 5px solid #8D8D8D;
            }

         /*für Simulation, "ausgewaehlte" Links (muss Id sein, da Klasse nicht speziell genug um gesetzte Attr. zu ueberschreiben) */

            #chosen1, #chosen2, #chosen3, #chosen4, #chosen5, #A1, #A2, #A3, #A4, #A5{
                color: #CCCCCC;
                text-decoration: none;
            }

            #chosen6 {
                color: #f0f0f0;
                background-color: #666;
            }

         /* icons */
            .fa {

            }
        /*Overlay*/

            #bgoverlay{
                position:fixed;
                visibility: hidden;
                opacity:0,
            }
            /*Lightbox Contaner für Registrierung*/
            .lbcontainer {
                position: fixed;
                background:#FFF;
                z-index: 2;

                top: 75px;
                right:587px;
                left: auto;

                text-align: left;
                color:#CCCCCC;


                visibility: hidden;
                opacity: 0;

                -webkit-transition: opacity .6s;/*Safari und Chrome*/
                -moz-transition: opacity .6s; /*mozilla*/
                -o-transition: opacity .6s;/*opera*/
                 transition: opacity .6s;
            }
            /*Lightbox Contaner für LogIn*/
            .lbcontainerL {
                position: fixed;
                background:#FFF;
                z-index: 2;

                top: 75px;
                right:499px;
                left: auto;

                text-align: left;
                color:#CCCCCC;


                visibility: hidden;
                opacity: 0;

                -webkit-transition: opacity .6s;/*Safari und Chrome*/
                -moz-transition: opacity .6s; /*mozilla*/
                -o-transition: opacity .6s;/*opera*/
                 transition: opacity .6s;
            }
            /*Lightbox Contaner für nutzrinchen*/
            .lbcontainerY {
                position: fixed;
                background:#FFF;
                z-index: 2;

                top: 75px;
                right:371px;
                left: auto;

                text-align: left;
                color:#CCCCCC;


                visibility: hidden;
                opacity: 0;

                -webkit-transition: opacity .6s;/*Safari und Chrome*/
                -moz-transition: opacity .6s; /*mozilla*/
                -o-transition: opacity .6s;/*opera*/
                 transition: opacity .6s;
            }

            .lbcontent {
                margin-left:17px;
                margin-right:17px;
                margin-top:10px;
                margin-bottom:10px;

            }

            .bgoverlay:target + .lbcontainer , .bgoverlay:target + .lbcontainerL, .bgoverlay:target + .lbcontainerY{
                visibility: visible;
                background:#FFFFFF;
                opacity: 1;
                height: auto;
                width:auto;
                border:1px solid #ccc;
            }

            .label {
                text-align: left;
                font-family: Ubuntu;
                font-size: 14px;
                font-weight:500;

            }
            .input {
                width:250px;
                font-family:Ubuntu;
                color:black;
                font-size: 18px;
                margin-bottom:10px;
                border:1px solid #ccc;
                border-radius:2px;
            }
            .checkinput {
                margin-top:15px;
            }
            .labelY {
                font-family:Ubuntu;
                color:black;
                font-size: 18px;
                margin-bottom:10px;
            }

            .lbcontainer hr  {
                margin-left:0px;
                width:250px;
                border: none;
                border-top:1px dashed ;
            }
            .lbcontainer button, .lbcontainerL button, .lbcontainerY button{
                float: right;

                color:#FFF;
                background: -webkit-linear-gradient(#58D509, #68C519);

                border:none;
                border-radius: 2px;

                font-size: 18px;
                font-family: Ubuntu;
                font-weight:600;

                padding-top:5px;
                padding-bottom:5px;
                padding-left:2px;
                padding-right:2px;

                margin-bottom:10px;
                margin-top:10px;
            }

        /* Footer */

            #foot {
                margin-top: 100px;
                padding-top: 20px;
                text-align: right;
                border-top: 1px solid #68C519;
                color: #666;
            }
    </style>
</head>

<!--Ende der Definitionen-->

<!--Jetzt kommt Inhalt-->

<body>
    <header>
        <!-- obere Navigationsleiste -->
        <nav id="navi">
            <ul>
                <li>
                    <button id="icon" class="navbtn1"> </button>
                </li>
                <li onMouseOver="">
                    <button class="navbtn"><i class="fa fa-th-large fa-lg"></i> &nbsp; Overview &nbsp;</button>
                </li>
                <li>
                    <button class="navbtn" id="chosen6"><i class="fa fa-list fa-lg"></i> &nbsp; Details &nbsp;</button>
                </li>
                <li>
                    <button class="navbtn"><i class="fa fa-cog fa-lg"></i> &nbsp; Settings &nbsp;</button>
                </li>
            </ul>
            <ul class="righthead">
                <li>
                    <a href="#lightboxR"><button class="navbtn" ><i class="fa fa-star fa-lg" ></i> &nbsp; Register &nbsp  </button> </a>
                </li>
                <li>
                    <a href="#lightboxL"><button class="navbtn"><i class="fa fa-sign-in fa-lg"></i> &nbsp; Login &nbsp;</button>  </a>
                </li>
                <li>
                     <a href="#lightboxY"><button class="navbtn"><i class="fa fa-user fa-lg"></i> &nbsp; nutzerinchen</button></a>
                </li>
            </ul>
        </nav>
    </header>

    <!-- Inhalt -->
    <article class="content">
        <!-- große Überschrift -->
        <h1 id="heading1">Your files in detail ...</h1>

        <!--Leiste über Tabelle-->
        <div class="tabn_head">

            <!--Anzahl Einträge-->
            <ul class="tabn_sec">
                <li>Number of entries per page:</li>
                <li>
                    <a id="chosen1">5</a>&nbsp;|
                </li>
                <li>
                    <a>10</a>&nbsp;|
                </li>
                <li>
                    <a>20</a>&nbsp;|
                </li>
                <li>
                    <a>30</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </li>
            </ul>

            <!--Spaltenauswahl-->
            <ul class="tabn_sec">
                <li>Show/Hide:</li>
                <li>
                    <a id="chosen3">Size</a>&nbsp;|
                </li>
                <li>
                    <a id="chosen4">Type</a>&nbsp;|
                </li>
                <li>
                    <a id="chosen5">Creation</a>
                </li>
            </ul>

            <!--Seitenauswahl-->
            <ul class="tabn_sec righthead">
                <li>Page:</li>
                <li>
                    <a id="chosen2">1</a>&nbsp;|
                </li>
                <li>
                    <a>2</a>&nbsp;|
                </li>
                <li>
                    <a>3</a>
                </li>
            </ul>

        </div>

        <!--Tabelle-->
        <table id="table1">
            <thead>
                <tr>
                    <th>Filename</th>
                    <th>Size</th>
                    <th>Type</th>
                    <th>Creation</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <a class="fa fa-eye">&nbsp;</a>
                        <a class="fa fa-share">&nbsp;</a>
                        <span>| &nbsp;</span>
                        <a class="fa fa-pencil">&nbsp;</a>
                        <a class="fa fa-lock">&nbsp;</a>
                        <a class="fa fa-trash-o"></a>
                    </td>
                </tr>
            </tbody>
        </table>

        <!--Leiste unter Tabelle-->
        <div class="tabn_head">

            <!--Anzahl Einträge-->
            <ul class="tabn_sec">
                <li>Number of entries per page:</li>
                <li>
                    <a id="A1">5</a>&nbsp;|
                </li>
                <li>
                    <a>10</a>&nbsp;|
                </li>
                <li>
                    <a>20</a>&nbsp;|
                </li>
                <li>
                    <a>30</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </li>
            </ul>

            <!--Spaltenauswahl-->
            <ul class="tabn_sec">
                <li>Show/Hide:</li>
                <li>
                    <a id="A2">Size</a>&nbsp;|
                </li>
                <li>
                    <a id="A3">Type</a>&nbsp;|
                </li>
                <li>
                    <a id="A4">Creation</a>
                </li>
            </ul>

            <!--Seitenauswahl-->
            <ul class="tabn_sec righthead">
                <li>Page:</li>
                <li>
                    <a id="A5">1</a>&nbsp;|
                </li>
                <li>
                    <a>2</a>&nbsp;|
                </li>
                <li>
                    <a>3</a>
                </li>
            </ul>

        </div>
        <!--Register Overlay-->
        <div id="lightboxR"  class="bgoverlay" href="#"> </div>
            <div class="lbcontainer">
            <div class="lbcontent">
                 <label for="firstname" class="label">First name </label><br />
                         <input type="text" value="" class="input"> <br />
                 <label for="lastname"  class="label">Last name </label> <br />
                         <input type="text" value="" class="input">   <br />
                 <label for="birthday"  class="label">Birthday </label>  <br />
                         <input type="date" value="" class="input"><br />
                <hr>
                  <label for="username"  class="label">Your username </label>  <br />
                         <input type="text" value="" class="input"><br />
                  <label for="password"  class="label">Your password </label>  <br />
                         <input type="text" value="" class="input"><br />
                   <button> &nbsp; Register &nbsp;</button>
            </div>
            </div>
        <!--LogIn Overlay-->
         <div id="lightboxL"  class="bgoverlay" href="#"> </div>
            <div class="lbcontainerL">
            <div class="lbcontent">
                 <label for="username"  class="label">Username </label>  <br />
                         <input type="text" value="" class="input"><br />
                  <label for="password"  class="label">Password </label>  <br />
                         <input type="text" value="" class="input"><br />
                  <input type="checkbox" class="checkinput"> <label >Remember me </label>
                  <button> &nbsp; Login &nbsp;</button>
            </div>
            </div>
          <!--nutzerinchen Overlay-->
         <div id="lightboxY"  class="bgoverlay" href="#"> </div>
            <div class="lbcontainerY">
            <div class="lbcontent">
                 <label for="name"  class="label">Your Name: </label>  <br />
                         <label for="name" class="labelY">Jane Doe</label><br /><br />
                  <label for="eMail"  class="label">Your Email: </label>  <br />
                         <label for="mail" class="labelY">jane.doe@example.org</label><br /><br />
                  <label for="quote"  class="label">Your Quota (used/max): </label>  <br />
                         <label for="quote" class="labelY">2.5 GB / 7.0 GB </label><br /><br />
                  <button> &nbsp; Logout &nbsp;</button>
            </div>
            </div>
    </article>


    <!-- untere Navigationsleiste -->
    <footer>
        <p id="foot">
            <span>This solution has been created by </span><br />
            <span>Team 29,</span><br />
            <span>Emma M&uuml;ller and </span>
            <span>Sarah Alaghbari</span>
        </p>
    </footer>
</body>
</html>