main-screen.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. /* Главная страница*/
  2. .main-screen {
  3. height: 100vh;
  4. background-image: url('../pictures/header.jpg');
  5. background-size: cover;
  6. background-position: center;
  7. position: relative;
  8. }
  9. .main-screen::before {
  10. content: '';
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. background-color: rgba(0, 0, 0, 0.5); /* Цвет и прозрачность затемнения */
  17. }
  18. .content {
  19. position: absolute;
  20. top: 40%;
  21. left: 10%;
  22. color: white;
  23. }
  24. .content h1{
  25. font-family: "Lobster", sans-serif;
  26. font-size: 54px;
  27. }
  28. .content p{
  29. font-size: 28px;
  30. font-family: "Advent Pro", sans-serif;
  31. font-optical-sizing: auto;
  32. padding-bottom: 7%;
  33. }
  34. .main-btn {
  35. font-family: "Advent Pro", sans-serif;
  36. font-weight: bold;
  37. padding: 10px 30px;
  38. font-size: 24px;
  39. background-color:rgb(255, 170, 30);
  40. border-radius: 5px;
  41. color: black;
  42. transition: box-shadow .074s ease, tansform .074s ease;
  43. }
  44. .main-btn:hover {
  45. box-shadow: 0 0 15px 5px rgba(255, 170, 30, 0.3);
  46. transform: scale(1.04);
  47. }