RealHero

web1 style.css

Jun 2nd, 2021
883
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. :root {
  2.   --app-max-width: 1200px;
  3.   --app-min-width: 800px;
  4.   --top-bar-height: 50px;
  5. }
  6. html, body {
  7.   width: 100%;
  8.   height: 100%;
  9.   margin: 0;
  10. }
  11. #app{
  12.   background: black;
  13.   min-height: 400px;
  14. }
  15. header{
  16.   background: linear-gradient(180deg, #555555, black 80%, white 20%);
  17.   height: var(--top-bar-height);
  18.   position: fixed;
  19.   width: 100%;
  20.   top: 0;
  21.   z-index: 999;
  22.   box-shadow: 0 2px 3px 0 rgb(0 0 0 / 60%), 0 6px 10px 4px rgb(0 0 0 / 30%);
  23. }
  24. #header {
  25.   display: flex;
  26.   height: 100%;
  27.   max-width: var(--app-max-width);
  28.   margin: 0 auto;
  29. }
  30. #logo{
  31.   margin-right: auto;
  32.   color: red;
  33.   display: flex;
  34.   align-items: center;
  35. }
  36. nav{
  37.   display: flex;
  38.   align-items: flex-end;
  39. }
  40. nav ul{
  41.   list-style: none;
  42.   margin: 0;
  43.   padding: 0;
  44. }
  45. nav a{
  46.   display: block;
  47.   text-decoration: none;
  48.   padding: 2px 20px;
  49.   background: linear-gradient(180deg, #000000 , #555555);
  50.   color: white;
  51.   border-radius: 5px 5px 0 0;
  52.   border: 1px solid #555555;
  53.   user-select: none;
  54.   cursor: pointer;
  55. }
  56. nav li{
  57.   margin-left: 10px;
  58.   float: left;
  59.   overflow: auto;
  60. }
  61.  
  62. nav a.active{
  63.   color: dodgerblue;
  64. }
  65. #content{
  66.   height: 100%;
  67.   min-height: 1200px;
  68.   max-width: var(--app-max-width);
  69.   margin: 0 auto;
  70.   padding-top: var(--top-bar-height);
  71.   color: white;
  72. }
  73. #subHeader{
  74.   margin: 20px;
  75.   display: flex;
  76. }
  77. .flex{
  78.   display: flex;
  79. }
  80. .flex.column{
  81.   flex-direction: column;
  82. }
  83. #subHeaderBanner{
  84.   background: #222222;
  85.   padding: 10px;
  86.   border-radius: 5px;
  87.   margin-top: 10px;
  88.   height: 100%;
  89. }
  90. #subHeaderBanner h3{
  91.   text-align: center;
  92. }
  93. footer{
  94.   color: white;
  95.   overflow: auto;
  96. }
  97. footer p{
  98.   float: right;
  99.   margin: 0 5px;
  100. }
  101. footer .social{
  102.   float: left;
  103. }
  104. footer a{
  105.   text-decoration: none;
  106.   color: gray;
  107.   margin-right: 10px;
  108. }
  109.  
RAW Paste Data