main.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. @media (min-width:1920px){
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body{
  7. height: 100vh;
  8. display: flex;
  9. flex-direction: column;
  10. }
  11. main{
  12. width: 100%;
  13. flex: 1;
  14. display: grid;
  15. justify-content: center;
  16. align-items: center;
  17. }
  18. header{
  19. width: 100%;
  20. height: 3vw;
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. background: linear-gradient(to right,#fff 10%, #630256);
  25. }
  26. .hedContain{
  27. width: 95%;
  28. height: fit-content;
  29. display: flex;
  30. justify-content: space-between;
  31. }
  32. .img{
  33. width: 2vw;
  34. height:2vw;
  35. }
  36. .imgSlider{
  37. width: 1vw;
  38. height: 1vw;
  39. }
  40. .hedLink{
  41. text-decoration: none;
  42. color: rgb(255, 255, 255);
  43. font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  44. font-size: 1vw;
  45. font-weight: lighter;
  46. }
  47. .hedLinks{
  48. display: flex;
  49. gap: 5vw;
  50. align-items: center;
  51. }
  52. .slider{
  53. width: 30vw;
  54. height: 20vw;
  55. overflow: hidden;
  56. background-color: rgb(255, 255, 255);
  57. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.247);
  58. display: flex;
  59. justify-content: center;
  60. align-items: center;
  61. }
  62. footer{
  63. width: 100%;
  64. height: 20vw;
  65. background-color: #630256;
  66. display: flex;
  67. justify-content: space-around;
  68. align-items: center;
  69. }
  70. .fooCon{
  71. display: grid;
  72. gap: 2vw;
  73. }
  74. .fooLink{
  75. color: white;
  76. text-decoration:none;
  77. }
  78. }