_header.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. header{
  2. h1{
  3. font-size: 11.2vw;
  4. line-height: 7vw!important;
  5. }
  6. h2{
  7. font-size: 3.7vw;
  8. }
  9. width: 100%;
  10. height: 100vh;
  11. position: relative;
  12. display: inline-flex;
  13. flex-direction: column;
  14. nav{
  15. position: relative;
  16. height: 100%;
  17. .logo{
  18. position: absolute;
  19. top: 50%;
  20. transform: translateY(-50%);
  21. }
  22. }
  23. .contact{
  24. position: fixed;
  25. top: 50px;
  26. right: 50px;
  27. transform: scale(1);
  28. transition: transform 0.5s ease;
  29. cursor: pointer;
  30. &:hover{
  31. transition: transform 0.5s ease;
  32. transform: scale(0.9);
  33. }
  34. svg{
  35. animation: rotation 6s infinite linear;
  36. width: 90.4px;
  37. height: 87.45px;
  38. }
  39. h3{
  40. transform: rotate(35deg);
  41. }
  42. p{
  43. display: none;
  44. }
  45. }
  46. & > section{
  47. height: 100%;
  48. &.works-mea{
  49. height: auto!important;
  50. display: inline-flex;
  51. flex-wrap: wrap;
  52. margin-bottom: 10px;
  53. .card{
  54. line-height: 0.8!important;
  55. .card-header{
  56. margin-top: 10px;
  57. }
  58. }
  59. }
  60. }
  61. h2{
  62. margin-left: 10px;
  63. }
  64. .scroll{
  65. width: 50px;
  66. height: 40px;
  67. margin: 0 auto 10px auto;
  68. overflow: hidden;
  69. position: relative;
  70. & > p:nth-child(1){
  71. text-align: center;
  72. position: absolute;
  73. top: -20px;
  74. animation: translatep1 2s infinite linear;
  75. }
  76. & > p:nth-child(2){
  77. text-align: center;
  78. position: absolute;
  79. top: -20px;
  80. animation: translatep1 2s infinite linear;
  81. animation-delay: 1s;
  82. }
  83. }
  84. }