Untitled


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


</head>
<body>


        <div class="container-fluid">
                <div class="row">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                                  <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse col order-first" id="navbarTogglerDemo01">
                                  <a class="navbar-brand" href="#"><img src="Savonia.png"></a>
                                  <ul class="navbar-nav ml-auto col order-last; ">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="#">Alkuun <span class="sr-only">/current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Wilma</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Reppu</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Työkalut
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                    <a class="dropdown-item" href="#">Yhteystiedot</a>
                                                    <a class="dropdown-item" href="#">Kartta</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">moodle</a>
                                                  </div>
                                        </li>
                                    </ul>
                                  <form class="form-inline mr-auto">
                                        <input class="form-control mr-sm-2"  type="tunnus" id="tunnus" placeholder="Tunnus">
                                        <input class="form-control mr-sm-2"  type="salasana" id="tunnus" placeholder="Salasana">
                                        <button class="button  btn-outline-success" type="kirjaudu">Kirjaudu</button>
                                </form>
                                </div>
                              </nav>
                </div>


                <div class="row my-3 px-3">
                <div class="form-group col-4">
                        <form>
                            <div class="form-group">
                                        <label for="exampleInputEmail1">Opiskelijanumero</label>
                                        <input type="text" class="form-control" id="Opiskelijanumero">
                                      </div>
                            <div class="form-group">
                                        <label for="Aloitusvuosi">Aloitusvuosi</label>
                                        <input type="password" class="form-control">
                                      </div>
                                      <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="muista">
                                        <label class="form-check-label" for="muista">Muista minut.</label>
                                      </div>
                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Tarkista</button>

                                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                              <div class="modal-content">
                                                <div class="modal-header">
                                                  <h5 class="modal-title" id="exampleModalLabel">Tietojen tarkastus</h5>
                                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                  </button>
                                                </div>
                                                <div class="modal-body">
                                                  Tarkistatko ovatko ao. tiedot oikein:
                                                </div>
                                                <div class="modal-footer">
                                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Sulje</button>
                                                  <button type="button" class="btn btn-primary">Tallenna tiedot</button>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

                        </form>
                      </div>
                      <div class="col-8 my-3 px-3">
                            <table class="table table-hover">
                                    <thead>
                                      <tr>
                                        <th scope="col">Opintojakso</th>
                                        <th scope="col">Suorituspvm</th>
                                        <th scope="col">Arvosana</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <th scope="row">1</th>
                                        <td>Ohjelmoinnin perusteet</td>
                                        <td>3.4.2016</td>
                                        <td>2/5</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">2</th>
                                        <td>Tietorakenteet ja Algoritmit</td>
                                        <td>16.2.2016</td>
                                        <td>5/5</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">3</th>
                                        <td>Matematiikka I</td>
                                        <td>18.3.2017</td>
                                        <td>5/5</td>
                                      </tr>
                                    </tbody>
                                  </table>
                      </div>

                    </div>
                    <div class="row my-3 px-3">
                            <div class="col-4">
                              <p>2017-2018</p>
                            </div>
                            <div class="col-4">
                              <ul style="list-style: none">
                                  <li><b>Toimipisteet</b></li>
                                  <li>Opistotie</li>
                                  <li>Technopolis</li>
                                  <li>Varkaus</li>
                              </ul>
                            </div>
                            <div class="col-4">
                              <ul style="list-style:none">
                                  <li><b>Tietoja</b></li>
                                  <li>Yhteystiedot</li>
                                  <li>Ota thteyttä</li>
                              </ul>
                            </div>


        <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>