diff --git a/package-lock.json b/package-lock.json index b3102f0..9751d3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", + "font-awesome": "^4.7.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", @@ -8499,6 +8500,14 @@ } } }, + "node_modules/font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=", + "engines": { + "node": ">=0.10.3" + } + }, "node_modules/for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -28052,6 +28061,11 @@ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.0.tgz", "integrity": "sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg==" }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", diff --git a/package.json b/package.json index cb177f7..3306321 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", + "font-awesome": "^4.7.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", diff --git a/src/App.js b/src/App.js index 09ef4dc..1e688e4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,14 @@ import "./App.scss"; import About from "./commons/about-section/about"; -import Header from "./commons/header/header"; +import Feature from "./commons/feature-section/feature"; +import Header from "./commons/header/header.jsx"; function App() { return (
+
); } diff --git a/src/App.scss b/src/App.scss index 53a39d6..fed413c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,8 +9,9 @@ @import "./sass/components/button"; @import "./sass/components/composition"; - +@import "./sass/components/feature-box"; @import "./sass/layout/header"; + @import "./sass/layout/grid"; @import "./sass/pages/home"; diff --git a/src/commons/feature-section/feature.jsx b/src/commons/feature-section/feature.jsx new file mode 100644 index 0000000..adf98e4 --- /dev/null +++ b/src/commons/feature-section/feature.jsx @@ -0,0 +1,58 @@ +function Feature() { + return ( +
+
+
+
+ +

+ Explore the world +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio + iure ipsum facere quia quis dolorum laboriosam omnis esse. +

+
+
+
+
+ +

+ Meet nature +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio + iure ipsum facere quia quis dolorum laboriosam omnis esse. +

+
+
+
+
+ +

+ Find your way +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio + iure ipsum facere quia quis dolorum laboriosam omnis esse. +

+
+
+
+
+ +

+ Live a healthier life +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio + iure ipsum facere quia quis dolorum laboriosam omnis esse. +

+
+
+
+
+ ); +} + +export default Feature; diff --git a/src/commons/header/header.js b/src/commons/header/header.jsx similarity index 100% rename from src/commons/header/header.js rename to src/commons/header/header.jsx diff --git a/src/index.js b/src/index.js index ef2edf8..12908f8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,15 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import reportWebVitals from "./reportWebVitals"; +import "../node_modules/font-awesome/css/font-awesome.min.css"; +import App from "./App"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function diff --git a/src/sass/components/button.scss b/src/sass/components/_button.scss similarity index 100% rename from src/sass/components/button.scss rename to src/sass/components/_button.scss diff --git a/src/sass/components/composition.scss b/src/sass/components/_composition.scss similarity index 100% rename from src/sass/components/composition.scss rename to src/sass/components/_composition.scss diff --git a/src/sass/components/_feature-box.scss b/src/sass/components/_feature-box.scss new file mode 100644 index 0000000..56b4b34 --- /dev/null +++ b/src/sass/components/_feature-box.scss @@ -0,0 +1,26 @@ +.feature-box { + background-color: rgba($color-white, 0.8); + font-size: 1.5rem; + padding: 2.5rem; + text-align: center; + border-radius: 0.3rem; + box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15); + transition: transform 0.3s; + + &__icon { + font-size: 6rem; + margin-bottom: 0.5rem; + display: inline-block; + background-image: linear-gradient( + to right, + $color-primary-light, + $color-primary-dark + ); + background-clip: text; + color: transparent; + } + + &:hover { + transform: translateY(-1.5rem) scale(1.03); + } +} diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss index 264f7e3..acd98d2 100644 --- a/src/sass/pages/_home.scss +++ b/src/sass/pages/_home.scss @@ -3,3 +3,21 @@ padding: 25rem 0; margin-top: -20vh; } + +.section-features { + padding: 20rem 0; + background-image: linear-gradient( + to right bottom, + rgba($color-primary-light, 0.8), + rgba($color-primary-dark, 0.8) + ), + url(../../commons/images/nat-4.jpg); + background-size: cover; + margin-top: -12rem; + + transform: skewY(-7deg); + + & > * { + transform: skewY(7deg); + } +}