API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 18th, 2019
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.46 KB | None | 0 0
raw download clone embed print report
  1. <div class="container"><div class="header"><p class="headertextBox"> Fiche Client Fournisseur</p></div><div class="item1"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Project</label></div><p class="textBox"> TMB_Form</p></div><div class="item2"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Rep. Client</label></div><p class="textBox"> SORO</p></div><div class="item3"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Ligne Budget</label></div><p class="textBox"> XXXX</p></div><div class="item4"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Dépt.Pilote</label></div><p class="textBox"> DAF</p></div><div class="item5"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Dépt. Client</label></div><p class="textBox"> DAF</p></div><div class="item6"><div style="display: flex; background-color: steelblue; border: 1px solid black; align-items: center;"><label class="label">Chef de Project</label></div><p class="textBox"> </p></div><div class="item7"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">1. Contexte et Objectifs du Projet (Pour quoi)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item8"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">2. Périmètre (Quoi)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item9"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">2. Périmètre (Quoi)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item10"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">4. Ressources (Qui)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item11"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">4. Ressources (Qui)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item12"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder">3. Procédures et Critères de sélection (Comment)</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item13"><div style="background-color: steelblue; width: 100%; border-bottom: 1px solid black;"><label class="labelNoBorder"> 5. Approbations</label></div><p class="textBoxNotInline"> multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n multitestline text /n </p></div><div class="item14"><div style="display: flex; background-color: steelblue; align-items: center;"><label class="label">Phases du Project</label></div><p class="textBox"> </p></div><div class="item15"><div style="display: flex; background-color: steelblue; align-items: center;"><label class="label">Definir mandat du project</label></div><p class="textBox"> Date d&amp;#39;enchance</p></div><div class="item16"><div style="display: flex; background-color: steelblue; align-items: center;"><label class="label">Etudes de falsabilitie</label></div><p class="textBox"> Date d&amp;#39;enchance</p></div><div class="item17"><div><label class="label">Ligne Budget</label></div><p class="textBox"> XXXX</p></div><div class="item18"><div><label class="label">Ligne Budget</label></div><p class="textBox"> XXXX</p></div><div class="item19"><div><label class="label">Ligne Budget</label></div><p class="textBox"> XXXX</p></div><div class="item20"><div><label class="label">Ligne Budget</label></div><p class="textBox"> XXXX</p></div><div class="item21"><div style="display: flex; background-color: steelblue; align-items: center;"><label class="label">Phases du Project</label></div><p class="textBox"> </p></div><div class="item22"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div><div class="item23"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div><div class="item24"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div><div class="item25"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div><div class="item26"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div><div class="item27"><div><label class="label">Chef de Project</label></div><p class="textBox"> abc</p></div></div>
  2.  
  3.  
  4.  
  5. .container {
  6. border: 1px solid black;
  7. display: grid;
  8. grid-template-columns: [firstcol] auto [col2] auto [col3] auto [col4] auto [col5] auto [col6] auto [col7] auto [lastcol];
  9. grid-template-rows: [firstrow] auto [row2] auto [row3] auto [row4] auto [row5] auto [row6] auto [row7] auto [row8] auto [lastrow];
  10. //grid-column-gap: 10px;
  11. //grid-row-gap: 15px;
  12. }
  13.  
  14. .label{
  15. //border: 1px solid black;
  16. //background-color: steelblue;
  17. color: white;
  18. //padding: 10px;
  19. }
  20.  
  21. .labelNoBorder{
  22. //border: 1px solid black;
  23. background-color: steelblue;
  24. color: white;
  25. //padding: 10px;
  26. }
  27.  
  28. .backGroundLabel{
  29. width: 100%;
  30. background-color: steelblue;
  31. border: 1px solid black;
  32. }
  33.  
  34. .textBox{
  35. display: flex;
  36. margin: 0;
  37. align-items: flex-end;
  38. padding-bottom: 3%;
  39. padding-left: 3%;
  40. }
  41.  
  42. .textBoxNotInline{
  43. display: block;
  44. }
  45.  
  46. .logo{
  47. border: 1px solid black;
  48. grid-column-start: firstcol;
  49. grid-column-end: span col2;
  50. grid-row-start: firstrow;
  51. grid-row-end: span row3;
  52. }
  53.  
  54. .image{
  55. transform: rotate(90deg);
  56. }
  57.  
  58. .header{
  59. display: inline-block;
  60. border: 1px solid black;
  61. grid-column-start: 2;
  62. grid-column-end: span lastcol;
  63. grid-row-start: firstrow;
  64. grid-row-end: span row2;
  65.  
  66. }
  67.  
  68. .headertextBox{
  69. display: inline-block;
  70. place-self: center-stretch;
  71. }
  72.  
  73. .item1{
  74. border: 1px solid black;
  75. grid-column-start: col2;
  76. grid-column-end: span col6;
  77. grid-row-start: row2;
  78. grid-row-end: span row3;
  79. display: grid;
  80. grid-template-columns: auto 1fr;
  81. }
  82.  
  83. .item2{
  84. border: 1px solid black;
  85. grid-column-start: col6;
  86. grid-column-end: span lastcol;
  87. grid-row-start: row2;
  88. grid-row-end: span row3;
  89. display: grid;
  90. grid-template-columns: auto 1fr;
  91. }
  92.  
  93. .item3{
  94. border: 1px solid black;
  95. grid-column-start: col2;
  96. grid-column-end: span col4;
  97. grid-row-start: row3;
  98. grid-row-end: span row4;
  99. display: grid;
  100. grid-template-columns: auto 1fr;
  101. }
  102.  
  103. .item4{
  104. border: 1px solid black;
  105. grid-column-start: col4;
  106. grid-column-end: span col5;
  107. grid-row-start: row3;
  108. grid-row-end: span row4;
  109. display: grid;
  110. grid-template-columns: auto 1fr;
  111. }
  112.  
  113. .item5{
  114. border: 1px solid black;
  115. grid-column-start: col5;
  116. grid-column-end: span col6;
  117. grid-row-start: row3;
  118. grid-row-end: span row4;
  119. display: grid;
  120. grid-template-columns: auto 1fr;
  121. }
  122. .item6{
  123. border: 1px solid black;
  124. grid-column-start: col6;
  125. grid-column-end: span lastcol;
  126. grid-row-start: row3;
  127. grid-row-end: span row4;
  128. display: grid;
  129. grid-template-columns: auto 1fr;
  130. }
  131. .item7{
  132. border: 1px solid black;
  133. grid-column-start: 1;
  134. grid-column-end: span col4;
  135. grid-row-start: row4;
  136. grid-row-end: span row6;
  137. }
  138. .item8{
  139. border: 1px solid black;
  140. grid-column-start: col4;
  141. grid-column-end: span col6;
  142. grid-row-start: row4;
  143. grid-row-end: span row5;
  144. }
  145. .item9{
  146. border: 1px solid black;
  147. grid-column-start: col6;
  148. grid-column-end: span lastcol;
  149. grid-row-start: row4;
  150. grid-row-end: span row5;
  151. }
  152. .item10{
  153. border: 1px solid black;
  154. grid-column-start: col4;
  155. grid-column-end: span col6;
  156. grid-row-start: row5;
  157. grid-row-end: span row6;
  158. }
  159. .item11{
  160. border: 1px solid black;
  161. grid-column-start: col6;
  162. grid-column-end: span lastcol;
  163. grid-row-start: row5;
  164. grid-row-end: span row6;
  165. }
  166. .item12{
  167. border: 1px solid black;
  168. grid-column-start: firstcol;
  169. grid-column-end: span col4;
  170. grid-row-start: row6;
  171. grid-row-end: span row7;
  172. }
  173. .item13{
  174. border: 1px solid black;
  175. grid-column-start: col4;
  176. grid-column-end: span lastcol;
  177. grid-row-start: row6;
  178. grid-row-end: span row7;
  179. }
  180. .item14{
  181. border: 1px solid black;
  182. grid-column-start: firstcol;
  183. grid-column-end: span col2;
  184. grid-row-start: row7;
  185. grid-row-end: span row8;
  186. display: grid;
  187. grid-template-columns: auto 1fr;
  188. }
  189. .item15{
  190. border: 1px solid black;
  191. grid-column-start: col2;
  192. grid-column-end: span col3;
  193. grid-row-start: row7;
  194. grid-row-end: span row8;
  195. display: grid;
  196. grid-template-columns: auto 1fr;
  197. // #pointer {
  198. // width: 100px;
  199. height: 70px;
  200. position: relative;
  201. background: red;
  202. // }
  203.  
  204. }
  205. .item15:after {
  206. content: "";
  207. position: absolute;
  208. left: 0;
  209. bottom: 0;
  210. width: 0;
  211. height: 0;
  212. border-left: 35px solid transparent;
  213. border-top: 35px solid transparent;
  214. border-bottom: 35px solid transparent;
  215. }
  216. .item15:before {
  217. content: "";
  218. position: absolute;
  219. right: -35px;
  220. bottom: 0;
  221. width: 0;
  222. height: 0;
  223. border-left: 35px solid red;
  224. border-top: 35px solid transparent;
  225. border-bottom: 35px solid transparent;
  226. }
  227. .item16{
  228. border: 1px solid black;
  229. grid-column-start: col3;
  230. grid-column-end: span col4;
  231. grid-row-start: row7;
  232. grid-row-end: span row8;
  233. display: grid;
  234. grid-template-columns: auto 1fr;
  235. height: 70px;
  236. position: relative;
  237. background: green;
  238. }
  239. .item16:after {
  240. content: "";
  241. position: absolute;
  242. left: 0;
  243. bottom: 0;
  244. width: 0;
  245. height: 0;
  246. border-left: 35px solid white;
  247. border-top: 35px solid transparent;
  248. border-bottom: 35px solid transparent;
  249. }
  250. .item16:before {
  251. content: "";
  252. position: absolute;
  253. right: -35px;
  254. bottom: 0;
  255. width: 0;
  256. height: 0;
  257. border-left: 35px solid green;
  258. border-top: 35px solid transparent;
  259. border-bottom: 35px solid transparent;
  260. }
  261. .item17{
  262. border: 1px solid black;
  263. grid-column-start: col4;
  264. grid-column-end: span col5;
  265. grid-row-start: row7;
  266. grid-row-end: span row8;
  267. }
  268. .item18{
  269. border: 1px solid black;
  270. grid-column-start: col5;
  271. grid-column-end: span col6;
  272. grid-row-start: row7;
  273. grid-row-end: span row8;
  274. }
  275. .item19{
  276. border: 1px solid black;
  277. grid-column-start: col6;
  278. grid-column-end: span col7;
  279. grid-row-start: row7;
  280. grid-row-end: span row8;
  281. }
  282. .item20{
  283. border: 1px solid black;
  284. grid-column-start: col7;
  285. grid-column-end: span lastcol;
  286. grid-row-start: row7;
  287. grid-row-end: span row8;
  288. }
  289. .item21{
  290. border: 1px solid black;
  291. grid-column-start: firstcol;
  292. grid-column-end: span col2;
  293. grid-row-start: row8;
  294. grid-row-end: span lastrow;
  295. display: grid;
  296. grid-template-columns: auto 1fr;
  297. }
  298. .item22{
  299. border: 1px solid black;
  300. grid-column-start: col2;
  301. grid-column-end: span col3;
  302. grid-row-start: row8;
  303. grid-row-end: span lastrow;
  304. }
  305. .item23{
  306. border: 1px solid black;
  307. grid-column-start: col3;
  308. grid-column-end: span col4;
  309. grid-row-start: row8;
  310. grid-row-end: span lastrow;
  311. }
  312. .item24{
  313. border: 1px solid black;
  314. grid-column-start: col4;
  315. grid-column-end: span col5;
  316. grid-row-start: row8;
  317. grid-row-end: span lastrow;
  318. }
  319. .item25{
  320. border: 1px solid black;
  321. grid-column-start: col5;
  322. grid-column-end: span col6;
  323. grid-row-start: row8;
  324. grid-row-end: span lastrow;
  325. }
  326. .item26{
  327. border: 1px solid black;
  328. grid-column-start: col6;
  329. grid-column-end: span col7;
  330. grid-row-start: row8;
  331. grid-row-end: span lastrow;
  332. }
  333. .item27{
  334. border: 1px solid black;
  335. grid-column-start: col7;
  336. grid-column-end: span lastcol;
  337. grid-row-start: row8;
  338. grid-row-end: span lastrow;
  339. }
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!