Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

246 lignes
11 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Job portal</title>
  8. <link rel="stylesheet" href="./css/normalize.css">
  9. <link rel="stylesheet" href="./css/style.css">
  10. </head>
  11. <body>
  12. <div class="background"></div>
  13. <main class="foreground">
  14. <header>
  15. <h2>Work with Us</h1>
  16. <p>Totally we have 11 job openings<p>
  17. </header>
  18. <div class="tabs-holder">
  19. <article class="tab active">Employment</article>
  20. <article class="tab">Internship</article>
  21. </div>
  22. <div class="job-card">
  23. <div class="job-card-header">
  24. <div class="job-designator-avatar">
  25. <img srcset = "./image/Developer.svg"
  26. sizes="(max-width : 750px) 480px,800px"
  27. alt = "A perosn avatar"
  28. >
  29. </div>
  30. <div class="job-designator-title">
  31. <h2>Software Developer</h2>
  32. <h4>developer</h4>
  33. </div>
  34. <div class="job-share-icon">
  35. <img
  36. src="./image/share.svg"
  37. alt = "share"
  38. >
  39. </div>
  40. </div>
  41. <div class="separator"></div>
  42. <div class="job-description-container">
  43. <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">
  44. <p class="job-description">4 open positions</p>
  45. </div>
  46. <div class="job-description-container">
  47. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  48. <p class="job-description">Minimum 3 years Experience</p>
  49. </div>
  50. <div class="job-description-container">
  51. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  52. <p class="job-description">Montreal, Canada</p>
  53. </div>
  54. <div class="job-description-container">
  55. <section class="green-outline-button">Show more details</section>
  56. </div>
  57. </div>
  58. <div class="job-card">
  59. <div class="job-card-header">
  60. <div class="job-designator-avatar">
  61. <img srcset = "./image/Developer.svg"
  62. sizes="(max-width : 750px) 480px,800px"
  63. alt = "Developer"
  64. >
  65. </div>
  66. <div class="job-designator-title">
  67. <h2>Software Developer</h2>
  68. <h4>developer</h4>
  69. </div>
  70. <div class="job-share-icon">
  71. <img
  72. src="./image/share.svg"
  73. alt = "share"
  74. >
  75. </div>
  76. </div>
  77. <div class="separator"></div>
  78. <div class="job-description-container">
  79. <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">
  80. <p class="job-description">4 open positions</p>
  81. </div>
  82. <div class="job-description-container">
  83. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  84. <p class="job-description">Minimum 3 years Experience</p>
  85. </div>
  86. <div class="job-description-container">
  87. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  88. <p class="job-description">Montreal, Canada</p>
  89. </div>
  90. <div class="job-description-container">
  91. <section class="green-outline-button">Show more details</section>
  92. </div>
  93. </div>
  94. <div class="job-card">
  95. <div class="job-card-header">
  96. <div class="job-designator-avatar">
  97. <img src = "./image/Developer.svg"
  98. sizes="(max-width : 750px) 480px,800px"
  99. alt = "Developer"
  100. >
  101. </div>
  102. <div class="job-designator-title">
  103. <h2>Software Developer</h2>
  104. <h4>developer</h4>
  105. </div>
  106. <div class="job-share-icon">
  107. <img
  108. src="./image/share.svg"
  109. alt = "share"
  110. >
  111. </div>
  112. </div>
  113. <div class="separator"></div>
  114. <div class="job-description-container">
  115. <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">
  116. <p class="job-description">4 open positions</p>
  117. </div>
  118. <div class="job-description-container">
  119. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  120. <p class="job-description">Minimum 3 years Experience</p>
  121. </div>
  122. <div class="job-description-container">
  123. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  124. <p class="job-description">Montreal, Canada</p>
  125. </div>
  126. <div class="job-description-container">
  127. <section class="green-outline-button">Show more details</section>
  128. </div>
  129. </div>
  130. </main>
  131. <section class="job-categories">
  132. <header>
  133. <h2>Job Categories</h2>
  134. <p>Choose your postions through given categories</p>
  135. </header>
  136. <div class="category-cards">
  137. <div class="design-category card">
  138. <img src="./image/Designing.svg" alt="infinte logo" class="job-description-image">
  139. <h4 class="tag-line">Designing</h4>
  140. <p class="card-description">Lorem ipsum dolor sit amet</p>
  141. </div>
  142. <div class="development-category card">
  143. <img src="./image/Development.svg" alt="infinte logo" class="job-description-image">
  144. <h4 class="tag-line">Development</h4>
  145. <p class="card-description">Lorem ipsum dolor sit amet</p>
  146. </div>
  147. <div class="marketing-category card">
  148. <img src="./image/Marketing.svg" alt="infinte logo" class="job-description-image">
  149. <h4 class="tag-line">Marketing</h4>
  150. <p class="card-description">Lorem ipsum dolor sit amet</p>
  151. </div>
  152. <div class="operations-category card">
  153. <img src="./image/Operations.svg" alt="infinte logo" class="job-description-image">
  154. <h4 class="tag-line">Operations</h4>
  155. <p class="card-description">Lorem ipsum dolor sit amet</p>
  156. </div>
  157. </div>
  158. </section>
  159. <div class="jobs-by-category">
  160. <div class="job-card">
  161. <div class="job-card-header">
  162. <div class="job-designator-avatar">
  163. <img srcset = "./image/Developer.svg"
  164. sizes="(max-width : 750px) 480px,800px"
  165. alt = "A perosn avatar"
  166. >
  167. </div>
  168. <div class="job-designator-title">
  169. <h2>UI/UX Designer</h2>
  170. <h4>Designer</h4>
  171. </div>
  172. <div class="job-share-icon">
  173. <img
  174. src="./image/share.svg"
  175. alt = "share"
  176. >
  177. </div>
  178. </div>
  179. <div class="separator"></div>
  180. <div class="job-description-container">
  181. <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">
  182. <p class="job-description">4 open positions</p>
  183. </div>
  184. <div class="job-description-container">
  185. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  186. <p class="job-description">Minimum 3 years Experience</p>
  187. </div>
  188. <div class="job-description-container">
  189. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  190. <p class="job-description">Montreal, Canada</p>
  191. </div>
  192. <div class="job-description-container">
  193. <section class="green-outline-button">Show more details</section>
  194. </div>
  195. </div>
  196. <div class="job-card">
  197. <div class="job-card-header">
  198. <div class="job-designator-avatar">
  199. <img srcset = "./image/Developer.svg"
  200. sizes="(max-width : 750px) 480px,800px"
  201. alt = "A perosn avatar"
  202. >
  203. </div>
  204. <div class="job-designator-title">
  205. <h2>Testing Engineer</h2>
  206. <h4>Designer</h4>
  207. </div>
  208. <div class="job-share-icon">
  209. <img
  210. src="./image/share.svg"
  211. alt = "share"
  212. >
  213. </div>
  214. </div>
  215. <div class="separator"></div>
  216. <div class="job-description-container">
  217. <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">
  218. <p class="job-description">4 open positions</p>
  219. </div>
  220. <div class="job-description-container">
  221. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  222. <p class="job-description">Minimum 3 years Experience</p>
  223. </div>
  224. <div class="job-description-container">
  225. <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
  226. <p class="job-description">Montreal, Canada</p>
  227. </div>
  228. <div class="job-description-container">
  229. <section class="green-outline-button">Show more details</section>
  230. </div>
  231. </div>
  232. </div>
  233. </body>
  234. </html>