<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <div class="container"> <div class="col-md-12"> <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation"><a href="#">Minu kursused</a></li> <li role="presentation"><a href="#">Minu konto</a></li> <li role="presentation"><a href="#">Testid</a></li> <li role="presentation" class="active"><a href="#">Logi sisse</a></li> </ul> </nav> <h3 class="text-muted"><span class="glyphicon glyphicon-book greenicon" aria-hidden="true"></span> Veebi<b>kool</b></h3> </div> </div> <div class="col-md-8"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Sissejuhatus teoloogiasse</h2> </div> <div class="panel-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vo4pMVb0R6M?list=PL8dPuuaLjXtOPRKzVLY0jJY-uHOH9KVU6" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="description"> <h2>Kirjeldus</h2> <hr> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</p> </div> <hr> <div class="modules"> <div class="panel panel-default"> <div class="panel-heading">Esimene moodul</div> <ul class="list-group"> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading">Teine moodul</div> <ul class="list-group"> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading">Kolmas moodul</div> <ul class="list-group"> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> <li class="list-group-item"> <span class="badge">3:10</span> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Mooduli pealkiri </li> </ul> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Osale kursusel</h2> </div> <div class="panel-body"> <div class="course-price">36€</div> <div class="rating-stars"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </div> <div class="rating-text">5.0 (12 hinnangut) / 105 õpilast kursuse läbinud</div> <hr> <h4>Kursus sisaldab</h4> <ul> <li>22h videomaterjali</li> <li>15 artikklit</li> <li>Aastane ligipääs</li> </ul> <hr> <button class="btn btn-success btn-lg btn-block registrationbutton"> <b>Registreeru kursusele</b></button> <hr> <h2>Koolitaja</h2> <h4>Kalle Sammal</h4> <p>Lorem ipsum dolor sit amet, duo vide etiam periculis ei, ius inumian lorem iuvaret. Cum nemro assum copiosae despite</p> <p><a href="#">www.kallesammal.com</a> <br> <a href="#">kalle@sammal.com</a></p> </div> </div> </div> </div>

body{ font-size: 17px; font-family: 'Montserrat', sans-serif; } .rating-stars{ font-size: 30px; color: #f4f442; text-align: center; margin-bottom: 10px; } .rating-text{ font-size: 16px; text-align: center; } .nav-pills>li.active>a{ background: #5cb85c; font-weight: bold; border-radius: 30px; padding: 10px 30px; } .nav-pills>li.active>a:hover{ background: #ededed; color: #333; } .nav-pills>li.active>a:focus { background: #ededed; color: #3d3d3d; } .nav-pills>li>a{ color: #3d3d3d; margin: 10px 5px; border-radius: 30px; } .header{ margin-bottom: 20px; margin-top: 20px; } .greenicon{ color: #5cb85c; margin-top:5px; } .course-price{ text-align: center; font-size: 33px; font-weight: bold; } .registrationbutton{ border-radius: 30px; padding: 10px 30px; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #ddd; font-weight: bold; }