Advertisement
Guest User

Untitled

a guest
Apr 24th, 2019
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.92 KB | None | 0 0
  1. @font-face {
  2. font-family: "partybusiness";
  3. src: url("../fonts/partybusiness.ttf");
  4. }
  5. @font-face {
  6. font-family: ani;
  7. src: url("../fonts/anicb.ttf");
  8. src: url("../fonts/anicm.ttf");
  9. src: url("../fonts/anirb.ttf");
  10. src: url("../fonts/anirm.ttf");
  11. }
  12. @font-face {
  13. font-family: "teng";
  14. src: url("../fonts/tngan.ttf");
  15. src: url("../fonts/tnganb.ttf");
  16. src: url("../fonts/tnganbi.ttf");
  17. src: url("../fonts/tngani.ttf");
  18. }
  19.  
  20. body{
  21. margin: auto;
  22. width: 900px;
  23. }
  24.  
  25. h1, h2, h3, h5,table,p, .nav-link {
  26. font-family: 'ani', cursive;
  27. }
  28. .tableCaption{
  29. font-family: 'ani', cursive;
  30. }
  31. h2 {
  32. font-size: calc(15px + 1vw);
  33. margin: 2vw;
  34. }
  35.  
  36. .elveSymbol {
  37. color: orange;
  38. font-family: Tengwar Annatar;
  39. }
  40.  
  41. /* -------------------------------------- */
  42. /* Navbar */
  43. /* -------------------------------------- */
  44.  
  45. .navbar.navbar-expand-lg .nav-link {
  46. color: white;
  47. font-family: "ani" !important;
  48. font-size: 17px;
  49. }
  50.  
  51. .navbar.navbar-expand-lg .nav-link:hover{
  52. color: white;
  53. text-decoration: underline white;
  54. }
  55.  
  56. .navbar.navbar-expand-lg {
  57. background-color: #FF7700;
  58. }
  59.  
  60. .navbar.navbar-expand-lg .navbar-nav, .nav-item {
  61. margin-left: auto;
  62. }
  63.  
  64. .navbar.navbar-expand-lg .fa-bars{
  65. color: white;
  66. }
  67.  
  68. /* -------------------------------------- */
  69. /* Carousel */
  70. /* -------------------------------------- */
  71.  
  72. .carousel-caption > h5{
  73. font-size: 3.5vw;
  74. }
  75.  
  76. .carousel-caption > p{
  77. font-size: 1.6vw;
  78. }
  79.  
  80. .carousel-caption{
  81. top: 50%;
  82. transform: translateY(-50%);
  83. bottom: initial;
  84. }
  85.  
  86. /* -------------------------------------- */
  87. /* Mise en page Sections */
  88. /* -------------------------------------- */
  89.  
  90. section:nth-child(even) {
  91. background-color: #2B2B2B;
  92. color: white;
  93. }
  94.  
  95. section:nth-child(odd) {
  96. background-color: #EDEDED;
  97. color: #2B2B2B;
  98. }
  99.  
  100. section {
  101. padding: 15px;
  102. }
  103.  
  104. .container-fluid {
  105. padding: 0;
  106. }
  107.  
  108.  
  109. /* -------------------------------------- */
  110. /* Section Fellows */
  111. /* -------------------------------------- */
  112.  
  113. h2 em {
  114. font-size: .6em;
  115. }
  116.  
  117. /* Pills */
  118.  
  119. .nav.nav-tabs .nav-item .nav-link {
  120. background-color: transparent;
  121. border: none;
  122. color: grey;
  123. text-align: center;
  124. font-size: calc(11px + 0.8vw);
  125. width: 100%;
  126.  
  127. }
  128.  
  129. .nav.nav-tabs .nav-item {
  130. width: 100%;
  131. }
  132.  
  133. .nav.nav-tabs .nav-item .nav-link.active {
  134. color: orange;
  135. text-decoration: underline orange;
  136. }
  137.  
  138. .nav.nav-tabs .nav-item .nav-link .elveSymbol {
  139. display: none;
  140. }
  141.  
  142. .nav.nav-tabs .nav-item .nav-link.active .elveSymbol {
  143. display: inline;
  144. color: orange;
  145.  
  146. }
  147.  
  148. /* Wanted cards */
  149.  
  150. .tab-pane.fade {
  151. display: flex;
  152. flex-direction: row;
  153. flex-wrap: wrap;
  154. justify-content: space-around;
  155. }
  156.  
  157. .tab-content.row {
  158. height: auto;
  159. }
  160.  
  161. .wantedCard {
  162. height: 600px;
  163. margin-top: 15px;
  164. }
  165.  
  166. .wantedCard .wantedPic {
  167. height: 80%;
  168. }
  169.  
  170. .wantedCard .legend {
  171. height: 20%;
  172. background-color: black;
  173. color: white;
  174. padding: 3px;
  175. font-size: 1em;
  176. }
  177.  
  178. .wantedCard:first-of-type .wantedPic {
  179. background: url("gandalf.png") center no-repeat;
  180. background-size: cover;
  181. }
  182.  
  183. .wantedCard:nth-of-type(2) .wantedPic {
  184. background: url("aragorn.png") center no-repeat;
  185. background-size: cover;
  186. }
  187.  
  188. .wantedCard:nth-of-type(3) .wantedPic {
  189. background: url("gimli.png") center no-repeat;
  190. background-size: cover;
  191. }
  192.  
  193. .description {
  194. height: 100%;
  195. width: 100%;
  196. display: flex;
  197. flex-direction: column;
  198. background-color: rgba(130,130,130,0.7);
  199. }
  200.  
  201. .wantedPic.disabled .description {
  202. background-color: rgba(50,50,50,0.7);
  203. }
  204.  
  205. .description h3 {
  206. flex: 2;
  207. margin: 0;
  208. display: flex;
  209. justify-content: center;
  210. align-items: center;
  211. color: white;
  212. font-size: 2.5em;
  213. }
  214.  
  215. .wantedPic.disabled .description h3 {
  216. text-decoration: line-through #FF7700;
  217. }
  218.  
  219. .reward {
  220. width: 100%;
  221. height: 75px;
  222. }
  223.  
  224. .wantedPic.active .reward p {
  225. text-align: center;
  226. margin: 20px 25% 0;
  227. background-color: rgba(255,255,255,0.8);
  228. border-radius: 15px;
  229. box-shadow: 0 0 25px rgba(255,255,255,0.8);
  230. }
  231.  
  232. .wantedPic.disabled .reward p {
  233. color: #FF7700;
  234. font-size: 2.5em;
  235. text-align: center;
  236. margin-top: 20px;
  237. }
  238.  
  239. .reward p strong {
  240. color: orange;
  241. font-weight: normal;
  242. }
  243.  
  244.  
  245.  
  246. }
  247. .wantedPic.active .description:hover { /* Faire disparaitre la description */
  248. opacity: 0;
  249. }
  250.  
  251. /* -------------------------------------- */
  252. /* Section Get My Reward */
  253. /* -------------------------------------- */
  254.  
  255. .btn.btn-custom-orange.active {
  256. color: #FF7700;
  257. background-color: white;
  258. border: none;
  259. font-size: 30px;
  260. font-family: "ani";
  261. }
  262.  
  263. .coin {
  264. width: 175px;
  265. height: 175px;
  266. border-radius: 50%;
  267. margin-bottom: 5px;
  268. }
  269.  
  270. /* -------------------------------------- */
  271. /* Section Best Hunters */
  272. /* -------------------------------------- */
  273.  
  274. .media-body h3 {
  275. color: #FF7700;
  276. font-size: 1.5rem;
  277. }
  278.  
  279. .media-body p:first-of-type a {
  280. color: black;
  281. text-decoration: underline;
  282. }
  283.  
  284. .media-body .btn.btn-custom-like.active {
  285. background-color: #2B2B2B;
  286. border: none;
  287. color: #FF7700;
  288. font-size: 25px;
  289. }
  290.  
  291. /* -------------------------------------- */
  292. /* Section About the Ring */
  293. /* -------------------------------------- */
  294.  
  295. #theRing article {
  296. display: flex;
  297. flex-direction: column;
  298. padding: 0;
  299. border-radius: 10px 10px 0 0;
  300. border-bottom: #FF7700 solid 3px;
  301. margin: 0 20px 20px 20px;
  302. background-color: #EDEDED;
  303. color: #2B2B2B;
  304. }
  305.  
  306. #theRing article header {
  307. padding-left: 10px;
  308. border-radius: 10px 10px 0 0;
  309. background-color: #FF7700;
  310. color: white;
  311. }
  312.  
  313. #theRing article p {
  314. margin: 20px 0 0 20px;
  315. }
  316.  
  317. #theRing article header h3 {
  318. margin: 3px;
  319. }
  320.  
  321. /* Mise en forme du tableau */
  322.  
  323. table {
  324. border-collapse: collapse;
  325. width:85%;
  326. height: 120px;
  327. margin-left: auto;
  328. margin-right: auto;
  329. margin-top: 10px;
  330. margin-bottom: 15px;
  331. }
  332.  
  333. caption {
  334. margin-bottom: 5px;
  335. text-align: left;
  336. }
  337.  
  338. td, th {
  339. border: 1px solid black;
  340. text-align: center;
  341. }
  342.  
  343. th {
  344. color: white;
  345. background-color: grey;
  346. background-color: grey;
  347. }
  348.  
  349. tr:nth-child(odd) {
  350. background-color: #D6D6D6 ;
  351. }
  352.  
  353. /* Mise en forme de la citation */
  354.  
  355. .ringAwesomeContent {
  356. margin: 15px 20px 15px 10px;
  357. font-size: 1.2em;
  358. display: flex;
  359. justify-content: space-around;
  360. }
  361.  
  362. .ringAwesomeContent .signature {
  363. color: #D3D3D3;
  364. }
  365.  
  366. .ringAwesomeContent p {
  367. text-align: right;
  368. }
  369.  
  370. .ringAwesomeContent img {
  371. float: right;
  372. border-radius: 50%;
  373.  
  374. }
  375.  
  376. .portraitCommentaire {
  377. display: inline;
  378. }
  379.  
  380. /* -------------------------------------- */
  381. /* Section Join the Army */
  382. /* -------------------------------------- */
  383.  
  384. .armyPic {
  385. background: url("army.png") center no-repeat;
  386. background-size: contain;
  387. }
  388.  
  389. .sauronPic {
  390. background: url("weneedyou-1.png") center no-repeat;
  391. background-size: contain;
  392. }
  393.  
  394. .row.contactUsBtn {
  395. min-height: 150px;
  396. }
  397.  
  398. .row.contactUsBtn .btn {
  399. height: 50px;
  400. margin-top: auto;
  401. margin-bottom: auto;
  402. font-size: 20px;
  403. }
  404.  
  405.  
  406. /* -------------------------------------- */
  407. /* Section Contact us */
  408. /* -------------------------------------- */
  409.  
  410. #contactUs form * {
  411. width: 100%;
  412. margin: 0 0 10px 0;
  413. }
  414.  
  415. #contactUs {
  416. border-bottom: none;
  417. margin-bottom: 0;
  418. }
  419.  
  420. .niceMap {
  421. background: url("map.png") center no-repeat;
  422. background-size: contain;
  423. }
  424. input, textarea, select{
  425. font-family: 'ani', cursive;
  426. }
  427.  
  428. /* -------------------------------------- */
  429. /* Footer */
  430. /* -------------------------------------- */
  431.  
  432. footer.row {
  433. background-color: #FF7700;
  434. margin: 0;
  435.  
  436. }
  437.  
  438. footer ul {
  439. list-style-type: none;
  440.  
  441. }
  442. footer ul li a, footer p{
  443. font-family: 'ani', cursive;
  444. }
  445.  
  446. footer a {
  447. text-decoration: none;
  448. color: white;
  449. }
  450.  
  451. .additionalFooterLinks {
  452. font-weight: bold;
  453. padding-right: 0;
  454. margin-right: -15px;
  455. }
  456.  
  457. .additionalFooterLinks li {
  458. padding-right: -15px;
  459. }
  460.  
  461.  
  462. @media (max-width:576px){
  463.  
  464.  
  465. .carousel.slide, .portraitCommentaire, .joinIllustration {
  466. display: none;
  467. }
  468.  
  469. }
  470.  
  471. @media (min-width:992px){
  472.  
  473.  
  474. .navbar.navbar-expand-lg .nav-item:not(:last-of-type) {
  475. border-right: 1px solid white;
  476. }
  477.  
  478. .nav.nav-tabs .nav-item {
  479. width: 33%;
  480. }
  481.  
  482. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement