Redesign swim lanes

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

@ -2,6 +2,10 @@ import './style.scss';
const SwimLane = (props) => (
<>
<div className="lane-head">
<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>

@ -1,9 +1,19 @@
.lane-head {
color: #000000;
margin-bottom: 12px;
text-align: left;
margin: 0 0 40px 0;
display: block;
font-weight: 600;
h3 {
font-weight: 700;
font-size: 35px;
margin-bottom: 14px;
}
p {
font-weight: 400;
font-size: 18px;
margin-bottom: 0;
}
}
.swim-lane {
@ -20,10 +30,12 @@
margin-bottom: 1px;
text-decoration: none;
color: #000000;
padding: 25px;
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;
@ -33,7 +45,7 @@
font-size: 24px;
line-height: 22px;
font-weight: 700;
margin-bottom: 15px;
margin-bottom: 16px;
}
p {

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

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