@ -5,8 +5,6 @@
< meta charset = "UTF-8" >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document< / title >
< 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" >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css" >
< / head >
< / head >
@ -21,13 +19,23 @@
< button type = "button" class = "btn btn-danger" > Danger< / button >
< button type = "button" class = "btn btn-danger" > Danger< / button >
< button type = "button" class = "btn btn-warning" > Warning< / button >
< button type = "button" class = "btn btn-warning" > Warning< / button >
< / div >
< / div >
< div class = "mt-2" >
< button type = "button" class = "btn btn-outline-default" > Default< / button >
< button type = "button" class = "btn btn-outline-primary" > Primary< / button >
< button type = "button" class = "btn btn-outline-secondary" > Secondary< / button >
< button type = "button" class = "btn btn-outline-info" > Info< / button >
< button type = "button" class = "btn btn-outline-success" > Success< / button >
< button type = "button" class = "btn btn-outline-danger" > Danger< / button >
< button type = "button" class = "btn btn-outline-warning" > Warning< / button >
< / div >
< div class = "mt-2 card-deck" >
< div class = "mt-2 card-deck" >
< div class = "card" >
< div class = "card" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< div class = "card-body" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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" > 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 >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< / div >
@ -43,149 +51,157 @@
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< img class = "card-img-top" src = "https://picsum.photos/1000/600" alt = "Card image cap" >
< div class = "card-body" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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" > 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 >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< / 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 >
< hr >
< div class = "row" >
< div class = "col-md-6" >
< div class = "container" >
< div class = "form-group" >
< form >
< input type = "email" class = "form-control" id = "exampleFormControlInput1" placeholder = "name@example.com" >
< 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 >
< / div >
< div class = "col-md-6" >
< div class = "col-md-6" >
< div class = "form-group" >
< div class = "form-group" >
< input type = "text" placeholder = "Regular" class = "form-control" disabled / >
< input type = "text" placeholder = "Regular" class = "form-control" disabled / >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "row" >
< div class = "col-md-6" >
< div class = "col-md-6" >
< div class = "form-group" >
< div class = "form-group" >
< div class = "input-group mb-4" >
< div class = "input-group mb-4" >
< div class = "input-group-prepend" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > < i class = "ni ni-zoom-split-in" > < / i > < / span >
< 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 >
< input class = "form-control" placeholder = "Search" type = "text" >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = " col-md-6 ">
< div class = " form-group ">
< div class = " form-group ">
< div class = " input-group mb-4 ">
< div class = "input-group mb-4 ">
< input class = "form-control" placeholder = "Birthday" type = "text ">
< input class = "form-control" placeholder = "Birthday" type = "text ">
< div class = "input-group-append ">
< div class = "input-group-append" >
< span class = "input-group-text" > < i class = "ni ni-zoom-split-in" > < / i > < / span >
< span class = "input-group-text" > < i class = "ni ni-zoom-split-in" > < / i > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = " row ">
< div class = " col-md-6 ">
< div class = " col-md-6 ">
< div class = " form-group has-success ">
< div class = "form-group has-success" >
< input type = "text" placeholder = "Success" class = "form-control is-valid" / >
< input type = "text" placeholder = "Success" class = "form-control is-valid" / >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = " col-md-6 ">
< div class = " form-group has-danger ">
< div class = "form-group has-danger" >
< input type = "email" placeholder = "Error Input" class = "form-control is-invalid" / >
< input type = "email" placehol der= "Error Input" class = "form-control is-in valid" / >
< / div>
< / div >
< / div >
< / div >
< / div >
< / div >
< / form >
< / form >
< / div >
< table class = "table" >
< div id = "table-section" class = "container" >
< thead >
< nav aria-label = "Page navigation example" >
< ul class = "pagination" >
< li class = "page-item disabled" >
< a class = "page-link" href = "#" aria-label = "Previous" > «< / a >
< / li >
< li class = "page-item active" > < 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" > »< / a >
< / li >
< / ul >
< / nav >
< table class = "table" >
< thead >
< tr >
< tr >
< th class = "text-center" > #< / th >
< th class = "text-center" > #< / th >
< th > Name< / th >
< th > Name< / th >
< th > Job Position< / th >
< th > Job Position< / th >
< th > Since< / th >
< th > Since< / th >
< th class = "text-right" > Salary< / th >
< th class = "text-right" > Salary< / th >
< th class = "text-right" > Actions< / th >
< th class = "text-right" > Actions< / th >
< / tr >
< / tr >
< / thead >
< / thead >
< tbody >
< tbody >
< tr >
< tr >
< td class = "text-center" > 1< / td >
< td class = "text-center" > 1< / td >
< td > Andrew Mike< / td >
< td > Andrew Mike< / td >
< td > Develop< / td >
< td > Develop< / td >
< td > 2013< / td >
< td > 2013< / td >
< td class = "text-right" > € 99,225< / td >
< td class = "text-right" > € 99,225< / td >
< td class = "td-actions text-right" >
< td class = "td-actions text-right" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm " data-original-title = "" title = "" >
< 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 >
< i class = "ni ni-circle-08 pt-1" > < / i >
< / button >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = "" title = "" >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = ""
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
title="">
< / button >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< / button >
< i class = "ni ni-fat-remove pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< / button >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / td >
< / button >
< / td >
< / tr >
< / tr >
< tr >
< tr >
< td class = "text-center" > 2< / td >
< td class = "text-center" > 2< / td >
< td > John Doe< / td >
< td > John Doe< / td >
< td > Design< / td >
< td > Design< / td >
< td > 2012< / td >
< td > 2012< / td >
< td class = "text-right" > € 89,241< / td >
< td class = "text-right" > € 89,241< / td >
< td class = "td-actions text-right" >
< td class = "td-actions text-right" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm " data-original-title = "" title = "" >
< 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 >
< i class = "ni ni-circle-08 pt-1" > < / i >
< / button >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = "" title = "" >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm " data-original-title = ""
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
title="">
< / button >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< / button >
< i class = "ni ni-fat-remove pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm " data-original-title = "" title = "" >
< / button >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / td >
< / button >
< / td >
< / tr >
< / tr >
< tr >
< tr >
< td class = "text-center" > 3< / td >
< td class = "text-center" > 3< / td >
< td > Alex Mike< / td >
< td > Alex Mike< / td >
< td > Design< / td >
< td > Design< / td >
< td > 2010< / td >
< td > 2010< / td >
< td class = "text-right" > € 92,144< / td >
< td class = "text-right" > € 92,144< / td >
< td class = "td-actions text-right" >
< 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 = "" >
< button type = "button" rel = "tooltip" class = "btn btn-info btn-icon btn-sm btn-simple" data-original-title = ""
< i class = "ni ni-circle-08 pt-1" > < / i >
title="">
< / button >
< i class = "ni ni-circle-08 pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm btn-simple" data-original-title = "" title = "" >
< / button >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< button type = "button" rel = "tooltip" class = "btn btn-success btn-icon btn-sm btn-simple"
< / button >
data-original-title="" title="">
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm btn-simple" data-original-title = "" title = "" >
< i class = "ni ni-settings-gear-65 pt-1" > < / i >
< i class = "ni ni-fat-remove pt-1" > < / i >
< / button >
< / button >
< button type = "button" rel = "tooltip" class = "btn btn-danger btn-icon btn-sm btn-simple" data-original-title = ""
< / td >
title="">
< i class = "ni ni-fat-remove pt-1" > < / i >
< / button >
< / td >
< / tr >
< / tr >
< / tbody >
< / tbody >
< / table >
< / table >
< / div >
< / body >
< div class = "col-md-6" >
< div class = "col-md-6" >
< div class = "card" >
< div class = "card" >