API tools faq
paste
LePetitGlacon

HTML CSS CV

LePetitGlacon
Jan 13th, 2020
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.61 KB | None | 0 0
raw download clone embed print report
  1. HTML/CSS
  2.  
  3.  
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>Gagneur Esteban - CV</title>
  8. <link rel="stylesheet" type="text/css" href="cvmodified.css">
  9. <meta charset="utf-8">
  10. </head>
  11. <body>
  12. <div class="main ">
  13. <div id="0" class="header div">
  14. <img class="image" src="http://vdoit.in/wp-content/uploads/2016/09/vDoIT_html-css-logo1.jpg">
  15. <p id="estebangagneur">Esteban Gagneur</p>
  16. <p class="header-adresse">16 A Avenue Denfert Rochereau<br/>
  17. 25000 - Besançon</p>
  18. <p class="header-email">[email protected]</p>
  19. <p class="header-telephone">+33 7 83 51 56 19</p>
  20. <p class="header-age">18 ans</p>
  21. <p class="header-permis">Permis B</p>
  22. </div>
  23. <div class="aside div">
  24. <nav class="menu">
  25. <ul>
  26. <li>
  27. <a href="#0">Accueil</a>
  28. </li>
  29. <li>
  30. <a href="#1">Accueil</a>
  31. </li>
  32. <li>
  33. <a href="#2">Accueil</a>
  34. </li>
  35. <li>
  36. <a href="#3">Accueil</a>
  37. </li>
  38. <li></li>
  39. <li></li>
  40. </ul>
  41. </nav>
  42. </div>
  43. <div class="content">
  44. <div id="1" class="formation div">
  45. <h2>Formation</h2>
  46. <p class="date">2019-Auj.</p>
  47. <p class="date">2017-2019</p>
  48. <p class="inner-content inner1"><span class="etablissement">Lycée Louis Pergaud</span><br><span class="lieu-etablissement">Besançon, France</span><br>Préparation BTS SIO (Services Informatiques aux Organisations) en 2 ans</p>
  49. <p class="inner-content inner2"><span class="etablissement">Lycée privée Sainte-Marie</span><br><span class="lieu-etablissement">Lons-le-Saunier, France</span><br>Obtention du BAC Professionel SN (Systèmes Numériques) mention "Bien".</p>
  50. </div>
  51. <div id="2" class="experience div">
  52. <h2>Expériences professionnelles</h2>
  53. <p class="date">Jan.2019-Fév.2019</p>
  54. <p class="date">Déc.2018-Mai 2019</p>
  55. <p class="date">Nov.2018-Déc.2018</p>
  56. <p class="date">Juin 2016</p>
  57. <p class="date">Juin 2015</p>
  58. <p class="inner-content inner1">Stagiaire réparation informatique / <span class="nomentreprise">ABPJ Informatique</span> Champagnole, France</p>
  59. <p class="inner-content inner2">Serveur polyvalent / <span class="nomentreprise">PIZZA KRIS</span> Lons-Le-Saunier, France</p>
  60. <p class="inner-content inner3">Stage Agent de Maintenance de l'outil de production / <span class="nomentreprise">UNITED CAP</span> Messia-sur-Sorne</p>
  61. <p class="inner-content inner4">Stage design/infographie / <span class="nomentreprise">ROUGE POISSON</span> Le Frasnois</p>
  62. <p class="inner-content inner5">Stage de découverte de l'entreprise / <span class="nomentreprise">TECHNIP FRANCE</span> La Défense</p>
  63. </div>
  64. <div id="3" class="competence div">
  65. <h2>Compétences</h2>
  66. <div class="competence-informatique">
  67. <h3 class="nom-competence">Informatique</h3>
  68. <p class="date">Suite Adobe :</p>
  69. <p class="date">Suite Office :</p>
  70. <p class="inner-content inner1 inner-content-competence">Photoshop, Illustrator... <div class="competence-remlpissage"></div> </p>
  71. <p class="inner-content inner2 inner-content-competence">Word, Excel...</p>
  72.  
  73.  
  74. </div>
  75.  
  76.  
  77. </div>
  78. </div>
  79. </body>
  80. </html>
  81. --------------------
  82. body{
  83. display: flex;
  84. background: white;
  85. }
  86. p{
  87. margin: 5px;
  88. }
  89. #estebangagneur{
  90. font-size: 28px;
  91. font-weight: bold;
  92. }
  93. .image{
  94. width: 100%;
  95. height: 100%;
  96. grid-column: 1/2;
  97. grid-row: 1/-1
  98. }
  99. .header-adresse{
  100. grid-column: 2/3;
  101. }
  102. .header-email{
  103. grid-column: 2/3;
  104. }
  105. .header-telephone{
  106. grid-column: 2/3;
  107. }
  108. .header-age{
  109. grid-column: 2/3;
  110. }
  111. .header-permis{
  112. grid-column: 2/3;
  113. }
  114.  
  115. .date{
  116. grid-column: 1/2;
  117. }
  118.  
  119. .inner-content{
  120. grid-column: 2/3;
  121. }
  122. .inner-content-competence{
  123. text-align: center;
  124. }
  125. .inner1{
  126. grid-row: 2/3;
  127. }
  128. .inner2{
  129. grid-row: 3/4;
  130. }
  131. .inner3{
  132. grid-row: 4/5;
  133. }
  134. .inner4{
  135. grid-row: 5/6;
  136. }
  137. .inner5{
  138. grid-row: 6/7;
  139. }
  140. .inner6{
  141. grid-row: 7/8;
  142. }
  143.  
  144.  
  145. .main{
  146. width: 100%;
  147. display: grid;
  148. grid-gap: 20px;
  149. grid-template-columns: auto 3fr;
  150. grid-template-rows: auto 3fr 1fr;
  151. align-items: center;
  152. }
  153. .menu{
  154. margin: 10px;
  155. }
  156. .competence-remlpissage{
  157. height: 14px;
  158. width: 20px;
  159. }
  160. .etablissement{
  161. font-size: 18px;
  162. color: rgb(255,80,80);
  163. font-weight: bold;
  164. text-shadow: 1px 1px 2px black;
  165. }
  166. .lieu-etablissement{
  167. font-size: 16px;
  168. color: rgb(25,25,80);
  169. font-weight:
  170. }
  171. .div{
  172. background: #eee;
  173. border-radius: 4px;
  174. box-shadow: 0px 0px 10px #888;
  175. }
  176. .header{
  177. grid-row: 1/2;
  178. grid-column: 1/4;
  179. display: grid;
  180. grid-template-columns: 1fr 3fr;
  181. grid-template-rows: 1fr auto auto auto auto auto;
  182. text-align: center;
  183. }
  184. .header p{
  185. margin: 10px;
  186. }
  187. .aside{
  188. grid-column: 1/2;
  189. grid-row: 2/4;
  190. height: 100%;
  191. }
  192. .content{
  193. grid-gap: 5px;
  194. grid-row: 2/3;
  195. grid-column: 2/3;
  196. }
  197. .content div{
  198. height: 100%;
  199. }
  200. .formation{
  201. display: grid;
  202. grid-template-rows: 1fr 2fr 2fr;
  203. grid-template-columns: 1fr 3fr;
  204. }
  205. .formation h2{
  206. text-align: center;
  207. grid-column: 1/3;
  208. }
  209. .experience{
  210. margin-top: 20px;
  211. display: grid;
  212. grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  213. grid-template-columns: 1fr 3fr;
  214. }
  215. .experience h2{
  216. text-align: center;
  217. grid-column: 1/3;
  218. }
  219. .competence-informatique{
  220. display: grid;
  221. grid-template-columns: auto 3fr;
  222. margin: 6px;
  223. z-index: 1;
  224. background: #ccc;
  225. border-radius: 4px;
  226. box-shadow: 0px 0px 5px #888;
  227. }
  228. .competence h2{
  229. text-align: center;
  230. }
  231. .competence h3{
  232. text-align: center;
  233. margin: 5px;
  234. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!