Advertisement
Guest User

loic

a guest
Nov 30th, 2015
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.62 KB | None | 0 0
  1. /*
  2. --------------------
  3. style.css ; SG v1.0
  4.  
  5. By Titus and Magik
  6.  
  7. Copyright © 2014 ISN
  8. --------------------
  9. */
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18. /* Polices */
  19.  
  20. @font-face {
  21. font-family: 'Xirod';
  22. src: url('police/xirod.otf');
  23. url('police/xirod.ttf');
  24. }
  25.  
  26. @font-face {
  27. font-family: 'Stark';
  28. src: url('police/Stark.otf');
  29. }
  30.  
  31. @font-face {
  32. font-family: 'OldSB';
  33. src: url('police/OldSansBlack.ttf');
  34. }
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45. /* Body */
  46.  
  47. body
  48. {
  49. background-image: url('fond/test2.jpg');
  50. background-attachment: fixed;
  51. min-width: 99%;
  52. display: inline-block;
  53. margin-right: auto;
  54. margin-left: auto;
  55. }
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66. /* En-tête */
  67.  
  68. header
  69. {
  70. display: inline-block;
  71. width: 100%;
  72. text-align: center;
  73. }
  74.  
  75.  
  76. header h1
  77. {
  78. text-align: center;
  79. font-family: 'Xirod';
  80. color: #030303;
  81. text-shadow: 2px 2px 2px #8d0000;
  82. }
  83.  
  84. header h2
  85. {
  86. text-align: center;
  87. font-family: 'Xirod';
  88. color: #030303;
  89. text-shadow: 2px 2px 2px #8d0000;
  90. }
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102. /* Barre de navigation */
  103.  
  104. nav
  105. {
  106. display: inline-block;
  107. width: 100%;
  108. text-align: center;
  109. }
  110.  
  111. nav ul
  112. {
  113. display: inline-block;
  114. list-style-type: none;
  115. }
  116.  
  117.  
  118. nav li
  119. {
  120. display: inline-block;
  121. }
  122.  
  123.  
  124. nav a
  125. {
  126. display: block;
  127. font-family: 'Stark';
  128. text-transform: uppercase;
  129. text-align: center;
  130. text-decoration: none;
  131. padding: 20px 12px 12px;
  132. color: #5a7676;
  133. font-size: 0.9em;
  134. }
  135.  
  136. nav a:hover
  137. {
  138. color: #8d0c0c;
  139. }
  140.  
  141.  
  142.  
  143.  
  144.  
  145.  
  146.  
  147.  
  148.  
  149.  
  150. /* Section */
  151.  
  152. section article p
  153. {
  154. text-decoration: none;
  155. color:#4e67b2;
  156. }
  157.  
  158. section
  159. {
  160. margin-left: 9%;
  161. margin-top: 55px;
  162. }
  163.  
  164. section article aside
  165. {
  166. float: left;
  167. }
  168.  
  169. section article p,section article h2
  170. {
  171. margin-left: 260px;
  172. }
  173.  
  174. .article
  175. {
  176. display: inline-block;
  177. float: bottom;
  178. margin-top: 25px;
  179. }
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188. /* Footer */
  189.  
  190. footer
  191. {
  192. display: inline-block;
  193. width: 99.5%;
  194. text-align: right;
  195. margin-right: 5px;
  196. }
  197.  
  198.  
  199. footer p
  200. {
  201. color: #500000;
  202. }
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211. /* Bannière Actu */
  212.  
  213. div
  214. {
  215. margin-left: auto;
  216. margin-right: auto;
  217. }
  218.  
  219. .ban_img
  220. {
  221. height: 318px;
  222. width: 854px;
  223. margin-left: auto;
  224. margin-right: 39px;
  225. position: relative;
  226.  
  227. }
  228.  
  229. @-moz-keyframes AutoSlide {
  230. 0%, 20%, 100% {
  231. left: 0px; /*1ère image*/
  232. }
  233. 30%, 50% {
  234. left: -893px; /*2ème image*/
  235. }
  236. 60%, 80% {
  237. left: -1786px; /*3ème image*/
  238. }
  239. }
  240.  
  241. @-webkit-keyframes AutoSlide {
  242. 0%, 20%, 100% {
  243. left: 0px; /*1ère image*/
  244. }
  245. 30%, 50% {
  246. left: -893px; /*2ème image*/
  247. }
  248. 60%, 80% {
  249. left: -1786px; /*3ème image*/
  250. }
  251. }
  252.  
  253. @-ms-keyframes AutoSlide {
  254. 0%, 20%, 100% {
  255. left: 0px; /*1ère image*/
  256. }
  257. 30%, 50% {
  258. left: -893px; /*2ème image*/
  259. }
  260. 60%, 80% {
  261. left: -1786px; /*3ème image*/
  262. }
  263. }
  264.  
  265. @-o-keyframes AutoSlide {
  266. 0%, 20%, 100% {
  267. left: 0px; /*1ère image*/
  268. }
  269. 30%, 50% {
  270. left: -893px; /*2ème image*/
  271. }
  272. 60%, 80% {
  273. left: -1786px; /*3ème image*/
  274. }
  275. }
  276.  
  277. @keyframes AutoSlide {
  278. 0%, 20%, 100% {
  279. left: 0px; /*1ère image*/
  280. }
  281. 30%, 50% {
  282. left: -893px; /*2ème image*/
  283. }
  284. 60%, 80% {
  285. left: -1786px; /*3ème image*/
  286. }
  287. }
  288.  
  289. #slideshow {
  290. position: relative;
  291. width: 854px;
  292. height: 318px;
  293. overflow: hidden;
  294. margin: 0px auto;
  295. border-radius: 7px;
  296. box-shadow: 0px 2px 2px #333c41;
  297. }
  298.  
  299. #sContent ul {
  300. display: table;
  301.  
  302. width: 2000px;
  303. -webkit-animation: slideAnim 20s ease 0s infinite;
  304. -moz-animation: slideAnim 20s ease 0s infinite;
  305. -ms-animation: slideAnim 20s ease 0s infinite;
  306. -o-animation: slideAnim 20s ease 0s infinite;
  307. animation: slideAnim 20s ease 0s infinite;
  308. }
  309.  
  310. #sContent li {
  311. display: table-cell;
  312. width: 896px;
  313. }
  314.  
  315. #sContent {
  316. position: absolute;
  317. top: 0;
  318. left: 0;
  319. width: 2565px;
  320. margin: 0;
  321. padding: 0;
  322.  
  323.  
  324.  
  325. /*CSS3 keyframes animation*/
  326. animation-name: AutoSlide;
  327. animation-duration: 20s;
  328. animation-iteration-count: infinite;
  329. animation-timing-function: ease-in-out;
  330. }
  331.  
  332.  
  333. .ban_form
  334. {
  335. height: 318px;
  336. width: 854px;
  337. margin-left: auto;
  338. margin-right: auto;
  339. border-radius: 7px;
  340. background: url('img/lolrd2.jpg') no-repeat;
  341. box-shadow: 0px 2px 2px #333c41;
  342. position: relative;
  343. }
  344.  
  345. .ban_desc
  346. {
  347. position: absolute;
  348. background-color: rgba(45,48,50,0.7);
  349. border-radius: 3px 3px 7px 7px;
  350. bottom: 0;
  351. width: 100%;
  352. height: 40px;
  353. text-align: right;
  354. font-size: 200%;
  355. font-family: 'Stark';
  356. }
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365.  
  366. /* Lien "a" */
  367.  
  368. a
  369. {
  370. text-decoration: none;
  371. }
  372.  
  373. .a1:hover
  374. {
  375. color: red;
  376. text-decoration: underline;
  377. }
  378.  
  379. .a1
  380. {
  381. font-size: 0.45em;
  382. margin-right: 5px;
  383. }
  384.  
  385. .a1:visited
  386. {
  387. color: blue;
  388. }
  389.  
  390. .a2
  391. {
  392. font-size: 0.8em;
  393. color:#4e67b2;
  394. }
  395.  
  396. .a2:visited
  397. {
  398. color:#4e67b2;
  399. }
  400.  
  401. .a2:hover
  402. {
  403. text-decoration: underline;
  404. }
  405.  
  406. .atitle
  407. {
  408. color: black;
  409. font-size: 1em;
  410. margin-bottom: 8px;
  411. font-family: 'Xirod';
  412. }
  413.  
  414.  
  415.  
  416.  
  417.  
  418.  
  419.  
  420.  
  421.  
  422.  
  423.  
  424. /* Paragraphe "p"*/
  425.  
  426. .pnews
  427. {
  428. font-size: 105%;
  429. margin-right: 9%;
  430. }
  431.  
  432.  
  433.  
  434.  
  435.  
  436.  
  437.  
  438.  
  439.  
  440.  
  441.  
  442.  
  443.  
  444. /* Aside - Section */
  445.  
  446. .news
  447. {
  448. width: 250px;
  449. height: 250px;
  450. border-radius: 8px;
  451. }
  452.  
  453. .imgnews
  454. {
  455. border-radius: 8px;
  456. box-shadow: 0px 2px 1px #333c41;
  457. }
  458.  
  459. form
  460. {
  461. text-align: center;
  462. }
  463.  
  464. form p
  465. {
  466. text-decoration: none;
  467. color:#4e67b2;
  468. }
  469.  
  470. .insert
  471. {
  472. font-size: 105%;
  473. color:#4e67b2;
  474. display: inline-block;
  475. text-align: center;
  476. margin-left: 41%;
  477. margin-right: auto;
  478. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement