SHARE
TWEET

Untitled

a guest Apr 24th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
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