_landingPage.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .landing-page {
  2. background-image: url('https://structureofintellect.files.wordpress.com/2017/09/bubble-test.jpg');
  3. background-attachment: fixed;
  4. background-repeat: no-repeat;
  5. background-size: cover;
  6. background-position: top center;
  7. font-family: 'Cormorant Infant', serif;
  8. &__about {
  9. width: 65%;
  10. text-align: center;
  11. padding: 25px 40px;
  12. .description {
  13. &__inline {
  14. &--pretty {
  15. color: seagreen;
  16. text-transform: uppercase;
  17. font-weight: bold;
  18. }
  19. }
  20. &__divider {
  21. width: 60%;
  22. }
  23. &__main {
  24. font-size: 20px;
  25. }
  26. }
  27. }
  28. &__links-container {
  29. margin-top: 45px;
  30. display: flex;
  31. flex-wrap: wrap;
  32. justify-content: space-between;
  33. width: 25%;
  34. padding: 9vh;
  35. @media screen and (max-width: 1125px) {
  36. padding: 4vh 7vh;
  37. }
  38. }
  39. // not correct spelling -> have to ask && change
  40. &__links {
  41. border: none;
  42. box-shadow: 0 0 10px grey;
  43. background: rgba(232,230, 230, 0.9);
  44. text-transform: uppercase;
  45. margin: 5px;
  46. padding: 3vh 0;
  47. font-family: 'Cormorant Infant', serif;
  48. font-weight: bold;
  49. font-size: 16px;
  50. text-align: center;
  51. width: 20vh;
  52. @media screen and (max-width: 1125px) {
  53. width: 100%;
  54. margin: 10px 0;
  55. padding: 2.5vh 0;
  56. }
  57. transition: all 0.6s ease-in-out;
  58. }
  59. &__links:hover {
  60. transform: rotate(360deg);
  61. }
  62. &__links--sign-in, {
  63. color: orangered;
  64. }
  65. &__links--sign-up {
  66. color: green;
  67. }
  68. }