Advertisement
Horzagger

CSS bordélique, mais qu'ai-je donc fait ?

Oct 12th, 2020
2,286
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html {
  2. margin:0;
  3. padding:0;
  4.  
  5. }
  6.  
  7.  
  8. body {
  9.  
  10. display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  11.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  12.   display: -webkit-flex;     /* NEW - Chrome */
  13. display: flex;
  14. flex-direction: column;
  15.  
  16. background-color: #042137;
  17. margin:0;
  18. padding:0;
  19. font-family: 'Mandali', sans-serif;
  20.  
  21.  
  22. }
  23. h1, h2, h3 {
  24.  
  25. color: black;
  26.  
  27.  
  28. }
  29.  
  30.  
  31. .coordonnees {
  32.  
  33.  
  34. color: #C33416;
  35.  
  36.  
  37. }
  38.  
  39. #titreresponsive {
  40.  
  41. visibility: hidden;
  42. display: none;
  43.  
  44. }
  45.  
  46. .menuA {
  47.  
  48. display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  49.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  50.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  51.   display: -webkit-flex;     /* NEW - Chrome */
  52.   display: flex;
  53. justify-content: space-between;
  54. width: 110%;
  55.  
  56. }
  57.  
  58. nav li {
  59.  
  60. list-style-type: none;
  61. margin-left: 1%;
  62. margin-right:1%;
  63. color:
  64.  
  65. }
  66.  
  67. nav a {
  68.  
  69. text-decoration: none;
  70. text-align: right;
  71. color: #D9B68F;
  72.  
  73. }
  74.  
  75. nav a:hover {
  76.  
  77. color: #FFFBFA;
  78. border-bottom: 4px solid #FFD9A7;
  79.  
  80. }
  81.  
  82. #blokheader {
  83.  
  84. display: -webkit-box;      
  85.   display: -moz-box;        
  86.   display: -ms-flexbox;      
  87.   display: -webkit-flex;    
  88.   display: flex;      
  89. justify-content: space-around;
  90. align-items: wrap;
  91. margin-left: 0;
  92. padding:0;
  93.  
  94. }
  95.  
  96. #blokheaderresponsive {
  97.  
  98. display: none;
  99.  
  100. }
  101.  
  102. #bloc {
  103.  
  104. display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  105.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  106.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  107.   display: -webkit-flex;     /* NEW - Chrome */
  108.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  109. justify-content: flex-start;
  110.  
  111. margin:0;
  112. padding:0;
  113. background-color: #F9FCFF;
  114.  
  115. }
  116.  
  117. .menuresponsive {
  118.  
  119. visibility: hidden;
  120.  
  121. }
  122.  
  123. .showresponsive {
  124.  
  125. display: none;
  126.  
  127. }
  128.  
  129. .texte {
  130.  
  131. visibility: visible;
  132. margin-left: 12%;
  133. margin-right: 3%;
  134. margin-top: 40;
  135. margin-bottom: 25px;
  136. padding-left: 1%;
  137. padding-right: 0;
  138.  
  139.  
  140. }
  141.  
  142. .texteresponsive {
  143.  
  144. visibility: hidden;
  145. display: none;
  146.  
  147. }
  148.  
  149. .imagetexte {
  150.  
  151. margin-top: 35px;
  152. margin-bottom: 10px;
  153. margin-left: 0;
  154. margin-right: 8%;
  155. padding: 0;
  156.  
  157. }
  158.  
  159. #bandeauA {
  160.  
  161. display: -webkit-box;      
  162.   display: -moz-box;        
  163.   display: -ms-flexbox;      
  164.   display: -webkit-flex;    
  165.   display: flex;      
  166. justify-content: space-around;
  167. align-items: wrap;
  168. margin-left: 0;
  169. padding:0;
  170. background-color: #6F8DA4;
  171.  
  172. }
  173.  
  174. #bandeauBarticles {
  175.  
  176. display: -webkit-box;      
  177.   display: -moz-box;        
  178.   display: -ms-flexbox;      
  179.   display: -webkit-flex;    
  180.   display: flex;      
  181. justify-content: space-between;
  182. align-items: wrap;
  183. margin-left: 0;
  184. padding:0;
  185. background-color: #FFD9A7;
  186.  
  187. }
  188.  
  189. .articleb1 {
  190.  
  191. margin: 2%;
  192. padding: 2%;
  193.  
  194. }
  195.  
  196. .articleb2 {
  197.  
  198. margin: 2%;
  199. padding: 2%;
  200.  
  201. }
  202.  
  203. .articleb3 {
  204.  
  205. margin: 2%;
  206. padding: 2%;
  207.  
  208. }
  209.  
  210. .interieurcar {
  211.  
  212. float: right;
  213.  
  214. padding-left: 10px;
  215.  
  216. }
  217.  
  218. @media screen and (max-width: 1176px) {
  219.  
  220.  
  221.  
  222.  
  223. #blokheader {
  224.  
  225. visibility: hidden;
  226. display: none;
  227.  
  228. }
  229.  
  230. #blokheaderresponsive {
  231.  
  232. display: block;
  233. visibility: visible;
  234. color: #D9B68F;
  235. margin-left: 6%;
  236.  
  237. }
  238.  
  239. #bloc {
  240.  
  241. display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  242.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  243.   display: -webkit-flex;     /* NEW - Chrome */
  244. display: flex;
  245. flex-direction: column-reverse;
  246.  
  247. }
  248.  
  249. #bandeau2articles {
  250.  
  251. display: flex;
  252. flex-direction: column;
  253.  
  254. }
  255.  
  256. .responsiveimg {
  257.  
  258. margin-left: 5%;
  259. margin-right: 5%;
  260. width: 100%;
  261. height: 100;
  262.  
  263. }
  264.  
  265. .texte {
  266.  
  267. visibility: hidden;
  268. display: none;
  269. margin-left: 5%;
  270. margin-right: 5%;
  271.  
  272. }
  273.  
  274. #titreresponsive {
  275.  
  276. visibility: visible;
  277. display: block;
  278. margin-left:6%;
  279.  
  280. }
  281.  
  282. .texteresponsive {
  283.  
  284. margin-left: 5%;
  285. margin-right: 5%;
  286. visibility: visible;
  287. display: block;
  288.  
  289. }
  290.  
  291. nav > ul > li {
  292.  
  293. float: left;
  294. position: relative;
  295.  
  296. }
  297.  
  298. nav > ul:after {
  299.  
  300. content: "";
  301. display: block;
  302. clear: both;
  303.  
  304. }
  305.  
  306. nav a {
  307.  
  308. display: inline-block;
  309. text-decoration: none;
  310.  
  311. }
  312.  
  313. nav > ul > li > a {
  314.  
  315. padding: 20 px 15 px;
  316. color: #FFF;
  317.  
  318. }
  319.  
  320. .sousmenu1 {
  321.  
  322. display: none;
  323.  
  324. }
  325.  
  326. nav li:hover .sousmenu1 {
  327.  
  328. display: inline-block;
  329. position: absolute;
  330. top: 10px;
  331. left: 0px;
  332. padding: 0;
  333. margin-right: 10px;
  334. z-index: 80000;
  335.  
  336. }
  337.  
  338. .sousmenuA li {
  339.  
  340. border-bottom: 1px solid #FFFFFF;
  341. background-color: #002030;
  342. margin-right: 10px;
  343.  
  344. }
  345.  
  346. .sousmenuA li a {
  347.  
  348. padding: 0;
  349. font-size: 20px;
  350. color: #FFFFFF;
  351. width: 210px;
  352. margin-right: 10px;
  353.  
  354. }
  355.  
  356. .location {
  357.  
  358. display: none;
  359.  
  360. }
  361.  
  362. .taxiservices {
  363.  
  364. display: none;
  365.  
  366. }
  367.  
  368. .logofranck {
  369.  
  370. margin-left: 5%;
  371. margin-right: 5%;
  372. width: 100%;
  373. height: 100;
  374. }
  375.  
  376. .showresponsive {
  377.  
  378. display: inline-block;
  379.  
  380. }
  381.  
  382. .noshowresponsive {
  383.  
  384. display: none;
  385.  
  386. }
  387. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement