mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-01-17 14:18:17 +01:00
Add featured content guides
This commit is contained in:
Kamran Ahmed
parent
0f5201b8bc
commit
f35e10f08c
@ -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>
|
||||
|
||||
@ -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>
|
||||
<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 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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
|
||||
SwimLane.defaultProps = {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.swim-lanes {
|
||||
margin-top: 25px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user