index.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. *{margin:0;padding:0;}
  2. body{
  3. height: 100vh;
  4. width: 100vw;
  5. display: flex;
  6. }
  7. .sidebar{
  8. display: flex;
  9. flex-direction: column;
  10. justify-content: space-around;
  11. align-items: center;
  12. background: rgb(23, 171, 192);
  13. height: 100vh;
  14. width: 25vw;
  15. color: white;
  16. }
  17. .description{
  18. background: #5FECE0;
  19. color: black;
  20. width: 100%;
  21. padding: 25px;
  22. box-sizing: border-box;
  23. font-size: 20px;
  24. text-align: justify;
  25. }
  26. .leeLinks a{
  27. display: flex;
  28. color: white;
  29. margin: 10px;
  30. }
  31. .leeLinks svg{
  32. margin-right: 5px;
  33. }
  34. #menu{
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. background: #152730;
  39. width: 100px;
  40. height: 100vh;
  41. }
  42. #menu > button{
  43. display: flex;
  44. flex-direction: column;
  45. justify-content: center;
  46. align-items: center;
  47. height: 100px;
  48. width: 100px;
  49. color: white;
  50. cursor: pointer;
  51. background: none;
  52. border: none;
  53. }
  54. #menu .active{
  55. background: rgb(196, 198, 192);
  56. color: black;
  57. cursor: default;
  58. }
  59. #main{
  60. flex-direction: column;
  61. align-items: center;
  62. justify-content: space-around;
  63. background: rgb(196, 198, 192);
  64. height: 100vh;
  65. width: 75vw;
  66. }