Kamran Ahmed
5 years ago
parent
1a2cd75e5d
commit
2826a5302f
4 changed files with 154 additions and 130 deletions
@ -0,0 +1,54 @@ |
||||
import { FeaturedContentWrap } from './style'; |
||||
|
||||
const FeaturedGuides = () => ( |
||||
<FeaturedContentWrap className="featured-content-wrap"> |
||||
<div className="container"> |
||||
<p className='border-through featured-separator'> |
||||
<span> |
||||
List of most visited guides |
||||
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">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="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="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="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="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="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> |
||||
</FeaturedContentWrap> |
||||
); |
||||
|
||||
export default FeaturedGuides; |
||||
@ -0,0 +1,54 @@ |
||||
import { FeaturedContentWrap } from './style'; |
||||
|
||||
const FeaturedJourneys = () => ( |
||||
<FeaturedContentWrap className="featured-content-wrap"> |
||||
<div className="container"> |
||||
<p className='border-through featured-separator'> |
||||
<span> |
||||
List of most visited Journeys |
||||
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Journeys →</a> |
||||
</span> |
||||
</p> |
||||
<div className="swim-lane row featured-journeys"> |
||||
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block"> |
||||
<a href="#"> |
||||
<img src="/static/kamran.jpeg" alt="" /> |
||||
<div className="journey-meta"> |
||||
<h4>Kamran Ahmed</h4> |
||||
<p>Engineering Lead at Al-tayer</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block"> |
||||
<a href="#"> |
||||
<img src="/static/aras.jpeg" alt="" /> |
||||
<div className="journey-meta"> |
||||
<h4>Aras Atasaygin</h4> |
||||
<p>Engg. Manager at Al-tayer</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block"> |
||||
<a href="#"> |
||||
<img src="/static/dan-abramove.jpeg" alt="" /> |
||||
<div className="journey-meta"> |
||||
<h4>Dan Abramov</h4> |
||||
<p>Co-founder and CTO at Blink</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block"> |
||||
<a href="#"> |
||||
<img src="/static/chris-coyier.jpeg" alt="" /> |
||||
<div className="journey-meta"> |
||||
<h4>Chris Coyier</h4> |
||||
<p>Co-founder of Codepen</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</FeaturedContentWrap> |
||||
); |
||||
|
||||
export default FeaturedJourneys; |
||||
@ -0,0 +1,39 @@ |
||||
import { FeaturedContentWrap } from './style'; |
||||
|
||||
const FeaturedRoadmaps = () => ( |
||||
<FeaturedContentWrap className="featured-content-wrap"> |
||||
<div className="container"> |
||||
<div className="featured-head"> |
||||
<h3>Featured Content</h3> |
||||
<p className="border-through featured-separator"> |
||||
<span> |
||||
List of roadmaps mostly visited by the community |
||||
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">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="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="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="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> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</FeaturedContentWrap> |
||||
); |
||||
|
||||
export default FeaturedRoadmaps; |
||||
Loading…
Reference in new issue