github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add featured content guides

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent 0f5201b8bc
commit f35e10f08c
6 changed files with 113 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/header/index.js
  2. 83
      components/swim-lane/index.js
  3. 40
      components/swim-lane/style.scss
  4. 30
      pages/global.scss
  5. 2
      pages/home/index.js
  6. 2
      pages/home/style.scss

2
components/header/index.js
Unescape View File

@ -10,7 +10,7 @@ const Header = () => (
</div>
<div className="nav-links">
<a href="#">Roadmaps</a>
<a href="#">Articles</a>
<a href="#">Guides</a>
<a href="#">Journeys</a>
<a href="#">FAQs</a>
<a href="#" className='signup'>Sign Up</a>

83
components/swim-lane/index.js
Unescape View File

@ -1,28 +1,73 @@
import './style.scss';
const SwimLane = (props) => (
<div className="lane-wrap bg-light">
<div className="container">
<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 className="lane-wrap">
<div className="container">
<div className="lane-head">
<h3>Featured Content</h3>
<p className="border-through featured-separator"><span>List of roadmaps mostly visited by the community. There are <a href="#" className="dark-link">more roadmaps also</a>.</span></p>
</div>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Frontend Developer</h4>
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Backend Developer</h4>
<p>Step by step guide to becoming a modern backend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role in 2019</p>
</a>
</div>
</div>
</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 className="lane-wrap">
<div className="container">
<p className='border-through featured-separator'><span>List of most visited guides. There are <a href="#" className="dark-link">more guides also</a>.</span></p>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Design Patterns for Humans</h4>
<p>A language agnostic, ultra-simplified explanation to design patterns</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Learn Regex</h4>
<p>An easy to understand guide on regular expressions with real world examples</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Bash Guide</h4>
<p>Easy to understand guide for bash with real world usage examples.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>DNS in One Picture</h4>
<p>Quick illustrative guide on how a website is found on the internet.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="lane-item" href='#'>
<h4>Using React Hooks</h4>
<p>Start using React hooks in your react applications today with this guide.</p>
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
SwimLane.defaultProps = {

40
components/swim-lane/style.scss
Unescape View File

@ -1,38 +1,26 @@
.lane-wrap {
padding: 50px 0;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
.lane-head {
text-align: left;
margin: 0 0 40px 0;
text-align: center;
display: block;
h3 {
font-weight: 700;
font-size: 35px;
margin-bottom: 14px;
margin-bottom: 30px;
}
}
p {
font-weight: 400;
font-size: 18px;
margin-bottom: 0;
}
.featured-separator {
font-weight: 400;
font-size: 18px;
margin-bottom: 40px;
margin-top: 25px;
}
.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;
@ -41,16 +29,20 @@
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
transition: box-shadow 0.2s ease 0s;
cursor: pointer;
margin-bottom: 32px;
&: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;
line-height: 27px;
font-weight: 600;
font-size: 22px;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 0 auto;
overflow: hidden;
}
p {

30
pages/global.scss
Unescape View File

@ -0,0 +1,30 @@
.border-top {
border-top: 1px solid #eaeaea;
}
.border-bottom {
border-bottom: 1px solid #eaeaea;
}
.dark-link {
font-weight: 500;
color: #000000;
text-decoration: none;
&:hover {
color: #101010;
}
}
.border-through {
width: 100%;
text-align: center;
border-bottom: 2px solid #f5f5f5;
line-height: 0.1em;
margin: 10px 0 20px;
span {
background: #fff;
padding: 0 10px
}
}

2
pages/home/index.js
Unescape View File

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

2
pages/home/style.scss
Unescape View File

@ -1,3 +1,3 @@
.swim-lanes {
margin-top: 25px;
padding: 50px 0;
}
Write Preview
Loading…
Cancel
Save