diff --git a/components/swim-lane/index.js b/components/swim-lane/index.js index 38fe1921e..07b66822c 100644 --- a/components/swim-lane/index.js +++ b/components/swim-lane/index.js @@ -1,26 +1,28 @@ import './style.scss'; const SwimLane = (props) => ( - <> -
-

Featured Roadmaps

-

List of roadmaps mostly visited by the community. There are more roadmaps also.

+
+
+
+

Featured Roadmaps

+

List of roadmaps mostly visited by the community. There are more roadmaps also.

+
+
+ +

Frontend Developer

+

Step by step guide to becoming a modern frontend developer in 2019

+
+ +

Backend Developer

+

Step by step guide to becoming a modern backend developer in 2019

+
+ +

DevOps Roadmap

+

Step by step guide to become an SRE or for any operations role

+
+
-
- -

Frontend Developer

-

Step by step guide to becoming a modern frontend developer in 2019

-
- -

Backend Developer

-

Step by step guide to becoming a modern backend developer in 2019

-
- -

DevOps Roadmap

-

Step by step guide to become an SRE or for any operations role

-
-
- +
); SwimLane.defaultProps = { diff --git a/components/swim-lane/style.scss b/components/swim-lane/style.scss index 89e8b96fb..f0788e38c 100644 --- a/components/swim-lane/style.scss +++ b/components/swim-lane/style.scss @@ -1,58 +1,64 @@ -.lane-head { - text-align: left; - margin: 0 0 40px 0; - display: block; +.lane-wrap { + padding: 50px 0; + border-top: 1px solid #eaeaea; + border-bottom: 1px solid #eaeaea; - h3 { - font-weight: 700; - font-size: 35px; - margin-bottom: 14px; - } - - p { - font-weight: 400; - font-size: 18px; - margin-bottom: 0; - } -} - -.swim-lane { - display: flex; - flex-direction: row; - - .lane-item + .lane-item { - margin-left: 35px; - } - - .lane-item { - border: 1px solid #f7f7f7; + .lane-head { + text-align: left; + margin: 0 0 40px 0; display: block; - margin-bottom: 1px; - text-decoration: none; - color: #000000; - background: #ffffff; - padding: 28px 25px 25px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; - transition: box-shadow 0.2s ease 0s; - cursor: pointer; - &:hover { - box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; - } - - h4 { - font-size: 24px; - line-height: 22px; + h3 { font-weight: 700; - margin-bottom: 16px; + font-size: 35px; + margin-bottom: 14px; } p { - font-size: 15px; - line-height: 25px; - color: #999999; + font-weight: 400; + font-size: 18px; margin-bottom: 0; } } -} \ No newline at end of file + + .swim-lane { + display: flex; + flex-direction: row; + + .lane-item + .lane-item { + margin-left: 35px; + } + + .lane-item { + border: 1px solid #f7f7f7; + display: block; + margin-bottom: 1px; + text-decoration: none; + color: #000000; + background: #ffffff; + padding: 28px 25px 25px; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; + transition: box-shadow 0.2s ease 0s; + cursor: pointer; + + &:hover { + box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; + } + + h4 { + font-size: 24px; + line-height: 22px; + font-weight: 700; + margin-bottom: 16px; + } + + p { + font-size: 15px; + line-height: 25px; + color: #999999; + margin-bottom: 0; + } + } + } +} diff --git a/pages/home/index.js b/pages/home/index.js index f45879746..7921c11d3 100644 --- a/pages/home/index.js +++ b/pages/home/index.js @@ -7,10 +7,8 @@ export const Home = (props) => (
-
-
- -
+
+
); diff --git a/pages/home/style.scss b/pages/home/style.scss index 6635e0e84..ea7a81c86 100644 --- a/pages/home/style.scss +++ b/pages/home/style.scss @@ -1,6 +1,3 @@ .swim-lanes { - border-top: 1px solid #eaeaea; - border-bottom: 1px solid #eaeaea; - padding: 50px 0; margin-top: 25px; } \ No newline at end of file