landing-header.component.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. @mixin header-theme() {
  2. app-landing-header {
  3. header {
  4. padding: 20px 40px;
  5. width: 100%;
  6. background: url("../../../assets/images/main-bk.png") no-repeat left
  7. center;
  8. background-size: contain;
  9. background-color: $main-color;
  10. box-shadow: -2px 6px 9px #2f2c8333;
  11. border-radius: 18px;
  12. main {
  13. gap: 50px;
  14. ul {
  15. margin: 0;
  16. padding: 0;
  17. list-style: none;
  18. gap: 30px;
  19. li {
  20. color: $white-color;
  21. font-size: 17px;
  22. font-weight: 300;
  23. cursor: pointer;
  24. transition: all 0.5s;
  25. &:hover {
  26. color: $off-white;
  27. }
  28. }
  29. }
  30. }
  31. .actions {
  32. margin: 0;
  33. padding: 0;
  34. gap: 20px;
  35. &__signin {
  36. background-color: transparent;
  37. border: none;
  38. color: $white-color;
  39. font-size: 15px;
  40. font-weight: 300;
  41. }
  42. &__sign-up {
  43. background-color: $light-blue;
  44. color: $white-color;
  45. border: 1px solid $white-color;
  46. padding: 10px 20px;
  47. border-radius: 30px;
  48. font-size: 15px;
  49. }
  50. }
  51. }
  52. }
  53. }