Francesca Sperati
7 years ago
5 changed files with 384 additions and 12 deletions
Unified View
Diff Options
-
+9 -3src/_topbar.html
-
+21 -1src/assets/styles/nomit.scss
-
+155 -8src/index.html
-
+198 -0src/new-ad.html
-
+1 -0webpack/plugins/htmlPlugin.js
+ 9
- 3
src/_topbar.html
View File
+ 21
- 1
src/assets/styles/nomit.scss
View File
+ 155
- 8
src/index.html
View File
+ 198
- 0
src/new-ad.html
View File
| @ -0,0 +1,198 @@ | |||||
| <!DOCTYPE html> | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||||
| <title>About the Job</title> | |||||
| <style> | |||||
| #loader { | |||||
| transition: all 0.3s ease-in-out; | |||||
| opacity: 1; | |||||
| visibility: visible; | |||||
| position: fixed; | |||||
| height: 100vh; | |||||
| width: 100%; | |||||
| background: #fff; | |||||
| z-index: 90000; | |||||
| } | |||||
| #loader.fadeOut { | |||||
| opacity: 0; | |||||
| visibility: hidden; | |||||
| } | |||||
| .spinner { | |||||
| width: 40px; | |||||
| height: 40px; | |||||
| position: absolute; | |||||
| top: calc(50% - 20px); | |||||
| left: calc(50% - 20px); | |||||
| background-color: #333; | |||||
| border-radius: 100%; | |||||
| -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; | |||||
| animation: sk-scaleout 1.0s infinite ease-in-out; | |||||
| } | |||||
| @-webkit-keyframes sk-scaleout { | |||||
| 0% { -webkit-transform: scale(0) } | |||||
| 100% { | |||||
| -webkit-transform: scale(1.0); | |||||
| opacity: 0; | |||||
| } | |||||
| } | |||||
| @keyframes sk-scaleout { | |||||
| 0% { | |||||
| -webkit-transform: scale(0); | |||||
| transform: scale(0); | |||||
| } 100% { | |||||
| -webkit-transform: scale(1.0); | |||||
| transform: scale(1.0); | |||||
| opacity: 0; | |||||
| } | |||||
| } | |||||
| </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')} | |||||
| <div class="page-container"> | |||||
| ${require('html-loader!./_topbar.html')} | |||||
| <!-- ### $App Screen Content ### --> | |||||
| <main class='main-content bgc-grey-300'> | |||||
| <div id='mainContent row'> | |||||
| <div class="row content-title mT-60"> | |||||
| <h1 class="col-8 ml-1 mb-4">Create a new Internship Ad</h1> | |||||
| </div> | |||||
| <div class=" gap-30 masonry pos-r"> <!-- #content container ===== --> | |||||
| <div class="masonry-sizer col-md-6 "></div> | |||||
| <!-- ### Job Details Card ### --> | |||||
| <form> | |||||
| <div class="masonry-item w-50"> | |||||
| <div class="card item-box"> | |||||
| <div class="row"> | |||||
| <div class="col-2"> | |||||
| <img class="img-fluid ml-4 mb-4 companies-update-img" src="assets/static/images/nomit-logo.png" alt="company" class="avatar"> | |||||
| </div> | |||||
| <div class="col-9 card-body"> | |||||
| <textarea id="description" class="form-h2 ard-text" name="story" rows="1" cols="11" required>Job Name</textarea> | |||||
| <h6 class="card-title mr-4">Name of the Company loggedin</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> | |||||
| <textarea id="description" class=" col-11 company-description ard-text ml-4 mr-10" name="story" rows="5" required>Please, include here a briefh description of your company, helping new users to understand your goals and target</textarea> | |||||
| <h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5> | |||||
| <textarea id="description" class=" col-11 company-description ard-text ml-4 mr-10" name="story" rows="5" required>Please, include here a briefh description of the role, summarizeing the essential responsibilities, activities, qualifications and skills for a role. </textarea> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!-- ### Other Info Card ### --> | |||||
| <div class="masonry-item w-50 "> | |||||
| <div class="card item-box"> | |||||
| <div class="card-body"> | |||||
| <h5 class="card-title mt-4 ml-4 mr-4">Location:</h5> | |||||
| <label class="">Address</label> | |||||
| <input type="text" class="form-control" id="" placeholder="Melbourne, CBD & Inner Suburbs" required> | |||||
| <div class="form-row"> | |||||
| <div class="mt-2 form-group col-md-6"> | |||||
| <label for="inputCity">City</label> | |||||
| <input type="text" class="form-control" id="inputCity" required> | |||||
| </div> | |||||
| <div class="mt-2 form-group col-md-4"> | |||||
| <label for="inputState">State</label> | |||||
| <select id="inputState" class="form-control" required> | |||||
| <option selected>Choose...</option> | |||||
| <option>...</option> | |||||
| </select> | |||||
| </div> | |||||
| <div class="mt-2 form-group col-md-2"> | |||||
| <label for="inputZip">Zip</label> | |||||
| <input type="text" class="form-control" id="inputZip" required> | |||||
| </div> | |||||
| </div> | |||||
| <h5 class="card-title mt-4 ml-4 mr-4">Application close:</h5> | |||||
| <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Application Closing Data" data-provide="datepicker"> | |||||
| <h5 class="card-title mt-4 ml-4 mr-4">Main Classification:</h5> | |||||
| <input type="text" class="form-control" id="" placeholder="Industry" required> | |||||
| <h5 class="card-title mt-4 ml-4 mr-4">Skills:</h5> | |||||
| <input type="text" class="form-control" id="" placeholder="Preofessions" value="" > | |||||
| <div class="mt-4"> | |||||
| <div class=" ml-4 mb-4 btn btn-industry mt-4">Graphic Design</div> | |||||
| <div class="ml-1 mb-4 btn btn-skills">Adobe Creaetive CC</div> | |||||
| <div class="ml-1 mb-4 btn btn-skills">Illustration</div> | |||||
| </div> | |||||
| <p class="card-text ml-4 my-4"><small class="text-muted">Posted 3 days ago</small></p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!-- ### Buttons ### --> | |||||
| <div class="masonry-item w-50 m-auto btn-centered-container "> | |||||
| <button type="submit" href="#" class="col-5 mr-1 btn btn-gradient btn-centered mt-6">Create</button> | |||||
| <button type="button" href="#" class="col-5 ml-1 btn btn-border btn-centered mt-6">Save</button> | |||||
| </div> | |||||
| </form> | |||||
| </div> | |||||
| </div><!--content row--> | |||||
| </main> | |||||
| <!-- ### $App Screen Footer ### --> | |||||
| ${require('html-loader!./_footer.html')} | |||||
| </div><!-- page-container --> | |||||
| </div> <!-- App Content --> | |||||
| </body> | |||||
| </html> | |||||