dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updates to design

Browse Source
build-validation
Rebecca Hollis 5 years ago
parent ab68d7b180
commit 4eb21f9868
12 changed files with 78 additions and 85 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/Email-b_356x280.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/assets/images/FilesImage_WebBanner_1800x600.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/images/GmailCircle_100x100.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/images/InterfaceImagine_356x280.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/Logo-NavBar-NoSubhead-210x50.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/Logo-NavBar-NoSubhead-WhiteRounded30-210x50.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/PaycorLogo2-Circle_100x100.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/assets/images/SocialMedia_356x280.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 146 KiB

BIN
src/assets/images/WorkplaceLogo-Circle_100x100.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

104
src/assets/pages/ResourcesLandingPage.html
Unescape Escape View File

@ -10,35 +10,34 @@
<!-- Custom CSS --> <!-- Custom CSS -->
<title>Resources</title> <title>ResourceFinder</title>
</head> </head>
<link rel="stylesheet" href="styles/theme.css"> <link rel="stylesheet" href="styles/theme.css">
<link rel="stylesheet" href="styles/ResourcesLandingPage.css"> <link rel="stylesheet" href="styles/ResourcesLandingPage.css">
<title>ResourcePoint</title> <title>ResourceFinder</title>
</head> </head>
<body> <body>
<header> <header>
<div class="collapse bg-dark" id="navbarHeader"> <div class="collapse bg-primary" 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> <p class="text-success">You rely on a vast amount of resources to do your job. How can you keep track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder can help you locate the tools you need.</p>
<p class="text-muted">You rely on a vast amount of resources to do your job. How can you keep track of them all? Explore ResourcePoint. From project-management applications to expense reports, this centralized resource center can <i>point</i> you in the right direction.</p>
</div> </div>
<div class="col-sm-4 offset-md-1 py-4"> <div class="col-sm-4 offset-md-1 py-4">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="#" class="text-white">Help</a></li> <li><a href="#" class="text-success">Help</a></li>
<li><a href="#" class="text-white">Feedback</a></li> <li><a href="#" class="text-success">Feedback</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="navbar navbar-dark bg-dark shadow-sm"> <div class="navbar navbar-dark bg-secondary shadow-sm">
<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">
<strong>ResourcePoint</strong> <strong>ResourceFinder</strong>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
@ -48,62 +47,83 @@
</div> </div>
</header> </header>
<main role="main"> <main role="main bg-primary">
<div class="album py-5 bg-light"> <div class="album py-5 bg-primary">
<div class="container"> <div class="container">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search">
</div> </div>
<div class="album py-5 bg-light"> <div class="album py-5">
<div class="container"> <div class="container bg-primary">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="card mb-4 shadow-sm"> <div class="card mb-4 shadow-sm bg-secondary">
<img class="card-img-top" src="../images/InterfaceImagine_356x280.png" alt="Computer screen"> <div class="card-body">
<div class="card-body"> <h7 class="card-text text-white" style="text-align:center">Paycor</h7>
<p class="card-text">Would you like to view a design that has apps and a dashboard? Check out this <a href="ResourcesInterface.html">alternative layout</a>. <p class="card-text text-success">Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.
</p> </p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/PaycorLogo2-Circle_100x100.png" alt="Paycor logo" style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<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-outline-light">Go</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="../images/Email-b_356x280.png" alt="Email image"> <div class="col-md-4">
<div class="card-body"> <div class="card mb-4 shadow-sm bg-secondary">
<p class="card-text">Open your company e-mail application. Your Gmail account offers e-mail, <div class="card-body">
a calendar and instant messaging.</p> <h7 class="card-text text-white" style="text-align:center">Gmail</h7>
<p class="card-text text-success">Access your company e-mail application. Gmail offers e-mail, a calendar and instant messaging to aid collaboration.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/GmailCircle_100x100.png" alt="Gmail logo" style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<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-outline-light">Go</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="../images/SocialMedia_356x280.png" alt="Social media image"> <div class="col-md-4">
<div class="card-body"> <div class="card mb-4 shadow-sm bg-secondary">
<p class="card-text">Get the latest company news and connect with your colleagues. <div class="card-body">
JDSfaulkner uses Workplace by Facebook for sharing information.</p> <h7 class="card-text text-white" style="text-align:center">Workplace</h7>
<p class="card-text text-success">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">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/WorkplaceLogo-Circle_100x100.png" alt="Workplace logo" style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<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-outline-light">Go</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> </div>
</div>
</div> </div>
</div> </div>
</div> </div>

47
src/assets/pages/styles/ResourcesLandingPage.scss
Unescape Escape View File

@ -1,50 +1,21 @@
.main {
background-color: primary;
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
background: theme-color("dark");
background-image: url('../../images/FilesImage_WebBanner_1800x600.png');
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
}
} }
.container {
.jumbotron p:last-child { background-color: secondary;
margin-bottom: 0;
}
.jumbotron h1 {
font-weight: 500;
color: rgb(90, 90, 90);
}
.jumbotron .container {
max-width: 40rem;
background: theme-color("dark");
padding: 2rem;
color: white;
} }
.jumbotron p { .img-thumbnail {
color: rgb(55, 55, 55); background-color: secondary;
} }
footer { .footer {
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 3rem; padding-bottom: 3rem;
background: theme-color("primary"); background: primary;
} }
footer p { .footer p {
margin-bottom: .25rem; margin-bottom: .25rem;
} }

12
src/assets/pages/styles/theme.scss
Unescape Escape View File

@ -1,11 +1,13 @@
$theme-colors: ( $theme-colors: (
"primary": #103171, "primary": #0B031C,
"secondary": #878787, "secondary": #211F37,
"success": #099f4a, "success": #A79D9D,
"info": #93C5D3, "info": #1C1CDE,
"warning": #FFB71C "warning": #523E35
); );
$enable-rounded: true !default;
@import "node_modules/bootstrap/scss/bootstrap"; @import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/variables";

Write Preview
Loading…
Cancel
Save