SHARE
TWEET

Blocage affichage image

a guest Jun 15th, 2016 98 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* General */
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5.   color:#fff;
  6.   font: normal "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
  7.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  8.   overflow: hidden;
  9.   background: #000;
  10. }
  11.  
  12. h2 {
  13.   margin-top:0;
  14.   font-size: 2em;
  15.   font-weight:bold;
  16.   color: #eca603;
  17. }
  18.  
  19. a {
  20.   font-weight:bold;
  21.   color:#fff;
  22. }
  23.  
  24.  
  25. /* Wrapper */
  26. #wrap {
  27.   position: relative;
  28.   top:0;
  29.   -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
  30.   -moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  31.   -ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  32.   -o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  33.   transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  34. }
  35.  
  36.  
  37. /* Nav */
  38. #nav {
  39.   position: fixed;
  40.   top: 0; left:0; right: 0;
  41.   padding: 1em 0;
  42.   margin:0;
  43.   background: #000;
  44.   text-align:center;
  45.   font-size: 1em;
  46.   z-index:10;
  47. }
  48. #nav li {
  49.   display: inline;
  50.   margin:0;
  51. }
  52. #nav a {
  53.   display: inline-block;
  54.   margin: 0 3em;
  55.   color: #eee;
  56.   text-transform: uppercase;
  57.   text-decoration: none;
  58.   text-shadow: 0 0 5px #fff;
  59.   -webkit-transition: all 1s;
  60.   -moz-transition: all 1s;
  61.   -ms-transition: all 1s;
  62.   -o-transition: all 1s;
  63.   transition: all 1s;
  64. }
  65.  
  66.  
  67. /* slides */
  68. #slide1, #slide2, #slide3 {
  69.   height: 1000px;
  70.   padding-top:100px;
  71.   -webkit-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1);
  72.   -moz-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
  73.   -ms-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
  74.   -o-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
  75.   transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
  76. }
  77.  
  78. /* attribution des images de fond */
  79. #slide1 { background-image: url("style/media/clone.jpg") center 0 no-repeat fixed; }
  80. #slide2 { background-image: url("style/media/le-mal.jpg") center 0 no-repeat fixed; }
  81. #slide3 { background-image: url("style/media/logo-star-wars.jpg") center 0 no-repeat fixed; }
  82.  
  83.  
  84. /* Slides contents */
  85. .slide_inside {
  86.   width: 770px;
  87.   margin: 0 auto;
  88.   position: relative;
  89.   background-color: rgba(0, 0, 0, .6);
  90.   padding: 50px;
  91. }
  92.  
  93. #slide1 .slide_inside {
  94.   text-align: center;
  95.   background-color: transparent;
  96. }
  97. #slide2 .slide_inside p {
  98.   width: 500px;
  99.   text-align: justify;
  100. }
  101. #slide3 .slide_inside {
  102.   margin-top: 50px;
  103. }
  104.  
  105.  
  106. /* Troopers & clone */
  107.  
  108. #trooper, #clone {
  109.   position: absolute;
  110.   left:-180px; top: 300px;
  111.   -webkit-transform: rotate(10deg);
  112.   -moz-transform: rotate(10deg);
  113.   -ms-transform: rotate(10deg);
  114.   -o-transform: rotate(10deg);
  115.   transform: rotate(10deg);
  116.   -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  117.   -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  118.   -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  119.   -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  120.   transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  121. }
  122. #clone {
  123.   left: -280px;
  124.   top: 400px;
  125. }
  126.  
  127.  
  128. /* targeted elements */
  129.  
  130. #s1:target ~ #wrap { top:0px; }
  131. #s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
  132. #s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
  133. #s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
  134. #s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
  135. #s1:target ~ #wrap #trooper { left: -180px; top: 300px; -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
  136. #s1:target ~ #wrap #clone { left: -280px; top: 300px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
  137.  
  138. #s2:target ~ #wrap { top:-1000px; }
  139. #s2:target ~ #wrap #nav li:first-child + li a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
  140. #s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
  141. #s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
  142. #s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
  143. #s2:target ~ #wrap #trooper { left: -180px; top: -100px; -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg); }
  144. #s2:target ~ #wrap #clone { left: -350px; top: 50px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg); }
  145.  
  146.  
  147. #s3:target ~ #wrap { top:-2150px; }
  148. #s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
  149. #s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
  150. #s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
  151. #s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
  152. #s3:target ~ #wrap #trooper { left:-1500px;top:-1000px;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform: rotate(-15deg); }
  153. #s3:target ~ #wrap #clone { left:-1000px;top: -800px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg); }
  154.  
  155.  
  156. /* some social styles */
  157.  
  158. .fb-like { top: -5px; }
  159. .or_follow { display: inline-block; vertical-align:top; margin-left: 135px; margin-right: 5px; }
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