Francesca Sperati
7 years ago
5 changed files with 384 additions and 12 deletions
Split 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> | |||