feat: add june 2020 footer
This commit is contained in:
Ahmad Abdolsaheb
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
4b7ad8447b
commit
e32022a198
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Link from '../helpers/Link';
|
||||
import { dasherize } from '../../../../utils/slugs';
|
||||
|
||||
function FooterCol({ title, links }) {
|
||||
return (
|
||||
<div className={`footer-col ${dasherize(title)}`}>
|
||||
{title ? (
|
||||
<div className={`col-header `}>{title}</div>
|
||||
) : (
|
||||
<div className='col-spacer'></div>
|
||||
)}
|
||||
{links.map(({ to, text, internal }, i) => (
|
||||
<Link external={!internal} key={`link-${i}`} to={to}>
|
||||
{text}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
links: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
to: PropTypes.string.isRequired,
|
||||
text: PropTypes.string,
|
||||
internal: PropTypes.bool
|
||||
})
|
||||
).isRequired,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
FooterCol.propTypes = propTypes;
|
||||
FooterCol.displayName = 'FooterCol';
|
||||
export default FooterCol;
|
||||
@ -8,7 +8,7 @@ exports[`<Footer /> matches snapshot 1`] = `
|
||||
className="footer-container"
|
||||
>
|
||||
<div
|
||||
className="footer-row"
|
||||
className="footer-top"
|
||||
>
|
||||
<div
|
||||
className="footer-desc-col"
|
||||
@ -36,15 +36,265 @@ exports[`<Footer /> matches snapshot 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col our-nonprofit"
|
||||
className="trending-guides"
|
||||
>
|
||||
<div
|
||||
className="col-header "
|
||||
className="col-header"
|
||||
>
|
||||
Trending Guides
|
||||
</div>
|
||||
<div
|
||||
className="trending-guides-row"
|
||||
>
|
||||
<div
|
||||
className="footer-col footer-col-1"
|
||||
>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/javascript-closure-tutorial-with-js-closure-example-code/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
JavaScript Closure
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/css-tutorial-drop-shadow/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Box Shadow
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/python-list-append-how-to-add-an-element-to-an-array-explained-with-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Python List Append
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/javascript-array-sort-tutorial-how-to-use-js-sort-methods-with-code-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
JavaScript Array Sort
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/symlink-tutorial-in-linux-how-to-create-and-remove-a-symbolic-link/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Symlink in Linux
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/grep-command-tutorial-how-to-search-for-a-file-in-linux-and-unix/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Linux Grep Command
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/what-is-dns/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
What is DNS?
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/primary-key-sql-tutorial-how-to-define-a-primary-key-in-a-database/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Primary Key SQL
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/sql-update-statement-example-queries-for-updating-table-values/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
SQL Update Statement
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/how-to-screenshot-on-windows/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Screenshot on PC
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col footer-col-2"
|
||||
>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/javascript-es6-promises-for-beginners-resolve-reject-and-chaining-explained/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
JavaScript Promise
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/what-is-github-what-is-git-and-how-to-use-these-developer-tools/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
What is GitHub?
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/the-python-sort-list-array-method-ascending-and-descending-explained-with-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Python Sort List
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/json-comment-example-how-to-comment-in-json-files/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Comments in JSON
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/what-is-kanban-the-agile-methodology-defined-and-how-to-use-it-for-your-software-development-team-2/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
What is Kanban?
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/python-write-to-file-open-read-append-and-other-file-handling-functions-explained/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Python Write to File
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Media Queries
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/html-entities-symbols-special-character-codes-list/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
HTML Entities
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/excel-vba-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Excel VBA
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/vlookup-in-excel/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
LOOKUP in Excel
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col footer-col-3"
|
||||
>
|
||||
<div
|
||||
className="footer-left"
|
||||
>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/what-is-a-proxy-server-in-english-please/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
What is a Proxy Server?
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/the-cat-command-in-linux-concatenation-explained-with-bash-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Cat Command in Linux
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Background Image
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
HTML Background Color
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/comments-in-css/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Comment Example
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-right"
|
||||
>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/arrow-function-javascript-tutorial-how-to-declare-a-js-function-with-the-new-es6-syntax/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Arrow Function JavaScript
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/how-to-remove-duplicates-in-excel-delete-duplicate-rows-with-a-few-clicks/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Remove Duplicates in Excel
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/what-is-dllhost-exe-and-com-surrogate-in-windows-task-manager-solved/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
dllhost.exe COM Surrogate
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/boolean-algebra/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Boolean Algebra Truth Table
|
||||
</a>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/news/can-you-facetime-on-android-no-but-here-are-some-alternative-video-conferencing-apps/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Video Chat for Android
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="footer-buttom"
|
||||
>
|
||||
<div
|
||||
className="col-header"
|
||||
>
|
||||
Our Nonprofit
|
||||
</div>
|
||||
<div
|
||||
className="footer-divder"
|
||||
/>
|
||||
<div
|
||||
className="our-nonprofit"
|
||||
>
|
||||
<a
|
||||
href="/news/about/"
|
||||
href="https://www.freecodecamp.org/news/about/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
@ -65,232 +315,62 @@ exports[`<Footer /> matches snapshot 1`] = `
|
||||
Open Source
|
||||
</a>
|
||||
<a
|
||||
href="/news/shop/"
|
||||
href="https://www.freecodecamp.org/shop/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Shop
|
||||
</a>
|
||||
<a
|
||||
href="/news/support/"
|
||||
href="https://www.freecodecamp.org/news/support/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Support
|
||||
</a>
|
||||
<a
|
||||
href="/news/sponsors/"
|
||||
href="https://www.freecodecamp.org/news/sponsors/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Sponsors
|
||||
</a>
|
||||
<a
|
||||
href="/news/academic-honesty-policy/"
|
||||
href="https://www.freecodecamp.org/news/academic-honesty-policy/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Academic Honesty
|
||||
</a>
|
||||
<a
|
||||
href="/news/code-of-conduct/"
|
||||
href="https://www.freecodecamp.org/news/code-of-conduct/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Code of Conduct
|
||||
</a>
|
||||
<a
|
||||
href="/news/privacy-policy/"
|
||||
href="https://www.freecodecamp.org/news/privacy-policy/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a
|
||||
href="/news/terms-of-service/"
|
||||
href="https://www.freecodecamp.org/news/terms-of-service/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
<a
|
||||
href="/news/copyright-policy/"
|
||||
href="https://www.freecodecamp.org/news/copyright-policy/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Copyright Policy
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col trending-guides"
|
||||
>
|
||||
<div
|
||||
className="col-header "
|
||||
>
|
||||
Trending Guides
|
||||
</div>
|
||||
<a
|
||||
href="/news/2019-web-developer-roadmap/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
2019 Web Developer Roadmap
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-python-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Python Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Flexbox Guide
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-javascript-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
JavaScript Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/python-example/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Python Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-html-html5-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
HTML Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/linux-command-line-bash-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Linux Command Line Guide
|
||||
</a>
|
||||
<a
|
||||
href="/news/javascript-example/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
JavaScript Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-git-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Git Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-react-javascript-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
React Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-java-8-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Java Tutorial
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col "
|
||||
>
|
||||
<div
|
||||
className="col-spacer"
|
||||
/>
|
||||
<a
|
||||
href="/news/the-best-linux-tutorials/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Linux Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-css-and-css3-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/the-best-jquery-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
jQuery Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-sql-database-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
SQL Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/css-example-css3/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
CSS Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/react-examples-reactjs/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
React Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-angular-tutorial-angularjs/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Angular Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/the-best-bootstrap-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Bootstrap Example
|
||||
</a>
|
||||
<a
|
||||
href="/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
How to Set Up SSH Keys
|
||||
</a>
|
||||
<a
|
||||
href="/news/best-wordpress-tutorial/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
WordPress Tutorial
|
||||
</a>
|
||||
<a
|
||||
href="/news/the-best-php-examples/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
PHP Example
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
/* 11. Site Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
color: var(--tertiary-color);
|
||||
background: var(--tertiary-background);
|
||||
line-height: 1.6;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 15px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
@ -15,31 +16,40 @@
|
||||
padding-right: 15px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.footer-container p {
|
||||
font-family: 'Lato', sans-serif;
|
||||
margin: 0 0 1.45rem;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer-container a {
|
||||
color: var(--tertiary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-container a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-container .col-header {
|
||||
padding-bottom: 30px;
|
||||
flex: 0 0 100%;
|
||||
padding-bottom: 15px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 0 15px 15px;
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
@ -48,16 +58,18 @@
|
||||
flex: 0 0 100%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
font-size: 15px;
|
||||
margin: 0 0 3rem;
|
||||
}
|
||||
.footer-col a {
|
||||
text-decoration: none;
|
||||
padding: 5px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
text-decoration: underline;
|
||||
.footer-right,
|
||||
.footer-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.footer-col a {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.footer-desc-col {
|
||||
@ -78,22 +90,49 @@ p.footer-donation {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p.footer-donation a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-container .col-spacer {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
.trending-guides {
|
||||
margin: 0 0 3rem;
|
||||
}
|
||||
|
||||
.footer-buttom .our-nonprofit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-buttom .our-nonprofit a {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.footer-col {
|
||||
flex: 1 0 50%;
|
||||
.trending-guides-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-col-3 {
|
||||
flex: 1 0 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
.footer-right {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-right,
|
||||
.footer-left {
|
||||
flex: 1 0 45%;
|
||||
height: auto;
|
||||
font-size: 16.5;
|
||||
margin: 0 0 1.45rem;
|
||||
}
|
||||
.footer-col:last-of-type {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.footer-container .col-spacer {
|
||||
margin-top: -1.45rem;
|
||||
font-size: 15;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,21 +140,24 @@ p.footer-donation {
|
||||
.footer-container {
|
||||
width: 750px;
|
||||
}
|
||||
.footer-col {
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3 {
|
||||
flex: 1 0 25%;
|
||||
height: auto;
|
||||
font-size: 16.5;
|
||||
}
|
||||
|
||||
/* .our-nonprofit {
|
||||
flex: 1 0 35%;
|
||||
} */
|
||||
.footer-col:last-of-type {
|
||||
/* flex: 1 0 30%; */
|
||||
margin-left: 0px;
|
||||
.footer-col-3 {
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer-right {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.footer-container .col-spacer {
|
||||
margin-top: 54px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.footer-buttom .our-nonprofit a {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -129,17 +171,45 @@ p.footer-donation {
|
||||
.footer-container {
|
||||
width: 1170px;
|
||||
}
|
||||
.footer-desc-col {
|
||||
flex: 1 0 35%;
|
||||
.footer-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.footer-col {
|
||||
flex: 1 0 9%;
|
||||
.footer-desc-col {
|
||||
flex: 1 0 45%;
|
||||
}
|
||||
.trending-guides {
|
||||
flex: 1 0 15%;
|
||||
flex: 1 0 58%;
|
||||
}
|
||||
|
||||
.footer-col-1 {
|
||||
flex: 1 0 25%;
|
||||
}
|
||||
.footer-col-3 {
|
||||
flex: 1 0 30%;
|
||||
}
|
||||
.footer-col-2 {
|
||||
flex: 1 0 20%;
|
||||
}
|
||||
|
||||
p.footer-donation {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.footer-buttom .our-nonprofit {
|
||||
padding: 0 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-buttom .col-header {
|
||||
display: none;
|
||||
}
|
||||
.our-nonprofit {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.footer-divder {
|
||||
height: 2px;
|
||||
margin: 0 15px;
|
||||
background-color: var(--quaternary-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
{
|
||||
"footerLinks": [
|
||||
{
|
||||
"title": "Our Nonprofit",
|
||||
"links": [
|
||||
{ "to": "/news/about/", "text": "About" },
|
||||
{
|
||||
"to": "https://www.linkedin.com/school/free-code-camp/people/",
|
||||
"text": "Alumni Network"
|
||||
},
|
||||
{ "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
|
||||
{ "to": "/news/shop/", "text": "Shop" },
|
||||
{ "to": "/news/support/", "text": "Support" },
|
||||
{ "to": "/news/sponsors/", "text": "Sponsors" },
|
||||
{
|
||||
"to": "/news/academic-honesty-policy/",
|
||||
"text": "Academic Honesty"
|
||||
},
|
||||
{ "to": "/news/code-of-conduct/", "text": "Code of Conduct" },
|
||||
{ "to": "/news/privacy-policy/", "text": "Privacy Policy" },
|
||||
{ "to": "/news/terms-of-service/", "text": "Terms of Service" },
|
||||
{ "to": "/news/copyright-policy/", "text": "Copyright Policy" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Trending Guides",
|
||||
"links": [
|
||||
{
|
||||
"to": "/news/2019-web-developer-roadmap/",
|
||||
"text": "2019 Web Developer Roadmap"
|
||||
},
|
||||
{ "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
|
||||
{
|
||||
"to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
|
||||
"text": "CSS Flexbox Guide"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-javascript-tutorial/",
|
||||
"text": "JavaScript Tutorial"
|
||||
},
|
||||
{ "to": "/news/python-example/", "text": "Python Example" },
|
||||
{ "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
|
||||
{
|
||||
"to": "/news/linux-command-line-bash-tutorial/",
|
||||
"text": "Linux Command Line Guide"
|
||||
},
|
||||
{ "to": "/news/javascript-example/", "text": "JavaScript Example" },
|
||||
|
||||
{ "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
|
||||
{
|
||||
"to": "/news/best-react-javascript-tutorial/",
|
||||
"text": "React Tutorial"
|
||||
},
|
||||
{ "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "",
|
||||
"links": [
|
||||
{ "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
|
||||
|
||||
{ "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
|
||||
{ "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
|
||||
{ "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
|
||||
{ "to": "/news/css-example-css3/", "text": "CSS Example" },
|
||||
{ "to": "/news/react-examples-reactjs/", "text": "React Example" },
|
||||
{
|
||||
"to": "/news/best-angular-tutorial-angularjs/",
|
||||
"text": "Angular Tutorial"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-best-bootstrap-examples/",
|
||||
"text": "Bootstrap Example"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
|
||||
"text": "How to Set Up SSH Keys"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-wordpress-tutorial/",
|
||||
"text": "WordPress Tutorial"
|
||||
},
|
||||
{ "to": "/news/the-best-php-examples/", "text": "PHP Example" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -2,9 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Link from '../helpers/Link';
|
||||
import FooterCol from './FooterCol';
|
||||
|
||||
import { footerLinks } from './footerLinks';
|
||||
import './footer.css';
|
||||
|
||||
const propTypes = {
|
||||
@ -22,7 +20,7 @@ function Footer() {
|
||||
return (
|
||||
<footer className='site-footer'>
|
||||
<div className='footer-container'>
|
||||
<div className='footer-row'>
|
||||
<div className='footer-top'>
|
||||
<div className='footer-desc-col'>
|
||||
<p>
|
||||
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
|
||||
@ -47,13 +45,323 @@ function Footer() {
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
{footerLinks.map(({ title, links }, index) => (
|
||||
<FooterCol
|
||||
key={`footer-col-${index}`}
|
||||
links={links}
|
||||
title={title}
|
||||
/>
|
||||
))}
|
||||
<div className='trending-guides'>
|
||||
<div className='col-header'>Trending Guides</div>
|
||||
<div className='trending-guides-row'>
|
||||
<div className='footer-col footer-col-1'>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/javascript-closure-tutorial-with-js-closure-example-code/'
|
||||
}
|
||||
>
|
||||
JavaScript Closure
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/css-tutorial-drop-shadow/'
|
||||
}
|
||||
>
|
||||
CSS Box Shadow
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/python-list-append-how-to-add-an-element-to-an-array-explained-with-examples/'
|
||||
}
|
||||
>
|
||||
Python List Append
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/javascript-array-sort-tutorial-how-to-use-js-sort-methods-with-code-examples/'
|
||||
}
|
||||
>
|
||||
JavaScript Array Sort
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/symlink-tutorial-in-linux-how-to-create-and-remove-a-symbolic-link/'
|
||||
}
|
||||
>
|
||||
Symlink in Linux
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/grep-command-tutorial-how-to-search-for-a-file-in-linux-and-unix/'
|
||||
}
|
||||
>
|
||||
Linux Grep Command
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/what-is-dns/'}
|
||||
>
|
||||
What is DNS?
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/primary-key-sql-tutorial-how-to-define-a-primary-key-in-a-database/'
|
||||
}
|
||||
>
|
||||
Primary Key SQL
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/sql-update-statement-example-queries-for-updating-table-values/'
|
||||
}
|
||||
>
|
||||
SQL Update Statement
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/how-to-screenshot-on-windows/'
|
||||
}
|
||||
>
|
||||
Screenshot on PC
|
||||
</Link>
|
||||
</div>
|
||||
<div className='footer-col footer-col-2'>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/javascript-es6-promises-for-beginners-resolve-reject-and-chaining-explained/'
|
||||
}
|
||||
>
|
||||
JavaScript Promise
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/what-is-github-what-is-git-and-how-to-use-these-developer-tools/'
|
||||
}
|
||||
>
|
||||
What is GitHub?
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/the-python-sort-list-array-method-ascending-and-descending-explained-with-examples/'
|
||||
}
|
||||
>
|
||||
Python Sort List
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/json-comment-example-how-to-comment-in-json-files/'
|
||||
}
|
||||
>
|
||||
Comments in JSON
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/what-is-kanban-the-agile-methodology-defined-and-how-to-use-it-for-your-software-development-team-2/'
|
||||
}
|
||||
>
|
||||
What is Kanban?
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/python-write-to-file-open-read-append-and-other-file-handling-functions-explained/'
|
||||
}
|
||||
>
|
||||
Python Write to File
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/'
|
||||
}
|
||||
>
|
||||
CSS Media Queries
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/html-entities-symbols-special-character-codes-list/'
|
||||
}
|
||||
>
|
||||
HTML Entities
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/excel-vba-tutorial/'}
|
||||
>
|
||||
Excel VBA
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/vlookup-in-excel/'}
|
||||
>
|
||||
LOOKUP in Excel
|
||||
</Link>
|
||||
</div>
|
||||
<div className='footer-col footer-col-3'>
|
||||
<div className='footer-left'>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/what-is-a-proxy-server-in-english-please/'
|
||||
}
|
||||
>
|
||||
What is a Proxy Server?
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/the-cat-command-in-linux-concatenation-explained-with-bash-examples/'
|
||||
}
|
||||
>
|
||||
Cat Command in Linux
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/'
|
||||
}
|
||||
>
|
||||
CSS Background Image
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/'
|
||||
}
|
||||
>
|
||||
HTML Background Color
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/comments-in-css/'}
|
||||
>
|
||||
CSS Comment Example
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='footer-right'>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/arrow-function-javascript-tutorial-how-to-declare-a-js-function-with-the-new-es6-syntax/'
|
||||
}
|
||||
>
|
||||
Arrow Function JavaScript
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/how-to-remove-duplicates-in-excel-delete-duplicate-rows-with-a-few-clicks/'
|
||||
}
|
||||
>
|
||||
Remove Duplicates in Excel
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/what-is-dllhost-exe-and-com-surrogate-in-windows-task-manager-solved/'
|
||||
}
|
||||
>
|
||||
dllhost.exe COM Surrogate
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/boolean-algebra/'}
|
||||
>
|
||||
Boolean Algebra Truth Table
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={
|
||||
'https://www.freecodecamp.org/news/can-you-facetime-on-android-no-but-here-are-some-alternative-video-conferencing-apps/'
|
||||
}
|
||||
>
|
||||
Video Chat for Android
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer-buttom'>
|
||||
<div className='col-header'>Our Nonprofit</div>
|
||||
<div className='footer-divder'></div>
|
||||
<div className='our-nonprofit'>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/about/'}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
sameTab={false}
|
||||
to={'https://www.linkedin.com/school/free-code-camp/people/'}
|
||||
>
|
||||
Alumni Network
|
||||
</Link>
|
||||
<Link external={false} to={'https://github.com/freeCodeCamp/'}>
|
||||
Open Source
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
sameTab={false}
|
||||
to={'https://www.freecodecamp.org/shop/'}
|
||||
>
|
||||
Shop
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/support/'}
|
||||
>
|
||||
Support
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/sponsors/'}
|
||||
>
|
||||
Sponsors
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/academic-honesty-policy/'}
|
||||
>
|
||||
Academic Honesty
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/code-of-conduct/'}
|
||||
>
|
||||
Code of Conduct
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/privacy-policy/'}
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/terms-of-service/'}
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Link
|
||||
external={false}
|
||||
to={'https://www.freecodecamp.org/news/copyright-policy/'}
|
||||
>
|
||||
Copyright Policy
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user