SHARE
TWEET

Untitled

a guest May 22nd, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** Ce style est cadeau ;-) */
  2. body{
  3.   font-family: 'Open Sans', Arial, sans-serif;
  4. }
  5.  
  6. * {
  7.   margin: 0;
  8.   padding: 0;
  9.   box-sizing: border-box;
  10. }
  11.  
  12. html {
  13.   font-size: 62.5%;
  14. }
  15.  
  16. h1 {
  17.   font-size: 1.8rem;
  18. }
  19.  
  20. .header {
  21.   margin-bottom: 1rem;
  22.   text-align: center;
  23. }
  24.  
  25. .header-logo {
  26.   display: inline-block;
  27.   margin: 2rem 0;
  28. }
  29.  
  30. .header-toogle {
  31.   display: none;
  32. }
  33.  
  34. @media screen and (max-width: 375px) {
  35.   .header-toogle {
  36.     display: block;
  37.   }
  38. }
  39.  
  40. .header-menu {
  41.   display: flex;
  42.   justify-content: space-around;
  43.   width: 80%;
  44.   margin: 0 auto;
  45. }
  46.  
  47. .header-menu a {
  48.   transition: background-color ease-in 600ms, color ease-out .3s;
  49.   padding: .5rem 1rem;
  50.   color: #202020;
  51.   font-size: 1.6rem;
  52.   background: #fff;
  53.   text-transform: uppercase;
  54.   text-decoration: none;
  55. }
  56.  
  57. .header-menu a:hover {
  58.   color: #fff;
  59.   background: #202020;
  60. }
  61.  
  62. .short-text {
  63.   text-align: center;
  64.   background: #eee;
  65.   padding: 8rem 0;
  66.   font-size: 2rem; line-height: 4rem;
  67. }
  68.  
  69. .short-text p {
  70.   max-width: 60%;
  71.   margin: 0 auto;
  72. }
  73.  
  74. .banner {
  75.   position: relative;
  76.   display: flex; min-height: 70rem; align-items: center; justify-content: center;
  77.   text-align: center;
  78. }
  79.  
  80. .banner-video {
  81.   position: absolute;
  82.   top: 0;
  83.   bottom: 0;
  84.   left: 0;
  85.   right: 0;
  86.   overflow: hidden;
  87. }
  88.  
  89. .banner-desc {
  90.   z-index: 9;
  91. }
  92.  
  93. .title-like{
  94.   font-family: 'Reenie Beanie', Arial, sans-serif;
  95.   font-size: 10rem;
  96.   color: #fff;
  97.   line-height: 1.1em;
  98.   font-weight: 400;
  99.   margin: 0;
  100.   padding: 0;
  101. }
  102.  
  103. .banner-video-overlay {
  104.   position: absolute;
  105.   top: 0; right: 0; bottom: 0; left: 0;
  106.   z-index: 8;
  107.   background: rgba(0, 0, 0, .5);
  108. }
  109.  
  110. .btn {
  111.   position: relative; z-index: 1;
  112.   display: inline-block; padding: 1.5rem 2.5rem; border: solid .2rem #ddd;
  113.   font-size: 2rem; text-decoration: none;
  114. }
  115.  
  116. .btn-white {
  117.   transition: background ease-in .2s;
  118.   border-color: #fff;
  119.   color: #fff; text-transform: uppercase;
  120. }
  121.  
  122. .btn-white:hover {
  123.   background: rgba(0, 0, 0, .5);
  124. }
  125.  
  126. .btn-grey {
  127.   transition: background ease-out 300ms, color ease-in .2s;
  128.   border-color: #333;
  129.   color: #333;
  130. }
  131.  
  132. .btn-grey:hover {
  133.   background: #000;
  134.   color: #fff;
  135. }
  136.  
  137. .three-women > div {
  138.   display: flex;
  139.   background: #000;
  140. }
  141.  
  142. .three-women-item {
  143.   flex-grow: 1;
  144.   overflow: hidden;
  145.   position: relative;
  146.   text-align: center;
  147. }
  148.  
  149. .three-women-item img {
  150.   transition: transform ease-in .3s;
  151.   display: block;
  152.   width: 100%;
  153.   height: auto;
  154. }
  155.  
  156. .three-women-item img:hover {
  157.   transform: scale(1.1);
  158. }
  159.  
  160. .three-women-item figcaption {
  161.   position: absolute;
  162.   bottom: 0;
  163.   left: 0;
  164.   right: 0;
  165.   padding: 3rem 2rem;
  166.   z-index: 3;
  167. }
  168.  
  169. .three-women-item h3 {
  170.   font-size: 4.5rem;
  171.   color: #fff;
  172. }
  173.  
  174. .three-women-item:hover{
  175.   text-decoration: none;
  176. }
  177.  
  178. /**  BONS PLANS
  179.  - Mini formulaire avec qq styles sympas
  180.  **/
  181. .bons-plans{
  182.   background-color: #eee;
  183.   text-align: center;
  184.   clear : both;
  185. }
  186.  
  187. .bons-plans form{
  188.   max-width: 40rem;
  189.   margin: auto;
  190.   padding: 3rem 2rem;
  191. }
  192.  
  193. .bons-plans form div {
  194.   display: flex;
  195. }
  196.  
  197. .bons-plans .title-like{
  198.   font-size: 6rem;
  199.   line-height: 1;
  200.   padding-top: 3rem;
  201.   color: #000;
  202. }
  203.  
  204. .bons-plans p {
  205.   color: #333;
  206.   font-size: 1.8rem;
  207.   line-height: 1.3;
  208.   margin: 0;
  209.   text-transform: uppercase;
  210.   text-align: left;
  211.  
  212.   padding-left: 15rem;
  213.   padding-bottom: 2rem;
  214.   background: url('../images/bon-reduction.png') no-repeat;
  215. }
  216.  
  217. .bons-plans input[type="email"]{
  218.   font-size: 1.6rem;
  219.   padding: 1.7rem 1rem;
  220.   flex-basis: 60%;
  221.  
  222.   color: #4A4A44;
  223.   background-color: #FFFFFF;
  224.   border: .1rem solid #bbb;
  225.  
  226.   border-radius: 0;
  227. }
  228. ma
  229. .bons-plans input[type="submit"] {
  230.   flex-basis: 40%;
  231.   border-radius: 0;
  232.   border: .1rem solid #000;
  233. }
  234.  
  235. /**  ARTICLES
  236.  **/
  237.  
  238.   .articles{
  239.     padding-top: 3rem;
  240.     padding-bottom: 3rem;
  241.     width : 80%;
  242.     margin : 0 auto;
  243.   }
  244.  
  245.   .articles > div {
  246.     display : flex;
  247.     flex-wrap: wrap;
  248.     margin-bottom : 2rem;
  249.     justify-content: space-around;
  250.   }
  251.  
  252.   .articles > div > div {
  253.     flex-basis : 31%;
  254.     min-width : 30rem;
  255.     margin-bottom: 2rem;
  256.   }
  257.  
  258.   .articles .title-like{
  259.     font-size: 5rem;
  260.     text-align: center;
  261.     margin-bottom: 2rem;
  262.     color: #000;
  263.   }
  264.  
  265. .articles img{
  266.   width: 100%;
  267. }
  268.  
  269.   .articles a{
  270.     color: #000;
  271.     display: block;
  272.     background: #eee;
  273.     padding: 1rem;
  274.     text-decoration: none;
  275.   }
  276.   .articles a:hover{
  277.     text-decoration: none;
  278.   }
  279.   .articles-title {
  280.     font-size: 1.3rem;
  281.     line-height: 1.8rem;
  282.   }
  283.   .articles .articles-date{
  284.     display: block;
  285.     text-align: center;
  286.     font-size: 1.9rem;
  287.     line-height: 1.2;
  288.     font-family: "Times New Roman", Times, serif;
  289.     font-style: italic;
  290.     position: relative;
  291.     margin-bottom: 3rem;
  292.   }
  293.   .articles .articles-date:after{
  294.    content:'';
  295.    position: absolute;
  296.    width: 5rem;
  297.    height: .1rem;
  298.    left: 50%;
  299.    transform: translateX(-50%);
  300.    background: #000;
  301.    bottom: 0;
  302.   }
  303.  
  304.   .articles-img{
  305.     position: relative;
  306.   }
  307.   .articles-over{
  308.     position: absolute;
  309.     background: rgba(0, 0, 0, 0.7);
  310.     top: 1rem;
  311.     bottom: 1rem;
  312.     left: 1rem;
  313.     right: 1rem;
  314.     opacity: 0;
  315.     text-align: center;
  316.     transition: opacity 300ms ease-in-out;
  317.   }
  318.   .articles-over .title-like {
  319.     color: #fff;
  320.   }
  321.   .articles-over > span{
  322.     position: absolute;
  323.     width: 100%;
  324.     font-size: 3rem;
  325.     color: #fff;
  326.     top: 100%;
  327.     left: 0;
  328.     overflow: hidden;
  329.     transform: translateY(-50%);
  330.     transition: top 200ms ease-in-out;
  331.   }
  332.  
  333.   .articles a:hover .articles-over{
  334.     opacity: 1;
  335.   }
  336.   .articles a:hover .articles-over > span{
  337.     top: 50%;
  338.   }
  339.  
  340. .confidence {
  341.   background: #D2D2D3 url("../images/confidence-bg.png") repeat-x 0 0;
  342.   padding: 10rem 0 0 0;
  343.   min-height: 61rem; position: relative;
  344. }
  345.  
  346. .confidence-item {
  347.   max-width: 100rem;
  348.   margin: auto;
  349.   display: flex;
  350. }
  351.  
  352. .confidence-intro h3 {
  353.   font-size: 2rem;
  354.   text-transform: uppercase;
  355.   color: #202020;
  356.   margin: 0;
  357. }
  358.  
  359. .confidence-intro h2 {
  360.   font-size: 6rem;
  361.   line-height: 4rem;
  362.   color: #fff;
  363.   margin: 2rem 0;
  364. }
  365.  
  366. .confidence-intro p {
  367.   font-size: 1.8rem;
  368.   line-height: 2rem;
  369.   font-family: "Times New Roman", Times, serif;
  370.   font-style: italic;
  371.   margin: 0 0 3rem;
  372. }
  373.  
  374. .confidence-intro .link {
  375.   display: block;
  376.   font-size: 1.5rem;
  377.   text-transform: uppercase;
  378.   text-decoration: none;
  379.   color: #fff;
  380. }
  381.  
  382. .confidence-intro .link:hover {
  383.   color: #000;
  384.   text-decoration: none;
  385. }
  386.  
  387. .confidence-intro .btn {
  388.   display: none;prod
  389. }
  390.  
  391. .confidence-produits {
  392.   display: flex;
  393.   align-items: flex-end;
  394. }
  395.  
  396. .confidence-visuel {
  397.   position: absolute; bottom: 0;
  398. }
  399.  
  400. .confidence-prix {
  401.   position: relative;
  402.   padding: 28rem 0 9rem 22rem;
  403. }
  404.  
  405. .confidence .designation {
  406.   display: block;
  407.   color: #fff; font-size: 1.6rem; text-transform: uppercase;
  408. }
  409.  
  410. .confidence .fleche-g {
  411.   position: absolute; top: 24rem; left: 18rem;
  412. }
  413.  
  414. .confidence-prix .prix {
  415.   display: block; margin: 1rem 0;
  416.   font-size: 3rem; color: #fff;
  417. }
  418.  
  419. .confidence-prix .prix span {
  420.   font-size: 1.4rem; display: block;
  421. }
  422.  
  423. .confidence-decor {
  424.   position: absolute; right: 10rem; bottom: 0;
  425. }
  426.  
  427. .confidence-intro {
  428.   flex-basis: 32%;
  429.   padding-right: 2rem;
  430. }
  431.  
  432. .tendances {
  433.   display: flex;
  434. }
  435.  
  436. .tendances-item {
  437.   flex-basis: 50%;
  438. }
  439.  
  440. .tendances-inverse {
  441.   flex-direction: row-reverse;
  442. }
  443.  
  444. .tendances-img {
  445.   position: relative;
  446.   min-height: 75rem;
  447. }
  448.  
  449. .tendances-img span {
  450.   position: absolute;
  451.   bottom: 0; left: 0; right: 0;
  452.   background: rgba(0, 0, 0, .7);
  453.   padding: 3rem 0;
  454.   color: #fff;
  455.   text-align: center;
  456.   font-size: 1.8rem;
  457. }
  458.  
  459. .tendances .title-like {
  460.   color: #000;
  461. }
  462.  
  463. .tendances-txt {
  464.   padding: 7rem;
  465.   font-size: 1.6rem;
  466.   line-height: 2.5rem;
  467. }
  468.  
  469. .tendances-txt a {
  470.   color: #5c738d;
  471.   text-decoration: none;
  472. }
  473.  
  474. .tendances-txt a:hover {
  475.   text-decoration: underline;
  476. }
  477.  
  478. /**  FOOTER
  479.  - pas grand ici a part les liens reseaux sociaux qui utilise une "porte coulissante"
  480.  **/
  481.  
  482. .text-hide {
  483.   font: 0/0 a;
  484.   color: transparent;
  485.   text-shadow: none;
  486.   background-color: transparent;
  487.   border: 0;
  488. }
  489.  
  490. .footer{
  491.   text-align: center;
  492.   padding-bottom: 1rem;
  493. }
  494. .footer p{
  495.   font-family: 'Reenie Beanie';
  496.   font-size: 3rem;
  497.   line-height: 3rem;
  498.   margin: 0;
  499.   padding-top: 1rem;
  500. }
  501.  
  502. .footer-socials a{
  503.   display:inline-block;
  504.   width: 4.5rem;
  505.   height: 4.5rem;
  506.   margin: .5rem;
  507.   background: url('../images/socials.jpg');
  508. }
  509. /* technique des portes coulissantes */
  510. .footer-socials a#btn-fb{
  511.   background-position: -.3rem -.5rem;
  512. }
  513. .footer-socials a#btn-fb:hover{
  514.   background-position: -.3rem -5.2rem;
  515. }
  516. .footer-socials a#btn-tw{
  517.   background-position: -6.4rem -.5rem;
  518. }
  519. .footer-socials a#btn-tw:hover{
  520.   background-position: -6.4rem -5.2rem;
  521. }
  522. .footer-socials a#btn-yt{
  523.   background-position: -12.6rem -.5rem;
  524. }
  525. .footer-socials a#btn-yt:hover{
  526.   background-position: -12.6rem -5.2rem;
  527. }
  528. .footer-socials a#btn-it{
  529.   background-position: -18.9rem -.5rem;
  530. }
  531. .footer-socials a#btn-it:hover{
  532.   background-position: -18.9rem -5.2rem;
  533. }
  534. .footer-socials a#btn-tu{
  535.   background-position: -25.1rem -.5rem;
  536. }
  537. .footer-socials a#btn-tu:hover{
  538.   background-position: -25.1rem -5.2rem;
  539. }
  540.  
  541.  
  542. /* Responsive / Media query */
  543. @media screen and (max-width:993px){
  544.   .header-menu {
  545.     display: block;
  546.   }
  547.   .header-menu a{
  548.     border-top: .1rem solid #ddd;
  549.     display:block;
  550.   }
  551.  
  552.   .header-toogle{
  553.     position: absolute;
  554.     right: 1rem;
  555.     top: 2.5rem;
  556.     display: block;
  557.   }
  558.   .header-toogle-close{
  559.     display:none;
  560.   }
  561.  
  562.   /** :target ca veut dire :
  563.     l'ancre du navigateur a visé un element
  564.     dont l'id="main-header"
  565.     (et cet élément existe dans le HTML)
  566.   */
  567.   #main-header:target .header-toogle-close{
  568.     display:inline;
  569.   }
  570.   #main-header:target .header-toogle-open{
  571.     display:none;
  572.   }
  573.  
  574.   /* version menu non animé */
  575.   /*.header-menu{
  576.     display:none;
  577.   }
  578.   #main-header:target .header-menu {
  579.     display:block;
  580.   }*/
  581.  
  582.   /* version menu non animé */
  583.   .header-menu{
  584.     overflow: hidden;
  585.     max-height: 0;
  586.     transition: max-height 300ms ease-in-out;
  587.     /* animation de height à height auto/100% pas possible, alors on utilise un tricks avec le max height ... */
  588.   }
  589.   #main-header:target .header-menu {
  590.     max-height: 30rem;
  591.   }
  592. }
  593.  
  594. @media screen and (max-width:993px){
  595.   .banner{
  596.     min-height: 50rem;
  597.   }
  598.   .banner-desc .title-like{
  599.     font-size: 5rem;
  600.   }
  601. }
  602.  
  603. @media screen and (max-width:769px){
  604.   .confidence {
  605.     padding: 2rem;
  606.   }
  607.   .confidence-item {
  608.     display: block;
  609.   }
  610.   .confidence-decor {
  611.     display: none;
  612.   }
  613.   .confidence-intro{
  614.     text-align: center;
  615.     padding-top: 0;
  616.     padding-bottom: 2rem;
  617.     padding-right: 0;
  618.   }
  619.  
  620.   .confidence-produits{
  621.     text-align: center;
  622.   }
  623.   .confidence-prix{
  624.     position: absolute;
  625.     right: 15rem;
  626.     padding: 0;
  627.     bottom: 15rem;
  628.   }
  629.   .confidence .fleche-g {
  630.     top: -5rem;
  631.     left: -5rem;
  632.   }
  633.   .confidence-prix .btn {
  634.     display: none;
  635.   }
  636.   .confidence-visuel {
  637.     position: relative;
  638.     margin: 0 auto;
  639.   }
  640.   .confidence-intro .btn {
  641.     display: inline-block;
  642.   }
  643.   .confidence-intro .link {
  644.     margin: 2rem 0;
  645.   }
  646.   .three-women > div {
  647.     display: block;
  648.   }
  649.   .three-women figure {
  650.     position: relative;
  651.   }
  652. }
  653.  
  654. @media screen and (max-width:500px){
  655.   .confidence-prix{
  656.     display:none;
  657.   }
  658. }
  659.  
  660. /* tendances mobile **/
  661.  
  662. @media screen and (max-width: 993px){
  663.   /* objectif : revenir à 1 seule colonne */
  664.  
  665.   .tendances{
  666.     display: block; /* (avant table) */
  667.   }
  668.   .tendances-item{
  669.     display: block; /* (avant table-cell) */
  670.     width: 100%;
  671.   }
  672.   .tendances-txt{
  673.     padding: 4rem;
  674.   }
  675.   .tendances-img{
  676.     min-height: 45rem;
  677.     background-size: cover;
  678.   }
  679. }
  680.  
  681. @media screen and (max-width:769px){
  682.   .bons-plans input[type="email"], .bons-plans input[type="submit"]{
  683.     width: 100%;
  684.   }
  685.  
  686.   .bons-plans form div {
  687.     display: block;
  688.   }
  689.  
  690.   .bons-plans p {
  691.     padding-top: 15rem;
  692.     padding-left: 0;
  693.     background-position: top center;
  694.     text-align: center;
  695.   }
  696. }
RAW Paste Data
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
 
Top