diff options
-rw-r--r-- | src/components/auth/Welcome.js | 12 | ||||
-rw-r--r-- | src/styles/welcome.scss | 25 |
2 files changed, 28 insertions, 9 deletions
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js index 06b10ecfe..eb9fbb847 100644 --- a/src/components/auth/Welcome.js +++ b/src/components/auth/Welcome.js | |||
@@ -55,12 +55,16 @@ export default class Login extends Component { | |||
55 | </div> | 55 | </div> |
56 | <div className="welcome__featured-services"> | 56 | <div className="welcome__featured-services"> |
57 | {recipes.map(recipe => ( | 57 | {recipes.map(recipe => ( |
58 | <img | 58 | <div |
59 | key={recipe.id} | 59 | key={recipe.id} |
60 | src={recipe.icons.svg} | ||
61 | className="welcome__featured-service" | 60 | className="welcome__featured-service" |
62 | alt="" | 61 | > |
63 | /> | 62 | <img |
63 | key={recipe.id} | ||
64 | src={recipe.icons.svg} | ||
65 | alt="" | ||
66 | /> | ||
67 | </div> | ||
64 | ))} | 68 | ))} |
65 | </div> | 69 | </div> |
66 | </div> | 70 | </div> |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index 5365921fb..cfdcc80ad 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -58,17 +58,32 @@ | |||
58 | } | 58 | } |
59 | 59 | ||
60 | &__featured-services { | 60 | &__featured-services { |
61 | margin-top: 150px; | ||
62 | text-align: center; | 61 | text-align: center; |
63 | margin-top: 80px; | 62 | width: 480px; |
63 | margin: 80px auto 0 auto; | ||
64 | display: flex; | ||
65 | align-items: center; | ||
66 | flex-wrap: wrap; | ||
67 | background: #FFF; | ||
68 | border-radius: 6px; | ||
69 | padding: 20px 20px 5px; | ||
64 | } | 70 | } |
65 | 71 | ||
66 | &__featured-service { | 72 | &__featured-service { |
67 | width: 35px; | 73 | width: 35px; |
68 | margin-right: 30px; | 74 | height: 35px; |
75 | margin: 0 10px 15px; | ||
76 | filter: grayscale(1) | ||
77 | opacity(0.5); | ||
78 | transition: 0.5s filter, 0.5s opacity; | ||
79 | |||
80 | &:hover { | ||
81 | filter: grayscale(0); | ||
82 | opacity: (1); | ||
83 | } | ||
69 | 84 | ||
70 | &:last-of-type { | 85 | img { |
71 | margin-right: 0; | 86 | width: 35px; |
72 | } | 87 | } |
73 | } | 88 | } |
74 | } | 89 | } |