Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Kursus"
Bootstrap 3.3.0 Snippet by
Rait
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
963
 
0 Fav
Post to Facebook
Tweet this
<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; }
Related:
See More
Free Template
Now UI Kit Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76