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

Rename featured content component

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent f35e10f08c
commit c927aa948e
4 changed files with 41 additions and 22 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. 40
      components/featured-content/index.js
  2. 16
      components/featured-content/style.scss
  3. 4
      pages/home/index.js
  4. 3
      pages/index.js

40
components/swim-lane/index.js → components/featured-content/index.js
Unescape View File

@ -1,28 +1,30 @@
import './style.scss';
const SwimLane = (props) => (
const FeaturedContent = (props) => (
<>
<div className="lane-wrap">
<div className="featured-content-wrap">
<div className="container">
<div className="lane-head">
<div className="featured-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>
<p className="border-through featured-separator">
<span>List of roadmaps mostly visited by the community <a href="#" className="dark-link">View all Roadmaps</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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role in 2019</p>
</a>
@ -30,48 +32,54 @@ const SwimLane = (props) => (
</div>
</div>
</div>
<div className="lane-wrap">
<div className="featured-content-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>
<p className='border-through featured-separator'><span>List of most visited guides <a href="#" className="dark-link">View all Guides</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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" 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='#'>
<a className="featured-block" href='#'>
<h4>Using React Hooks</h4>
<p>Start using React hooks in your react applications today with this guide.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>HTTP Caching</h4>
<p>Everything you need to know about web caching</p>
</a>
</div>
</div>
</div>
</div>
</>
);
SwimLane.defaultProps = {
FeaturedContent.defaultProps = {
className: '',
};
export default SwimLane;
export default FeaturedContent;

16
components/swim-lane/style.scss → components/featured-content/style.scss
Unescape View File

@ -1,5 +1,5 @@
.lane-wrap {
.lane-head {
.featured-content-wrap {
.featured-head {
text-align: center;
display: block;
@ -15,10 +15,20 @@
font-size: 18px;
margin-bottom: 40px;
margin-top: 25px;
a {
background: black;
color: white;
padding: 3px 8px;
border-radius: 6px;
font-size: 14px;
text-decoration: none;
margin-left: 5px;
}
}
.swim-lane {
.lane-item {
.featured-block {
border: 1px solid #f7f7f7;
display: block;
text-decoration: none;

4
pages/home/index.js
Unescape View File

@ -1,5 +1,5 @@
import Header from '../../components/header/index';
import SwimLane from '../../components/swim-lane';
import FeaturedContent from '../../components/featured-content';
import './style.scss';
import HeroSection from '../../components/hero-section';
@ -8,7 +8,7 @@ export const Home = (props) => (
<Header />
<HeroSection />
<div className="swim-lanes border-top border-bottom">
<SwimLane />
<FeaturedContent />
</div>
</div>
);

3
pages/index.js
Unescape View File

@ -1,11 +1,12 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { faGithub, fab } from '@fortawesome/free-brands-svg-icons';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
import 'bootstrap/dist/css/bootstrap.min.css';
import './global.scss';
import Home from './home/index';
library.add(fab, faGithub);
library.add(fab, faGithub, faArrowRight);
const Index = () => (
<div>

Write Preview
Loading…
Cancel
Save