@ -1,26 +1,29 @@
<!doctype html>
<!doctype html>
< html lang = "en" >
< html lang = "en" >
< head >
< head >
<!-- Required meta tags -->
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Bootstrap CSS -->
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href = "styles/bootstrap.css" >
<!-- Custom CSS -->
<!-- Custom CSS -->
< link rel = "stylesheet" href = "styles/theme.css" >
< link rel = "stylesheet" href = "styles/ResourcesLandingPage.css" >
< link rel = "stylesheet" href = "styles/ResourcesLandingPage.css" >
< title > Resources< / title >
< title > Resources< / title >
< / head >
< / head >
< body >
< body >
< header >
< header >
< div class = "collapse bg-dark" id = "navbarHeader" >
< div class = "collapse bg-dark" id = "navbarHeader" >
< div class = "container" >
< div class = "container" >
< div class = "row" >
< div class = "row" >
< div class = "col-sm-8 col-md-7 py-4" >
< div class = "col-sm-8 col-md-7 py-4" >
< h4 class = "text-white" > About< / h4 >
< 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 >
< 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 >
< div class = "col-sm-4 offset-md-1 py-4" >
< div class = "col-sm-4 offset-md-1 py-4" >
< h4 class = "text-white" > Contact< / h4 >
< h4 class = "text-white" > Contact< / h4 >
@ -37,13 +40,16 @@
< div class = "container d-flex justify-content-between" >
< div class = "container d-flex justify-content-between" >
< a href = "#" class = "navbar-brand d-flex align-items-center" >
< a href = "#" class = "navbar-brand d-flex align-items-center" >
< svg width = "1em" height = "1em" viewBox = "0 0 16 16" class = "bi bi-book" fill = "currentColor" xmlns = "http://www.w3.org/2000/svg" >
< svg width = "1em" height = "1em" viewBox = "0 0 16 16" class = "bi bi-book" fill = "currentColor"
< path fill-rule = "evenodd" d = "M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" / >
xmlns="http://www.w3.org/2000/svg">
< path fill-rule = "evenodd"
d="M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
< / svg >
< / svg >
< strong > Resources< / strong >
< strong > Resources< / strong >
< / a >
< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarHeader" aria-controls = "navbarHeader" aria-expanded = "false" aria-label = "Toggle navigation" >
< 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 >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< / button >
< / div >
< / div >
@ -55,7 +61,8 @@
< section class = "jumbotron text-center" >
< section class = "jumbotron text-center" >
< div class = "container" >
< div class = "container" >
< h1 > Resources< / h1 >
< h1 > Resources< / h1 >
< p class = "font-weight-normal" style = "font-size: 17px" > Whether you're looking for a folder, document, tool, website or application, you can find it here.< / p >
< p class = "font-weight-normal" style = "font-size: 17px" > Whether you're looking for a folder, document, tool,
website or application, you can find it here.< / p >
< div >
< div >
< a href = "#" class = "btn btn-primary my-2" > Learn more< / a >
< a href = "#" class = "btn btn-primary my-2" > Learn more< / a >
< a href = "#" class = "btn btn-secondary my-2" > Send feedback< / a >
< a href = "#" class = "btn btn-secondary my-2" > Send feedback< / a >
@ -71,7 +78,9 @@
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< img class = "card-img-top" src = "../images/InterfaceImagine_356x280.png" alt = "Computer screen" >
< img class = "card-img-top" src = "../images/InterfaceImagine_356x280.png" alt = "Computer screen" >
< div class = "card-body" >
< div class = "card-body" >
< p class = "card-text" > Would you like to view a design that looks more like an application than a web page? Check out this < a href = "ResourcesInterface.html" > alternative layout< / a > .< / p >
< p class = "card-text" > Would you like to view a design that looks more like an application
than a web page? Check out this < a href = "ResourcesInterface.html" > alternative layout< / a > .
< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -86,7 +95,8 @@
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< img class = "card-img-top" src = "../images/Email-b_356x280.png" alt = "Email image" >
< img class = "card-img-top" src = "../images/Email-b_356x280.png" alt = "Email image" >
< div class = "card-body" >
< div class = "card-body" >
< p class = "card-text" > Open your company e-mail application. Your Gmail account offers e-mail, a calendar and instant messaging.< / p >
< p class = "card-text" > Open your company e-mail application. Your Gmail account offers e-mail,
a calendar and instant messaging.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -101,7 +111,8 @@
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< img class = "card-img-top" src = "../images/SocialMedia_356x280.png" alt = "Social media image" >
< img class = "card-img-top" src = "../images/SocialMedia_356x280.png" alt = "Social media image" >
< div class = "card-body" >
< div class = "card-body" >
< p class = "card-text" > Get the latest company news and connect with your colleagues. JDSfaulkner uses Workplace by Facebook for sharing information.< / p >
< p class = "card-text" > Get the latest company news and connect with your colleagues.
JDSfaulkner uses Workplace by Facebook for sharing information.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -115,9 +126,15 @@
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -130,9 +147,15 @@
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -145,9 +168,15 @@
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -161,9 +190,15 @@
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -176,9 +211,15 @@
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -191,9 +232,15 @@
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img" aria-label = "Placeholder: Thumbnail" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text > < / svg >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
role="img" aria-label="Placeholder: Thumbnail">< title > Placeholder< / title >
< rect width = "100%" height = "100%" fill = "#55595c" / >
< text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > Thumbnail< / text >
< / svg >
< div class = "card-body" >
< 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 >
< 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 = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< 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" > View< / button >
@ -215,14 +262,11 @@
< p class = "float-right" >
< p class = "float-right" >
< a href = "#" > Back to top< / a >
< a href = "#" > Back to top< / a >
< / p >
< / p >
<!-- <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> -->
<!-- <p>New to Bootstrap? <a href="https://getbootstrap.com/">Visit the homepage</a> or read our <a href="/docs/4.5/getting - started/introduction/">getting started guide</a>.</p> -->
< / div >
< / div >
< / footer >
< / footer >
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
< script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > < / script >
< / body >
< script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous" > < / script >
< script > let $ = require ( 'jquery' ) ; < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity = "sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin = "anonymous" > < / script >
< script > require ( 'popper.js' ) < / script >
-->
< script > require ( 'bootstrap' ) < / script >
< / body >
< / html >
< / html >