Mohammed Tantawy
7 years ago
18 changed files with 782 additions and 201 deletions
Split View
Diff Options
-
+3 -1package.json
-
+66 -21src/_sidebar.html
-
+2 -2src/_topbar.html
-
+141 -0src/ad-details.html
-
+31 -28src/ads.html
-
+51 -91src/ads_1.html
-
BINsrc/assets/static/images/user-testing.jpg
-
+234 -47src/assets/styles/nomit.scss
-
+2 -1src/assets/styles/spec/settings/baseColors.scss
-
+5 -0src/assets/styles/spec/settings/fonts.scss
-
+97 -0src/assets/styles/style.css
-
+2 -2src/companies.html
-
+2 -2src/index.html
-
+5 -2src/profile.html
-
+2 -2src/referees.html
-
+135 -0src/reports.html
-
+2 -2src/users.html
-
+2 -0webpack/plugins/htmlPlugin.js
+ 3
- 1
package.json
View File
+ 66
- 21
src/_sidebar.html
View File
+ 2
- 2
src/_topbar.html
View File
+ 141
- 0
src/ad-details.html
View File
| @ -0,0 +1,141 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||
| <!-- Bootstrap CSS --> | |||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |||
| <link rel="stylesheet" href="assets/styles/style.css"> | |||
| <title>About the Job</title> | |||
| <!-- Fonts --> | |||
| <style> | |||
| @import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro'); | |||
| </style> | |||
| </head> | |||
| <body class="app"> | |||
| <!-- @TOC --> | |||
| <!-- =================================================== --> | |||
| <!-- | |||
| + @Page Loader | |||
| + @App Content | |||
| - #Left Sidebar | |||
| > $Sidebar Header | |||
| > $Sidebar Menu | |||
| - #Main | |||
| > $Topbar | |||
| > $App Screen Content | |||
| --> | |||
| <!-- @Page Loader --> | |||
| <!-- =================================================== --> | |||
| <div id='loader'> | |||
| <div class="spinner"></div> | |||
| </div> | |||
| <script> | |||
| window.addEventListener('load', () => { | |||
| const loader = document.getElementById('loader'); | |||
| setTimeout(() => { | |||
| loader.classList.add('fadeOut'); | |||
| }, 300); | |||
| }); | |||
| </script> | |||
| <!-- @App Content --> | |||
| <!-- =================================================== --> | |||
| <div> | |||
| ${require('html-loader!./_sidebar.html')} | |||
| <!-- #Main ============================ --> | |||
| <div class="page-container"> | |||
| ${require('html-loader!./_topbar.html')} | |||
| <!-- ### $App Screen Content ### --> | |||
| <main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;"> | |||
| <div class="col-8 mb-3"> | |||
| <h1>About the Job</h1> | |||
| </div> | |||
| <!-- ### Job Details Cards ### --> | |||
| <div class="row"> | |||
| <div class="col-sm-6"> | |||
| <div class="card"> | |||
| <div class="row"> | |||
| <div class="col-3 mt-4 "> | |||
| <img class="img-fluid ml-4 mb-4 rounded-circle img-responsive" style="height: 100px" src="assets/static/images/nomit-logo.png" alt="company" class="avatar"> | |||
| </div> | |||
| <div class="col-9 card-body"> | |||
| <h2 class="card-title mt-4 mr-4">Graphic Design Internship</h2> | |||
| <h6 class="card-title mr-4">Great Southern Press</h6> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="card"> | |||
| <div class="card-body"> | |||
| <h5 class="card-title mt-4 ml-4 mr-4">About the business:</h5> | |||
| <p class="card-text ml-4 mr-4">Great Southern Press is a leading B2B publishing and events company built on partnerships with industry. We deliver quality business information to our industries and great marketing results to our clients. | |||
| We build long-lasting partnerships with our industry partners in the energy and infrastructure sectors, aligning the success of our business with the continued growth and expansion of the industries we publish for. | |||
| </p> | |||
| <h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5> | |||
| <p class="card-text ml-4 mb-4 mr-4">This part-time role will suit a university graduate or someone looking for an entry-level design position. The successful candidate will be involved in all areas of design including:<br><br> | |||
| • Publication layout (annual directories, books etc).<br> | |||
| • Creation of artwork for print and online advertisements.<br> | |||
| • Wallcharts, flyers, brochures and other print design as required.<br> | |||
| • Event collateral including branding, signage, handbooks etc.<br> | |||
| • Designs for website, email communications and social media.<br><br> | |||
| Reporting to the Head of Design, you will have an opportunity to work with and be mentored by someone with more than 10 years’ industry experience. | |||
| </p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="col-sm-6"> | |||
| <div class="card"> | |||
| <div class="card-body"> | |||
| <h5 class="card-title mt-4 ml-4 mr-4">Reviews</h5> | |||
| <p class="card-text ml-4 mb-4 mr-4">With supporting text below as a natural lead-in to additional content.</p> | |||
| <p class="card-text ml-4 mb-4 mr-4"><small class="text-muted">Last updated 3 mins ago</small></p> | |||
| </div> | |||
| </div> | |||
| <div class="row mt-3"> | |||
| <button class="col-5 btn" href="#"> | |||
| <span>Apply Now</span> | |||
| </button> | |||
| <button class="col-5 btn-border" href="#"> | |||
| <span>Sign in</span> | |||
| </button> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </main> | |||
| </div><!-- page-container --> | |||
| </div> <!-- App Content --> | |||
| <!-- ### $App Screen Footer ### --> | |||
| <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> | |||
| <span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span> | |||
| </footer> | |||
| <!-- Optional JavaScript --> | |||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |||
| </body> | |||
| </html> | |||
+ 31
- 28
src/ads.html
View File
+ 51
- 91
src/ads_1.html
View File
BIN
src/assets/static/images/user-testing.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 457 | Height: 457 | Size: 33 KiB |
+ 234
- 47
src/assets/styles/nomit.scss
View File
+ 2
- 1
src/assets/styles/spec/settings/baseColors.scss
View File
+ 5
- 0
src/assets/styles/spec/settings/fonts.scss
View File
+ 97
- 0
src/assets/styles/style.css
View File
| @ -0,0 +1,97 @@ | |||
| /* FONT SETTINGS */ | |||
| body{ | |||
| background-color: #F4F4F4; | |||
| } | |||
| *{ | |||
| font-family: 'Source Sans Pro', sans-serif; | |||
| color: #454545; | |||
| font-size: 14px; | |||
| } | |||
| h1{ | |||
| font-family: 'Fredoka One', cursive; | |||
| color: #501D89; | |||
| font-size: 28px; | |||
| } | |||
| h2{ | |||
| font-family: 'Fredoka One', cursive; | |||
| color: #454545; | |||
| font-size: 24px; | |||
| } | |||
| h3{ | |||
| font-family: 'Source Sans Pro', sans-serif; | |||
| color: #454545; | |||
| font-size: 20px; | |||
| font-weight: bold; | |||
| } | |||
| h5{ | |||
| font-family: 'Source Sans Pro', sans-serif; | |||
| color: #454545; | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| } | |||
| h6{ | |||
| font-family: 'Source Sans Pro', sans-serif; | |||
| font-size: 16px; | |||
| color: #888888; | |||
| } | |||
| /* BUTTONS */ | |||
| .btn span{ | |||
| color: #FFFFFF; | |||
| font-weight: bold; | |||
| } | |||
| .btn-border span { | |||
| color: #501DB9; | |||
| font-weight: bold; | |||
| align-items: center; | |||
| background: #F4F4F4; | |||
| border-radius: 23px; | |||
| display: flex; | |||
| justify-content: center; | |||
| height: 100%; | |||
| transition: background .5s ease; | |||
| width: 100%; | |||
| } | |||
| .btn-border:hover { | |||
| color: #FFFFFF; | |||
| } | |||
| .btn-border:hover span { | |||
| background: transparent; | |||
| color: #FFFFFF; | |||
| } | |||
| .btn, .btn-border { | |||
| background-image: linear-gradient(-45deg, #501DB9 0%, #EE38A4 100%); | |||
| border-radius: 23px; | |||
| box-sizing: border-box; | |||
| height: 40px; | |||
| margin: 0 auto; | |||
| padding: 4px; | |||
| position: relative; | |||
| text-decoration: none; | |||
| text-transform: uppercase; | |||
| letter-spacing: 0.05em; | |||
| } | |||
| /* REPORTS PAGE */ | |||
| .table .thead-purple-border th{ | |||
| border-top: transparent; | |||
| border-bottom-color: #8B00B1; | |||
| border-width: 3px; | |||
| } | |||
| .table { | |||
| background-color: #FFFFFF; | |||
| } | |||
+ 2
- 2
src/companies.html
View File
+ 2
- 2
src/index.html
View File
+ 5
- 2
src/profile.html
View File
+ 2
- 2
src/referees.html
View File
+ 135
- 0
src/reports.html
View File
| @ -0,0 +1,135 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||
| <!-- Bootstrap CSS --> | |||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |||
| <link rel="stylesheet" href="assets/styles/style.css"> | |||
| <title>Reports</title> | |||
| <style> | |||
| @import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro'); | |||
| </style> | |||
| </head> | |||
| <body class="app"> | |||
| <!-- @TOC --> | |||
| <!-- =================================================== --> | |||
| <!-- | |||
| + @Page Loader | |||
| + @App Content | |||
| - #Left Sidebar | |||
| > $Sidebar Header | |||
| > $Sidebar Menu | |||
| - #Main | |||
| > $Topbar | |||
| > $App Screen Content | |||
| --> | |||
| <!-- @Page Loader --> | |||
| <!-- =================================================== --> | |||
| <div id='loader'> | |||
| <div class="spinner"></div> | |||
| </div> | |||
| <script> | |||
| window.addEventListener('load', () => { | |||
| const loader = document.getElementById('loader'); | |||
| setTimeout(() => { | |||
| loader.classList.add('fadeOut'); | |||
| }, 300); | |||
| }); | |||
| </script> | |||
| <!-- @App Content --> | |||
| <!-- =================================================== --> | |||
| <div> | |||
| ${require('html-loader!./_sidebar.html')} | |||
| <!-- #Main ============================ --> | |||
| <div class="page-container"> | |||
| ${require('html-loader!./_topbar.html')} | |||
| <!-- ### $App Screen Content ### --> | |||
| <main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;"> | |||
| <div class="col-8 ml-1 mb-3"> | |||
| <h1>Reports</h1> | |||
| </div> | |||
| <!-- ### Table ### --> | |||
| <div class="container"> | |||
| <table class="table table-hover"> | |||
| <thead class="thead-purple-border"> | |||
| <tr> | |||
| <th scope="col">#</th> | |||
| <th scope="col">First Name</th> | |||
| <th scope="col">Last Name</th> | |||
| <th scope="col">Username</th> | |||
| <th scope="col">State</th> | |||
| <th scope="col">Language</th> | |||
| <th scope="col">Fields</th> | |||
| <th scope="col">Member Since</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <th scope="row">1</th> | |||
| <td>Tony</td> | |||
| <td>Stark</td> | |||
| <td>tonystark</td> | |||
| <td>VIC</td> | |||
| <td>English</td> | |||
| <td>Hospitality</td> | |||
| <td>Feb 2019</td> | |||
| </tr> | |||
| <tr> | |||
| <th scope="row">2</th> | |||
| <td>David</td> | |||
| <td>James</td> | |||
| <td>davidjames</td> | |||
| <td>VIC</td> | |||
| <td>English, Italian</td> | |||
| <td>Design</td> | |||
| <td>Feb 2019</td> | |||
| </tr> | |||
| <tr> | |||
| <th scope="row">3</th> | |||
| <td>Miro</td> | |||
| <td>Kirov</td> | |||
| <td>mirokirov</td> | |||
| <td>VIC</td> | |||
| <td>English, Japanese</td> | |||
| <td>IT</td> | |||
| <td>Feb 2019</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| </div> | |||
| </main> | |||
| </div><!-- page-container --> | |||
| </div> <!-- App Content --> | |||
| <!-- ### $App Screen Footer ### --> | |||
| <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> | |||
| <span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span> | |||
| </footer> | |||
| <!-- Optional JavaScript --> | |||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |||
| </body> | |||
| </html> | |||