diff options
Diffstat (limited to 'src/styles/welcome.scss')
-rw-r--r-- | src/styles/welcome.scss | 138 |
1 files changed, 65 insertions, 73 deletions
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index a12069ba4..b3d6515b1 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -1,92 +1,84 @@ | |||
1 | .auth { | 1 | .auth .welcome { |
2 | .welcome { | 2 | &__content { |
3 | 3 | align-items: center; | |
4 | &__content { | 4 | color: #FFF; |
5 | display: flex; | 5 | display: flex; |
6 | align-items: center; | 6 | justify-content: center; |
7 | justify-content: center; | 7 | } |
8 | color: #FFF; | ||
9 | } | ||
10 | |||
11 | &__logo { | ||
12 | width: 100px; | ||
13 | } | ||
14 | 8 | ||
15 | &__text { | 9 | &__logo { width: 100px; } |
16 | margin-left: 40px; | ||
17 | padding-left: 40px; | ||
18 | border-left: 1px solid #FFF; | ||
19 | 10 | ||
20 | h1 { | 11 | &__text { |
21 | font-size: 60px; | 12 | border-left: 1px solid #FFF; |
22 | letter-spacing: -0.4rem; | 13 | margin-left: 40px; |
23 | margin-bottom: 5px; | 14 | padding-left: 40px; |
24 | } | ||
25 | 15 | ||
26 | h2 { | 16 | h1 { |
27 | margin-left: 2px; | 17 | font-size: 60px; |
28 | margin-bottom: 0; | 18 | letter-spacing: -.4rem; |
29 | } | 19 | margin-bottom: 5px; |
30 | } | 20 | } |
31 | 21 | ||
32 | &__services { | 22 | h2 { |
33 | width: 100%; | 23 | margin-bottom: 0; |
34 | max-width: 800px; | 24 | margin-left: 2px; |
35 | height: 100%; | ||
36 | max-height: 600px; | ||
37 | margin-left: -450px; | ||
38 | } | 25 | } |
26 | } | ||
39 | 27 | ||
40 | &__buttons { | 28 | &__services { |
41 | display: block; | 29 | height: 100%; |
42 | margin-top: 100px; | 30 | margin-left: -450px; |
43 | text-align: center; | 31 | max-height: 600px; |
32 | max-width: 800px; | ||
33 | width: 100%; | ||
34 | } | ||
44 | 35 | ||
45 | .button:first-of-type { | 36 | &__buttons { |
46 | margin-right: 25px; | 37 | display: block; |
47 | } | 38 | margin-top: 100px; |
48 | } | 39 | text-align: center; |
49 | 40 | ||
50 | .button { | 41 | .button:first-of-type { margin-right: 25px; } |
51 | border-color: #FFF; | 42 | } |
52 | color: #FFF; | ||
53 | 43 | ||
54 | &:hover { | 44 | .button { |
55 | background: #FFF; | 45 | border-color: #FFF; |
56 | color: $theme-brand-primary; | 46 | color: #FFF; |
57 | } | ||
58 | 47 | ||
59 | &__inverted { | 48 | &:hover { |
60 | background: #FFF; | 49 | background: #FFF; |
61 | color: $theme-brand-primary; | 50 | color: $theme-brand-primary; |
62 | } | ||
63 | &__inverted:hover { | ||
64 | background: none; | ||
65 | color: #FFF; | ||
66 | } | ||
67 | } | 51 | } |
68 | 52 | ||
69 | &__featured-services { | 53 | &__inverted { |
70 | text-align: center; | ||
71 | width: 480px; | ||
72 | margin: 80px auto 0 auto; | ||
73 | display: flex; | ||
74 | align-items: center; | ||
75 | flex-wrap: wrap; | ||
76 | background: #FFF; | 54 | background: #FFF; |
77 | border-radius: 6px; | 55 | color: $theme-brand-primary; |
78 | padding: 20px 20px 5px; | ||
79 | } | 56 | } |
80 | 57 | ||
81 | &__featured-service { | 58 | &__inverted:hover { |
82 | width: 35px; | 59 | background: none; |
83 | height: 35px; | 60 | color: #FFF; |
84 | margin: 0 10px 15px; | ||
85 | transition: 0.5s filter, 0.5s opacity; | ||
86 | |||
87 | img { | ||
88 | width: 35px; | ||
89 | } | ||
90 | } | 61 | } |
91 | } | 62 | } |
63 | |||
64 | &__featured-services { | ||
65 | align-items: center; | ||
66 | background: #FFF; | ||
67 | border-radius: 6px; | ||
68 | display: flex; | ||
69 | flex-wrap: wrap; | ||
70 | margin: 80px auto 0 auto; | ||
71 | padding: 20px 20px 5px; | ||
72 | text-align: center; | ||
73 | width: 480px; | ||
74 | } | ||
75 | |||
76 | &__featured-service { | ||
77 | margin: 0 10px 15px; | ||
78 | height: 35px; | ||
79 | transition: .5s filter, .5s opacity; | ||
80 | width: 35px; | ||
81 | |||
82 | img { width: 35px; } | ||
83 | } | ||
92 | } | 84 | } |