API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 15th, 2019
261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0057)https://www.w3schools.com/w3css/tryw3css_templates_cv.htm -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>W3.CSS Template</title>
  4.  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="NewResume_files/w3.css">
  7. <link rel="stylesheet" href="NewResume_files/css.txt">
  8. <link rel="stylesheet" href="NewResume_files/font-awesome.css">
  9. <style>
  10. html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
  11. </style>
  12. </head><body class="w3-light-grey">
  13.  
  14. <!-- Page Container -->
  15. <div class="contentM">
  16.  
  17. <div class="w3-content w3-margin-top" style="max-width:1400px;">
  18.  
  19. <!-- The Grid -->
  20. <div class="w3-row-padding">
  21.  
  22. <!-- Left Column -->
  23. <div class="w3-third">
  24.  
  25. <div class="w3-white w3-text-grey w3-card-4">
  26. <div class="w3-display-container">
  27. <img src="NewResume_files/avatar_hat.jpg" style="width:100%" alt="Avatar">
  28. <div class="w3-display-bottomleft w3-container w3-text-black">
  29. <h2>Jane Doe</h2>
  30. </div>
  31. </div>
  32. <div class="w3-container">
  33. <p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
  34. <p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
  35. <p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
  36. <p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
  37. <hr>
  38.  
  39. <p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
  40. <p>Adobe Photoshop</p>
  41. <div class="w3-light-grey w3-round-xlarge w3-small">
  42. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
  43. </div>
  44. <p>Photography</p>
  45. <div class="w3-light-grey w3-round-xlarge w3-small">
  46. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
  47. <div class="w3-center w3-text-white">80%</div>
  48. </div>
  49. </div>
  50. <p>Illustrator</p>
  51. <div class="w3-light-grey w3-round-xlarge w3-small">
  52. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
  53. </div>
  54. <p>Media</p>
  55. <div class="w3-light-grey w3-round-xlarge w3-small">
  56. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
  57. </div>
  58. <br>
  59.  
  60. <p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
  61. <p>English</p>
  62. <div class="w3-light-grey w3-round-xlarge">
  63. <div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>
  64. </div>
  65. <p>Spanish</p>
  66. <div class="w3-light-grey w3-round-xlarge">
  67. <div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>
  68. </div>
  69. <p>German</p>
  70. <div class="w3-light-grey w3-round-xlarge">
  71. <div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>
  72. </div>
  73. <br>
  74. </div>
  75. </div><br>
  76.  
  77. <!-- End Left Column -->
  78. </div>
  79.  
  80. <!-- Right Column -->
  81. <div class="w3-twothird">
  82.  
  83. <div class="w3-container w3-card w3-white w3-margin-bottom">
  84. <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
  85. <div class="w3-container">
  86. <h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
  87. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>
  88. <p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur
  89. vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora
  90. soluta ea et odio, unde doloremque repellendus iure, iste.</p>
  91. <hr>
  92. </div>
  93. <div class="w3-container">
  94. <h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
  95. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>
  96. <p>Consectetur adipisicing elit. Praesentium magnam
  97. consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla
  98. tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
  99. <hr>
  100. </div>
  101.  
  102.  
  103.  
  104.  
  105. <div class="w3-container w3-card w3-white">
  106. <h5 class="w3-opacity"><b>Experience</b></h5>
  107.  
  108. <div class="accordion minitb">
  109. <ul>
  110. <li>
  111. <input type="radio" name="select" class="accordion-select" checked/>
  112. <div class="accordion-title">
  113. <span>Title</span>
  114. </div>
  115. <div class="accordion-content">
  116. Content
  117. </div>
  118. <div class="accordion-separator"></div>
  119. </li>
  120. <li>
  121. <input type="radio" name="select" class="accordion-select"/>
  122. <div class="accordion-title">
  123. <span>Title</span>
  124. </div>
  125. <div class="accordion-content">
  126. Content
  127. </div>
  128. <div class="accordion-separator"></div>
  129. </li>
  130. <li>
  131. <input type="radio" name="select" class="accordion-select"/>
  132. <div class="accordion-title">
  133. <span>Title</span>
  134. </div>
  135. <div class="accordion-content">
  136. Content
  137. </div>
  138. <div class="accordion-separator"></div>
  139. </li>
  140. <li>
  141. <input type="radio" name="select" class="accordion-select"/>
  142. <div class="accordion-title">
  143. <span>Title</span>
  144. </div>
  145. <div class="accordion-content">
  146. Content
  147. </div>
  148. <div class="accordion-separator"></div>
  149. </li>
  150. </ul>
  151. </div>
  152. </div>
  153.  
  154. <div class="w3-container w3-card w3-white">
  155. <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
  156.  
  157. <div class="w3-container">
  158. <h5 class="w3-opacity"><b>W3Schools.com</b></h5>
  159. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
  160. <p>Web Development! All I need to know in one place</p>
  161. <hr>
  162. </div>
  163. <div class="w3-container">
  164. <h5 class="w3-opacity"><b>London Business School</b></h5>
  165. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
  166. <p>Master Degree</p>
  167. <hr>
  168. </div>
  169. <div class="w3-container">
  170. <h5 class="w3-opacity"><b>School of Coding</b></h5>
  171. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
  172. <p>Bachelor Degree</p><br>
  173. </div>
  174. </div>
  175.  
  176. <!-- End Right Column -->
  177. </div>
  178.  
  179. <!-- End Grid -->
  180. </div>
  181.  
  182. <!-- End Page Container -->
  183. </div>
  184. </div>
  185.  
  186. <footer class="w3-container w3-teal w3-center w3-margin-top">
  187. <p>Find me on social media.</p>
  188. <i class="fa fa-facebook-official w3-hover-opacity"></i>
  189. <i class="fa fa-instagram w3-hover-opacity"></i>
  190. <i class="fa fa-snapchat w3-hover-opacity"></i>
  191. <i class="fa fa-pinterest-p w3-hover-opacity"></i>
  192. <i class="fa fa-twitter w3-hover-opacity"></i>
  193. <i class="fa fa-linkedin w3-hover-opacity"></i>
  194. <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  195. </footer>
  196.  
  197.  
  198. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!