JustinzocktYT

home.css

Feb 19th, 2023
894
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.49 KB | Source Code | 0 0
  1. .home-container {
  2.   width: 100%;
  3.   display: flex;
  4.   overflow: auto;
  5.   min-height: 100vh;
  6.   align-items: center;
  7.   flex-direction: column;
  8.   justify-content: flex-start;
  9. }
  10. .home-banner {
  11.   width: 100%;
  12.   display: flex;
  13.   padding: var(--dl-space-space-threeunits);
  14.   align-items: center;
  15.   flex-direction: column;
  16.   justify-content: space-between;
  17. }
  18. .home-text03 {
  19.   font-size: 3rem;
  20.   text-align: center;
  21. }
  22. .home-text04 {
  23.   max-width: var(--dl-size-size-maxwidth);
  24.   margin-top: var(--dl-space-space-twounits);
  25.   text-align: center;
  26.   margin-bottom: var(--dl-space-space-twounits);
  27. }
  28. .home-button {
  29.   color: var(--dl-color-gray-black);
  30.   transition: 0.3s;
  31.   padding-top: var(--dl-space-space-unit);
  32.   padding-left: var(--dl-space-space-twounits);
  33.   padding-right: var(--dl-space-space-twounits);
  34.   padding-bottom: var(--dl-space-space-unit);
  35. }
  36. .home-button:hover {
  37.   transform: scale(1.02);
  38. }
  39. .home-stats {
  40.   width: 100%;
  41.   display: flex;
  42.   padding: var(--dl-space-space-threeunits);
  43.   max-width: var(--dl-size-size-maxwidth);
  44.   justify-content: center;
  45. }
  46. .home-stat {
  47.   display: flex;
  48.   padding: var(--dl-space-space-twounits);
  49.   align-items: center;
  50.   flex-direction: column;
  51. }
  52. .home-icon {
  53.   fill: var(--dl-color-gray-700);
  54.   width: var(--dl-size-size-small);
  55.   height: var(--dl-size-size-small);
  56. }
  57. .home-text05 {
  58.   font-size: 1.15rem;
  59.   margin-top: var(--dl-space-space-halfunit);
  60.   text-align: center;
  61. }
  62. .home-text06 {
  63.   color: var(--dl-color-gray-700);
  64.   font-size: 0.75rem;
  65.   margin-top: var(--dl-space-space-halfunit);
  66.   text-align: center;
  67. }
  68. .home-text07 {
  69.   font-size: 3rem;
  70.   margin-top: var(--dl-space-space-halfunit);
  71.   font-weight: 300;
  72. }
  73. .home-stat1 {
  74.   display: flex;
  75.   padding: var(--dl-space-space-twounits);
  76.   align-items: center;
  77.   flex-direction: column;
  78. }
  79. .home-icon3 {
  80.   fill: var(--dl-color-gray-700);
  81.   width: var(--dl-size-size-small);
  82.   height: var(--dl-size-size-small);
  83. }
  84. .home-text08 {
  85.   font-size: 1.15rem;
  86.   margin-top: var(--dl-space-space-halfunit);
  87.   text-align: center;
  88. }
  89. .home-text09 {
  90.   color: var(--dl-color-gray-700);
  91.   font-size: 0.75rem;
  92.   margin-top: var(--dl-space-space-halfunit);
  93.   text-align: center;
  94. }
  95. .home-text10 {
  96.   font-size: 3rem;
  97.   margin-top: var(--dl-space-space-halfunit);
  98.   font-weight: 300;
  99. }
  100. @media(max-width: 991px) {
  101.   .home-text04 {
  102.     max-width: 100%;
  103.   }
  104. }
  105. @media(max-width: 767px) {
  106.   .home-banner {
  107.     padding-left: var(--dl-space-space-twounits);
  108.     padding-right: var(--dl-space-space-twounits);
  109.   }
  110.   .home-text04 {
  111.     padding-left: var(--dl-space-space-unit);
  112.     padding-right: var(--dl-space-space-unit);
  113.   }
  114.   .home-stats {
  115.     padding-left: var(--dl-space-space-twounits);
  116.     padding-right: var(--dl-space-space-twounits);
  117.   }
  118.   .home-stat {
  119.     padding: var(--dl-space-space-unit);
  120.   }
  121.   .home-text05 {
  122.     text-align: center;
  123.   }
  124.   .home-stat1 {
  125.     padding: var(--dl-space-space-unit);
  126.   }
  127.   .home-text08 {
  128.     text-align: center;
  129.   }
  130. }
  131. @media(max-width: 479px) {
  132.   .home-banner {
  133.     padding-top: var(--dl-space-space-twounits);
  134.     padding-left: var(--dl-space-space-unit);
  135.     padding-right: var(--dl-space-space-unit);
  136.     padding-bottom: var(--dl-space-space-twounits);
  137.   }
  138.   .home-stats {
  139.     align-items: center;
  140.     padding-top: var(--dl-space-space-twounits);
  141.     padding-left: var(--dl-space-space-unit);
  142.     padding-right: var(--dl-space-space-unit);
  143.     flex-direction: column;
  144.     padding-bottom: var(--dl-space-space-twounits);
  145.   }
  146. }
  147.  
Tags: CSS
Advertisement
Add Comment
Please, Sign In to add comment