Advertisement
Guest User

Untitled

a guest
Aug 5th, 2016
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.30 KB | None | 0 0
  1. .background-c {
  2.   background-color: #121214;
  3. }
  4.  
  5. body {
  6.   font-family: 'Lato', sans-serif;
  7. }
  8.  
  9.  
  10. /* Navbar Layout */
  11.  
  12. ul {
  13.   list-style-type: none;
  14.   margin: 0;
  15.   padding: 0;
  16.   overflow: hidden;
  17.   background-color: #333;
  18.   position: fixed;
  19.   top: 0;
  20.   width: 100%;
  21.   border-bottom: 1px solid #121214;
  22.   z-index: 10;
  23.   text-transform: uppercase;
  24. }
  25.  
  26. li {
  27.   float: left;
  28.   border-right: 1px solid #121214;
  29.   text-decoration: none;
  30. }
  31.  
  32. a {
  33.   color: #ff8800;
  34. }
  35.  
  36. a:hover {
  37.   color: #ff8800;
  38.   text-decoration: none;
  39. }
  40.  
  41. li a {
  42.   display: block;
  43.   color: white;
  44.   text-align: center;
  45.   padding: 14px 16px;
  46.   text-decoration: none;
  47. }
  48.  
  49. li a:hover {
  50.   background-color: #ff8800;
  51.   text-decoration: none;
  52.   color: #121214;
  53.   transition: background 0.3s ease-in;
  54. }
  55.  
  56. .active {
  57.   background-color: #ff8800;
  58.   color: #121214;
  59.   text-decoration: none;
  60. }
  61.  
  62.  
  63. /* Header */
  64.  
  65. /* @import "compass/css3";
  66. @import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);
  67. svg {
  68.   width: 600px;
  69.   height: 120px;
  70.   display: block;
  71.   position: relative;
  72.   overflow: hidden;
  73.   margin: 0 auto;
  74.   background: #343434;
  75. } */
  76.  
  77. .header {
  78.   min-height: 70%;
  79.   max-width: 90%;
  80.   color: white;
  81.   background-color: #343434;
  82.   padding-left: 3%;
  83.   border-bottom: 2px solid #ff8800;
  84.   border-radius: 0 0 20px 20px;
  85.   padding-top: 5%;
  86.   z-index: 10;
  87.  
  88. }
  89.  
  90. #wrapper {
  91.     margin-left:auto;
  92.     margin-right:auto;
  93.    
  94. }
  95.  
  96. .orangetext {
  97.   color: #FF8800;
  98.   background: grey;
  99.   /* Fallback Color */
  100.   background: rgba(0, 0, 0, 0.5);
  101.   text-align: center;
  102.   padding: 5px;
  103.   border-bottom: 2px solid #ff8800;
  104.   cursor: pointer;
  105.   text-decoration: none;
  106. }
  107.  
  108. .orangehead {
  109.   color: #FF8800;
  110.  
  111. }
  112.  
  113. .headline {
  114.  
  115.  
  116. }
  117.  
  118.  
  119. /* Box-Images + Style */
  120.  
  121. .boxmid {
  122.   z-index: 2;
  123. }
  124.  
  125. .box {
  126.   display: flex;
  127.   flex-wrap: wrap;
  128.   /* optional. only if you want the items to wrap */
  129.   justify-content: center;
  130.   /* for horizontal alignment */
  131.   align-items: center;
  132.   /* for vertical alignment */
  133.   padding-top: 10%;
  134.   margin-bottom: 20%;
  135.   background-color: red0;
  136. }
  137.  
  138. .imageJumprange {
  139.   background-image: url(https://teknoseyir.com/wp-content/uploads/2015/10/elite_dangerous_star-250x250.jpg);
  140.   height: 250px;
  141.   width: 250px;
  142.   float: left;
  143.   transition: 0.3s opacity ease-in;
  144.   opacity: 0.5;
  145.   cursor: pointer;
  146.   margin-left: 5px;
  147. }
  148.  
  149. .imageJumprange:hover {
  150.   background-image: url(https://teknoseyir.com/wp-content/uploads/2015/10/elite_dangerous_star-250x250.jpg);
  151.   height: 250px;
  152.   width: 250px;
  153.   float: left;
  154.   transition: opacity 0.3s ease-in;
  155.   opacity: 1.0;
  156.   box-shadow: 0 0 20px #ff8800;
  157.   cursor: pointer;
  158.   transform: scale(1.04);
  159.   border: 0px solid #ff8800;
  160. }
  161.  
  162. .imageFrame {
  163.   background-image: url(https://i2.wp.com/i155.photobucket.com/albums/s293/orion_mk3/51675-1426784012.jpg);
  164.   height: 250px;
  165.   width: 250px;
  166.   float: left;
  167.   transition: 0.3s opacity ease-in;
  168.   opacity: 0.5;
  169.   cursor: pointer;
  170.   margin-left: 5px;
  171. }
  172.  
  173. .imageFrame:hover {
  174.   background-image: url(https://i2.wp.com/i155.photobucket.com/albums/s293/orion_mk3/51675-1426784012.jpg);
  175.   height: 250px;
  176.   width: 250px;
  177.   float: left;
  178.   transition: 0.3s opacity box-shadow ease-in;
  179.   opacity: 1.0;
  180.   box-shadow: 0 0 20px #ff8800;
  181.   cursor: pointer;
  182.   transform: scale(1.04);
  183.   border: 0px solid #ff8800;
  184. }
  185.  
  186. .imageEngineer {
  187.   background-image: url(http://elitedangerous.hu/wp-content/uploads/2014/11/Lakon_asp_mini.png);
  188.   height: 250px;
  189.   width: 250px;
  190.   float: left;
  191.   transition: 0.3s opacity ease-in;
  192.   opacity: 0.5;
  193.   cursor: pointer;
  194.   margin-left: 5px;
  195. }
  196.  
  197. .imageEngineer:hover {
  198.   background-image: url(http://elitedangerous.hu/wp-content/uploads/2014/11/Lakon_asp_mini.png);
  199.   height: 250px;
  200.   width: 250px;
  201.   float: left;
  202.   transition: 0.3s opacity box-shadow ease-in;
  203.   opacity: 1.0;
  204.   box-shadow: 0 0 20px #ff8800;
  205.   cursor: pointer;
  206.   transform: scale(1.04);
  207.   border: 0px solid #ff8800;
  208. }
  209.  
  210.  
  211. /* Footer */
  212.  
  213. * {
  214.   margin: 0;
  215. }
  216.  
  217. .footer {
  218.   border-top: 2px solid #ff8800;
  219.   background: #343434;
  220.   color: #ff8800;
  221.   border-radius: 10px 10px 0 0;
  222.   position: fixed;
  223.   left: 0px;
  224.   bottom: 0px;
  225.   height: 40px;
  226.   width: 100%;
  227.   z-index: 10;
  228. }
  229.  
  230. .copyright {
  231.   color: white;
  232.   font-size: 0.7em;
  233.   float: left;
  234.   padding-left: 2%;
  235.   padding-top: 1%;
  236. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement