yusufipek/natours-react
1
0
Fork 0
mirror of https://github.com/yusufipk/natours-react.git synced 2026-09-11 11:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

created feature-box component and section

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-02 12:55:38 +03:00
parent ed73cbb2bb
commit 12ab9e618c
11 changed files with 129 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+14
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/App.js
+3 -1
View File
@@ -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 (
<div>
<Header />
<About />
<Feature />
</div>
);
}
src/App.scss
+2 -1
View File
@@ -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";
src/commons/feature-section/feature.jsx
+58
View File
@@ -0,0 +1,58 @@
function Feature() {
return (
<section className="section-features">
<div className="row">
<div className="col-1-of-4">
<div className="feature-box">
<i className="feature-box__icon fa fa-globe" />
<h3 className="heading-tertiary u-margin-bottom-small">
Explore the world
</h3>
<p className="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
iure ipsum facere quia quis dolorum laboriosam omnis esse.
</p>
</div>
</div>
<div className="col-1-of-4">
<div className="feature-box">
<i className="feature-box__icon fa fa-compass" />
<h3 className="heading-tertiary u-margin-bottom-small">
Meet nature
</h3>
<p className="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
iure ipsum facere quia quis dolorum laboriosam omnis esse.
</p>
</div>
</div>
<div className="col-1-of-4">
<div className="feature-box">
<i className="feature-box__icon fa fa-map" />
<h3 className="heading-tertiary u-margin-bottom-small">
Find your way
</h3>
<p className="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
iure ipsum facere quia quis dolorum laboriosam omnis esse.
</p>
</div>
</div>
<div className="col-1-of-4">
<div className="feature-box">
<i className="feature-box__icon fa fa-heart" />
<h3 className="heading-tertiary u-margin-bottom-small">
Live a healthier life
</h3>
<p className="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
iure ipsum facere quia quis dolorum laboriosam omnis esse.
</p>
</div>
</div>
</div>
</section>
);
}
export default Feature;
src/commons/header/header.js → src/commons/header/header.jsx
View File
src/index.js
+7 -6
View File
@@ -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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
src/sass/components/button.scss → src/sass/components/_button.scss
View File
src/sass/components/composition.scss → src/sass/components/_composition.scss
View File
src/sass/components/_feature-box.scss
+26
View File
@@ -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);
}
}
src/sass/pages/_home.scss
+18
View File
@@ -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);
}
}