info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-01-17 22:28:32 +01:00
Code Issues Releases Wiki Activity

Add footer UI

Browse Source
This commit is contained in:
Kamran Ahmed 2019-09-14 06:24:33 +04:00
parent 93db393474
commit c4b1eb76fd
2 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/footer/index.js
View File

@ -3,6 +3,8 @@ import './style.scss';
const Footer = () => (
<div className="page-footer">
<div className="container">
<div className="foot-cols-wrap row">
<div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
<div className="site-meta">
<div className="brand-detail">
<a href="#" className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a>
@ -20,6 +22,35 @@ const Footer = () => (
</p>
</div>
</div>
<div className="site-contribute foot-col col">
<ul>
<li className='foot-header'>Contribute</li>
<li><a href="#">Write an Article</a></li>
<li><a href="#">Submit a Roadmap</a></li>
<li><a href="#">Add resources</a></li>
<li><a href="#">Codebase</a></li>
</ul>
</div>
<div className="site-learn foot-col col">
<ul>
<li className="foot-header">Learn</li>
<li><a href="#">Read Articles</a></li>
<li><a href="#">Follow Roadmap</a></li>
<li><a href="#">Review Projects</a></li>
<li><a href="#">Contribute</a></li>
</ul>
</div>
<div className="site-learn foot-col col">
<ul>
<li className="foot-header">Most Visited</li>
<li><a href="#">Frontend Roadmap</a></li>
<li><a href="#">Backend Roadmap</a></li>
<li><a href="#">DevOps Roadmap</a></li>
<li><a href="#">One for All</a></li>
</ul>
</div>
</div>
</div>
</div>
);

26
components/footer/style.scss
View File

@ -2,6 +2,7 @@
padding: 65px 10px;
.site-meta {
margin-bottom: 30px;
width: 350px;
.brand-detail {
@ -64,4 +65,29 @@
}
}
}
.foot-col {
max-width: 190px;
a {
color: #999;
}
.foot-header {
font-weight: 500;
margin-bottom: 7px;
}
ul {
margin: 0;
padding: 0;
li {
margin-bottom: 2px;
font-size: 15px;
list-style: none;
margin-left: 0;
}
}
}
}