Swim lane updates

pull/1331/head
Kamran Ahmed 5 years ago
parent 0e95e2239b
commit 0f5201b8bc
  1. 40
      components/swim-lane/index.js
  2. 102
      components/swim-lane/style.scss
  3. 6
      pages/home/index.js
  4. 3
      pages/home/style.scss

@ -1,26 +1,28 @@
import './style.scss'; import './style.scss';
const SwimLane = (props) => ( const SwimLane = (props) => (
<> <div className="lane-wrap bg-light">
<div className="lane-head"> <div className="container">
<h3>Featured Roadmaps</h3> <div className="lane-head">
<p>List of roadmaps mostly visited by the community. There are <a href="#">more roadmaps also</a>.</p> <h3>Featured Roadmaps</h3>
<p>List of roadmaps mostly visited by the community. There are <a href="#">more roadmaps also</a>.</p>
</div>
<div className={ `swim-lane ${props.className}` }>
<a className="lane-item" href='#'>
<h4>Frontend Developer</h4>
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
</a>
<a className="lane-item" href='#'>
<h4>Backend Developer</h4>
<p>Step by step guide to becoming a modern backend developer in 2019</p>
</a>
<a className="lane-item" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role</p>
</a>
</div>
</div> </div>
<div className={ `swim-lane ${props.className}` }> </div>
<a className="lane-item" href='#'>
<h4>Frontend Developer</h4>
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
</a>
<a className="lane-item" href='#'>
<h4>Backend Developer</h4>
<p>Step by step guide to becoming a modern backend developer in 2019</p>
</a>
<a className="lane-item" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role</p>
</a>
</div>
</>
); );
SwimLane.defaultProps = { SwimLane.defaultProps = {

@ -1,58 +1,64 @@
.lane-head { .lane-wrap {
text-align: left; padding: 50px 0;
margin: 0 0 40px 0; border-top: 1px solid #eaeaea;
display: block; 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 { .lane-head {
margin-left: 35px; text-align: left;
} margin: 0 0 40px 0;
.lane-item {
border: 1px solid #f7f7f7;
display: block; 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 { h3 {
font-size: 24px;
line-height: 22px;
font-weight: 700; font-weight: 700;
margin-bottom: 16px; font-size: 35px;
margin-bottom: 14px;
} }
p { p {
font-size: 15px; font-weight: 400;
line-height: 25px; font-size: 18px;
color: #999999;
margin-bottom: 0; margin-bottom: 0;
} }
} }
}
.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;
}
}
}
}

@ -7,10 +7,8 @@ export const Home = (props) => (
<div className='home-container'> <div className='home-container'>
<Header /> <Header />
<HeroSection /> <HeroSection />
<div className="swim-lanes bg-light"> <div className="swim-lanes">
<div className="container"> <SwimLane />
<SwimLane />
</div>
</div> </div>
</div> </div>
); );

@ -1,6 +1,3 @@
.swim-lanes { .swim-lanes {
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding: 50px 0;
margin-top: 25px; margin-top: 25px;
} }
Loading…
Cancel
Save