2018-01-23 15:38:38 +03:00
<!doctype html>
2017-08-31 15:49:19 +03:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
< link rel = "icon" href = "../../../../favicon.ico" >
< title > Album example for Bootstrap< / title >
<!-- Bootstrap core CSS -->
2018-01-23 15:54:20 +03:00
< link href = "../../../../dist/css/bootstrap-material-design.min.css" rel = "stylesheet" >
2017-08-31 15:49:19 +03:00
<!-- Custom styles for this template -->
< link href = "album.css" rel = "stylesheet" >
< / head >
< body >
2018-01-23 15:38:38 +03:00
< header >
< div class = "collapse bg-dark" id = "navbarHeader" >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-8 col-md-7 py-4" >
< h4 class = "text-white" > About< / h4 >
< p class = "text-muted" > Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.< / p >
< / div >
< div class = "col-sm-4 offset-md-1 py-4" >
< h4 class = "text-white" > Contact< / h4 >
< ul class = "list-unstyled" >
< li > < a href = "#" class = "text-white" > Follow on Twitter< / a > < / li >
< li > < a href = "#" class = "text-white" > Like on Facebook< / a > < / li >
< li > < a href = "#" class = "text-white" > Email me< / a > < / li >
< / ul >
< / div >
2017-08-31 15:49:19 +03:00
< / div >
< / div >
< / div >
2018-01-23 15:38:38 +03:00
< div class = "navbar navbar-dark bg-dark box-shadow" >
< div class = "container d-flex justify-content-between" >
< a href = "#" class = "navbar-brand d-flex align-items-center" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "mr-2" > < path d = "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" > < / path > < circle cx = "12" cy = "13" r = "4" > < / circle > < / svg >
< strong > Album< / strong >
< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarHeader" aria-controls = "navbarHeader" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< / div >
2017-08-31 15:49:19 +03:00
< / div >
2018-01-23 15:38:38 +03:00
< / header >
2017-08-31 15:49:19 +03:00
2018-01-23 15:38:38 +03:00
< main role = "main" >
2017-08-31 15:49:19 +03:00
2018-01-23 15:38:38 +03:00
< section class = "jumbotron text-center" >
< div class = "container" >
< h1 class = "jumbotron-heading" > Album example< / h1 >
< p class = "lead text-muted" > Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.< / p >
< p >
< a href = "#" class = "btn btn-primary my-2" > Main call to action< / a >
< a href = "#" class = "btn btn-secondary my-2" > Secondary action< / a >
< / p >
< / div >
< / section >
2017-08-31 15:49:19 +03:00
2018-01-23 15:38:38 +03:00
< div class = "album py-5 bg-light" >
< div class = "container" >
2017-08-31 15:49:19 +03:00
2018-01-23 15:38:38 +03:00
< div class = "row" >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
2017-08-31 15:49:19 +03:00
2018-01-23 15:38:38 +03:00
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "card mb-4 box-shadow" >
< img class = "card-img-top" data-src = "holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt = "Card image cap" >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
2017-08-31 15:49:19 +03:00
< / div >
< / div >
< / div >
2018-01-23 15:38:38 +03:00
< / main >
2017-08-31 15:49:19 +03:00
< footer class = "text-muted" >
< div class = "container" >
< p class = "float-right" >
< a href = "#" > Back to top< / a >
< / p >
< p > Album example is © Bootstrap, but please download and customize it for yourself!< / p >
< p > New to Bootstrap? < a href = "../../" > Visit the homepage< / a > or read our < a href = "../../getting-started/" > getting started guide< / a > .< / p >
< / div >
< / footer >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2018-01-23 15:38:38 +03:00
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script >
< script > window . jQuery || document . write ( '<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>' ) < / script >
2017-08-31 15:49:19 +03:00
< script src = "../../../../assets/js/vendor/popper.min.js" > < / script >
2018-01-23 15:38:38 +03:00
< script src = "../../../../dist/js/bootstrap.min.js" > < / script >
2017-08-31 15:49:19 +03:00
< script src = "../../../../assets/js/vendor/holder.min.js" > < / script >
< / body >
< / html >
