diff --git a/package-lock.json b/package-lock.json index bbc9ce3..f3cab6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2474,6 +2474,16 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "boostrap": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz", + "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg==" + }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -8728,6 +8738,11 @@ "topo": "2.0.2" } }, + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" + }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -10244,6 +10259,11 @@ "ts-pnp": "1.0.1" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", diff --git a/package.json b/package.json index d67a75d..1ef4a81 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "boostrap": "^2.0.0", + "bootstrap": "^4.3.1", + "jquery": "^3.3.1", + "popper.js": "^1.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "2.1.8" diff --git a/src/components/App.js b/src/components/App.js index 0923734..e95471c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,28 +1,12 @@ import React, { Component } from 'react'; -import Header from './shared/header'; -import Footer from "./shared/footer" +import Home from './pages/home' import './App.css'; class App extends Component { render() { return (
-
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
); } diff --git a/src/components/pages/home.js b/src/components/pages/home.js new file mode 100644 index 0000000..77ea4c2 --- /dev/null +++ b/src/components/pages/home.js @@ -0,0 +1,18 @@ +import React, {Component} from 'react'; +import Header from '../shared/header'; +import Footer from "../shared/footer"; +import Carousel from '../shared/carousel'; + +class Home extends Component { + render() { + return ( +
+
+ +
+ ); + } +} + +export default Home; \ No newline at end of file diff --git a/src/components/shared/carousel.js b/src/components/shared/carousel.js new file mode 100644 index 0000000..2522145 --- /dev/null +++ b/src/components/shared/carousel.js @@ -0,0 +1,33 @@ +import React, {Component} from 'react'; +import CarouselImageOne from '../../images/home/carouselImageOne.jpg' +import CarouselImageTwo from '../../images/home/carouselImageTwo.jpg' + +class Carousel extends Component { + render() { + return ( +
+
+
+ ... +
+
+ ... +
+
+ ... +
+
+ + + Previous + + + + Next + +
+ ); + } +} + +export default Carousel; \ No newline at end of file diff --git a/src/components/shared/footer.js b/src/components/shared/footer.js index d3b0c40..7740ce4 100644 --- a/src/components/shared/footer.js +++ b/src/components/shared/footer.js @@ -1,12 +1,21 @@ import React, {Component} from 'react'; -import ReactDOM from 'react-dom'; class Footer extends Component { render() { return ( -

- This is a footer! -

+
+
+
+ One +
+
+ Two +
+
+ Three +
+
+
); } } diff --git a/src/components/shared/header.js b/src/components/shared/header.js index 217ba42..57e9069 100644 --- a/src/components/shared/header.js +++ b/src/components/shared/header.js @@ -1,12 +1,30 @@ import React, {Component} from 'react'; -import ReactDOM from 'react-dom'; class Header extends Component { render() { return ( -

- This is a header! -

+ ); } } diff --git a/src/images/home/carouselImageOne.jpg b/src/images/home/carouselImageOne.jpg new file mode 100644 index 0000000..2b54f57 Binary files /dev/null and b/src/images/home/carouselImageOne.jpg differ diff --git a/src/images/home/carouselImageTwo.jpg b/src/images/home/carouselImageTwo.jpg new file mode 100644 index 0000000..9698cfc Binary files /dev/null and b/src/images/home/carouselImageTwo.jpg differ diff --git a/src/index.css b/src/index.css deleted file mode 100644 index cee5f34..0000000 --- a/src/index.css +++ /dev/null @@ -1,14 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} diff --git a/src/index.js b/src/index.js index 5f6ae24..57016c1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,11 @@ +import 'bootstrap/dist/css/bootstrap.min.css'; +// eslint-disable-next-line +import $ from 'jquery'; +// eslint-disable-next-line +import Popper from 'popper.js'; +import 'bootstrap/dist/js/bootstrap.bundle.min'; import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker';