<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document< / title >
< link rel = "stylesheet" href = "css/spacelab-theme.css" >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css" >
< / head >
< body >
< div class = "container" >
< div class = "mt-2" >
< button type = "button" class = "btn btn-default" > Default< / button >
< button type = "button" class = "btn btn-primary" > Primary< / button >
< button type = "button" class = "btn btn-secondary" > Secondary< / button >
< button type = "button" class = "btn btn-info" > Info< / button >
< button type = "button" class = "btn btn-success" > Success< / button >
< button type = "button" class = "btn btn-danger" > Danger< / button >
< button type = "button" class = "btn btn-warning" > Warning< / button >
< / div >
< div class = "mt-2 card-deck" >
< div class = "card" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< div class = "card" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This card has supporting text below as a natural lead-in to additional content.< / p >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< div class = "card" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.< / p >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< nav aria-label = "Page navigation example" >
< ul class = "pagination" >
< li class = "page-item" >
< a class = "page-link" href = "#" aria-label = "Previous" >
< i class = "fa fa-angle-left" > < / i >
< span class = "sr-only" > Previous< / span >
< / a >
< / li >
< li class = "page-item" > < a class = "page-link" href = "#" > 1< / a > < / li >
< li class = "page-item" > < a class = "page-link" href = "#" > 2< / a > < / li >
< li class = "page-item" > < a class = "page-link" href = "#" > 3< / a > < / li >
< li class = "page-item" >
< a class = "page-link" href = "#" aria-label = "Next" >
< i class = "fa fa-angle-right" > < / i >
< span class = "sr-only" > Next< / span >
< / a >
< / li >
< / ul >
< / nav >
< form >
< div class = "row" >
< div class = "col-md-6" >
< div class = "form-group" >
< input type = "email" class = "form-control" id = "exampleFormControlInput1" placeholder = "name@example.com" >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "form-group" >
< input type = "text" placeholder = "Regular" class = "form-control" disabled / >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "form-group" >
< div class = "input-group mb-4" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > < i class = "ni ni-zoom-split-in" > < / i > < / span >
< / div >
< input class = "form-control" placeholder = "Search" type = "text" >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "form-group" >
< div class = "input-group mb-4" >
< input class = "form-control" placeholder = "Birthday" type = "text" >
< div class = "input-group-append" >
< span class = "input-group-text" > < i class = "ni ni-zoom-split-in" > < / i > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "form-group has-success" >
< input type = "text" placeholder = "Success" class = "form-control is-valid" / >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "form-group has-danger" >
< input type = "email" placeholder = "Error Input" class = "form-control is-invalid" / >
< / div >
< / div >
< / div >
< / form >
< table class = "table" >
< thead >
< tr >
< th class = "text-center" > #< / th >
< th > Name< / th >
< th > Job Position< / th >
< th > Since< / th >
< th class = "text-right" > Salary< / th >
< th class = "text-right" > Actions< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td class = "text-center" > 1< / td >
< td > Andrew Mike< / td >
< td > Develop< / td >
< td > 2013< / td >
< td class = "text-right" > € 99,225< / td >
< td class = "td-actions text-right" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-circle-08 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / button >
< / td >
< / tr >
< tr >
< td class = "text-center" > 2< / td >
< td > John Doe< / td >
< td > Design< / td >
< td > 2012< / td >
< td class = "text-right" > € 89,241< / td >
< td class = "td-actions text-right" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-circle-08 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / button >
< / td >
< / tr >
< tr >
< td class = "text-center" > 3< / td >
< td > Alex Mike< / td >
< td > Design< / td >
< td > 2010< / td >
< td class = "text-right" > € 92,144< / td >
< td class = "td-actions text-right" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm btn-simple" data-original-title = "" title = "" >
< i class = "ni ni-circle-08 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm btn-simple" data-original-title = "" title = "" >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm btn-simple" data-original-title = "" title = "" >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / button >
< / td >
< / tr >
< / tbody >
< / table >
< div class = "col-md-6" >
< div class = "card" >
< div class = "card-body" >
< div class = "icon icon-shape icon-shape-info rounded-circle shadow mb-4" >
< i class = "bi bi-arrow-bar-up" > < / i >
< / div >
< h5 class = "h3" > Components< / h5 >
< p > Argon comes with over 70 handcrafted components.< / p >
< / div >
< / div >
< div class = "card" >
< div class = "card-body" >
< div class = "icon icon-shape bg-gradient-primary rounded-circle shadow mb-4" >
< i class = "bi bi-arrow-bar-up" > < / i >
< / div >
< h5 class = "h3" > Plugins< / h5 >
< p > Fully integrated and extendable third-party plugins that you will love.< / p >
< / div >
< / div >
< / div >
< / body >
< style >
.bi{
line-height: 0;
}
< / style >
< / html >