diff --git a/fortune-timer-app/package-lock.json b/fortune-timer-app/package-lock.json index 1020269..366b9c4 100644 --- a/fortune-timer-app/package-lock.json +++ b/fortune-timer-app/package-lock.json @@ -6620,6 +6620,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8587,6 +8600,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", + "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==", + "requires": { + "@babel/runtime": "^7.5.5", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", @@ -8730,6 +8752,14 @@ "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz", "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==" }, + "moment-timezone": { + "version": "0.5.27", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.27.tgz", + "integrity": "sha512-EIKQs7h5sAsjhPCqN6ggx6cEbs94GK050254TIJySD1bzoM5JTYDwAU1IoVOeTOL6Gm27kYJ51/uuvq1kIlrbw==", + "requires": { + "moment": ">= 2.9.0" + } + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -10926,6 +10956,11 @@ "rc-util": "2.x" } }, + "react-compound-timer": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-compound-timer/-/react-compound-timer-1.2.0.tgz", + "integrity": "sha512-BEFT0Z/+vusfAy4Ci1+G5lr8mI+dk3ddRJuu1DIYA5xGS+5P+M0o4krHmFMKgHuaIY9H3xx0KCvf3ilb1+HFWA==" + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", @@ -11265,6 +11300,29 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-live-clock": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/react-live-clock/-/react-live-clock-4.0.5.tgz", + "integrity": "sha512-NsXuUAGrUPAnJJc4RWVNE63hbb9gZNO0gN0bMbI/fMT5Iq8Oc/KmnD1yV6W/7EzhlU4jmErng/tVWmp0pDxYHw==", + "requires": { + "moment": "2.24.0", + "moment-timezone": "0.5.27", + "prop-types": "15.7.2", + "react-moment": "0.9.7" + }, + "dependencies": { + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + } + } + }, + "react-moment": { + "version": "0.9.7", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.7.tgz", + "integrity": "sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==" + }, "react-overlays": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.0.tgz", @@ -11344,6 +11402,52 @@ } } }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -11759,6 +11863,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -13215,6 +13324,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13607,6 +13726,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/fortune-timer-app/package.json b/fortune-timer-app/package.json index 859562d..e9a2f0d 100644 --- a/fortune-timer-app/package.json +++ b/fortune-timer-app/package.json @@ -10,8 +10,11 @@ "moment": "^2.27.0", "react": "^16.13.1", "react-bootstrap": "^1.3.0", + "react-compound-timer": "^1.2.0", "react-dom": "^16.13.1", "react-icons-kit": "^1.3.1", + "react-live-clock": "^4.0.5", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-shapes": "^0.1.0", "styled-components": "^5.1.1" diff --git a/fortune-timer-app/src/ToggleTest.js b/fortune-timer-app/src/ToggleTest.js new file mode 100644 index 0000000..bf5ec01 --- /dev/null +++ b/fortune-timer-app/src/ToggleTest.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' +import Clock from './containers/Clock--container/Clock'; + +export default class ToggleTest extends Component { + state = { + on: false, + } + + toggle = () => { + this.setState({ + on: !this.state.on + }) + } + render() { + return ( +
+ {this.state.on && } + +
+ ) + } +} diff --git a/fortune-timer-app/src/ToggleTest2.js b/fortune-timer-app/src/ToggleTest2.js new file mode 100644 index 0000000..bf5ec01 --- /dev/null +++ b/fortune-timer-app/src/ToggleTest2.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' +import Clock from './containers/Clock--container/Clock'; + +export default class ToggleTest extends Component { + state = { + on: false, + } + + toggle = () => { + this.setState({ + on: !this.state.on + }) + } + render() { + return ( +
+ {this.state.on && } + +
+ ) + } +} diff --git a/fortune-timer-app/src/components/SetTimerPage.js b/fortune-timer-app/src/components/SetTimerPage.js new file mode 100644 index 0000000..dfd40f2 --- /dev/null +++ b/fortune-timer-app/src/components/SetTimerPage.js @@ -0,0 +1,50 @@ +import React, {Component} from 'react'; +import styled from 'styled-components'; +import Message from './Timer-box/ModalWindow'; +import { Row, Col } from 'react-bootstrap'; +import Countdown from '../components/Timer-box/Countdown'; + +const Styles = styled.div` +.countdown{ + display:flex; + width:100%; + justify-content: space-around; + flex-flow: row nowrap; + font-size:19px; + + +} +.countdown-segment-caption{ + display:block; + +} +.coundown-segment-number{ + +} +`; + +class SetTimer extends Component{ + state = { + countdown: { + futureDate: "2020.09.12 00:00:00" + } + } + render(){ + const { + countdown + } = this.state; + return ( + + + + + + + + + + + )} +} + +export default SetTimer; \ No newline at end of file diff --git a/fortune-timer-app/src/components/TimeMapPage.js b/fortune-timer-app/src/components/TimeMapPage.js new file mode 100644 index 0000000..916517b --- /dev/null +++ b/fortune-timer-app/src/components/TimeMapPage.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Container, Row, Col } from 'react-bootstrap'; + + +function timeMap(){ + return ( + + +

time map page

+ + + ) +} + +export default timeMap; \ No newline at end of file diff --git a/fortune-timer-app/src/components/Timer-box/Buttons.js b/fortune-timer-app/src/components/Timer-box/Buttons.js new file mode 100644 index 0000000..2337dc3 --- /dev/null +++ b/fortune-timer-app/src/components/Timer-box/Buttons.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Icon } from 'react-icons-kit' +import {stop} from 'react-icons-kit/metrize/music' +import {pause} from 'react-icons-kit/metrize/music' +import {prevStep} from 'react-icons-kit/metrize/music' + + + +const buttons = () => { + return( + +
+ +
+
+ +
+
+ +
+ + ) +} + +export default buttons; + diff --git a/fortune-timer-app/src/components/Timer-box/Countdown.js b/fortune-timer-app/src/components/Timer-box/Countdown.js new file mode 100644 index 0000000..91210a2 --- /dev/null +++ b/fortune-timer-app/src/components/Timer-box/Countdown.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import moment, {duration} from 'moment'; + + + +export default class Countdown extends Component { + state = { + days:0, + hours: 0, + minutes: 0, + seconds: 0, + }; + + addZeros(value){ + value = String(value); + while (value.length < 2 ){ + value = `0${value}`; + } + return value; + } + + setCountdown() { + const futureDate = moment(this.props.futureDate); + + const today = moment(); + + const clockDuration = duration(futureDate.diff(today)); + + const days = Math.floor(clockDuration.asDays()); + const hours = clockDuration.hours(); + const minutes = clockDuration.minutes(); + const seconds = clockDuration.seconds(); + + this.setState({ + days, + hours, + minutes, + seconds + }) + } + + componentDidMount(){ + this.setCountdown(); + this.interval = setInterval(() => { + this.setCountdown(); + }, 1000); + } + + componentWillUnmount(){ + clearInterval(this.interval); + } + + render() { + return ( +
+ {Object.keys(this.state).map((key,i) => ( +
+ + {this.addZeros(this.state[key])} + + + {key.toUpperCase()} + +
+ ))} +
+ ) + } +} diff --git a/fortune-timer-app/src/components/Timer-box/ModalWindow.js b/fortune-timer-app/src/components/Timer-box/ModalWindow.js new file mode 100644 index 0000000..d2a282a --- /dev/null +++ b/fortune-timer-app/src/components/Timer-box/ModalWindow.js @@ -0,0 +1,68 @@ +import React, {Component} from 'react'; +import styled from 'styled-components'; +import {basic_notebook_pen} from 'react-icons-kit/linea/basic_notebook_pen'; +import { Icon } from 'react-icons-kit'; +import StickyNotes from '../Timer-box/StickyNotes'; + + + + + + +import { Container,Row,Col,Button, Modal } from 'react-bootstrap'; +const Styles = styled.div` +.col{ + margin-top:50px; + border-bottom:1px solid white; + display:flex; + justify-content: center; + padding:15px; + +} +svg{ + cursor:pointer +} +span{ + display:block; +} +`; + +class ModalNotes extends Component{ + constructor(){ + super() + this.state={ + show:false + } + } + handleModal(){ + this.setState({show:!this.state.show}) + } + render(){ + return ( + + + + +
+ {this.handleModal()}} size={30} icon={basic_notebook_pen} /> + notes +
+ this.handleModal()}> + Create a note + + + + + + + + + + + + + ) + } +} + +export default ModalNotes; \ No newline at end of file diff --git a/fortune-timer-app/src/components/Timer-box/StickyNotes.js b/fortune-timer-app/src/components/Timer-box/StickyNotes.js new file mode 100644 index 0000000..e74e642 --- /dev/null +++ b/fortune-timer-app/src/components/Timer-box/StickyNotes.js @@ -0,0 +1,127 @@ + +import {Container,Row,Col} from 'react-bootstrap'; +import React, { Component } from 'react' +import styled from 'styled-components'; +import {close} from 'react-icons-kit/ikons/close' +import { Icon } from 'react-icons-kit'; + + +const Styles = styled.div` +.tc-notes-wrapper { + .new-note-btn { + width: 200px; + display: block; + margin: 0 auto 20px; + background-color: #FFF; + padding: 10px 32px; + border: 1px solid #e0e0e0; + font-size: 26px; + outline: 0; + transition: all 0.3s; + cursor: pointer; + font-family: 'Caveat', cursive; + + &:hover { + box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1); + } + + &:active { + position: relative; + top: 1px; + } + } + + .tc-notes { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 0 auto; + + .tc-note { + background-color: #f0c806; + border-radius: 8px; + width: 280px; + margin: 0 10px 20px; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); + transition: all 0.5s; + cursor: pointer; + font-family: 'Caveat', cursive; + + .tc-note-header { + padding: 10px 16px 0; + + .tc-note-close { + display: inline-block; + width: 24px; + height: 24px; + border-radius: 50%; + line-height: 24px; + text-align: center; + transition: all 0.3s; + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + + &:focus { + box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.8); + } + } + + .tc-note-close { + float: right; + } + } + + .tc-note-title, + .tc-note-body { + outline: 0; + } + + .tc-note-title { + font-size: 18px; + padding: 10px 16px; + font-weight: bold; + } + + .tc-note-body { + font-size: 15px; + padding: 10px 16px 16px; + } + + &:hover { + box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3); + } + } + } + } +`; + + +export default class StickyNotes extends Component { + render() { + return ( +
+ +
+
+
+
+ + + +
+
+ title goes here +
+
+ body goes here +
+
+
+
+ +
+ ) + } +} diff --git a/fortune-timer-app/src/components/Timer-box/TimeNow.js b/fortune-timer-app/src/components/Timer-box/TimeNow.js index 931d126..8a3e73a 100644 --- a/fortune-timer-app/src/components/Timer-box/TimeNow.js +++ b/fortune-timer-app/src/components/Timer-box/TimeNow.js @@ -1,37 +1,10 @@ -import React, {Component} from 'react'; -import styled from 'styled-components'; -import Moment from 'moment'; - - -class TimeNow extends React.Component { - constructor(props) { - super(props); - this.state = { - time: new Date().toLocaleString() - }; - } - componentDidMount() { - this.intervalID = setInterval( - () => this.tick(), - 1000 - ); - } - componentWillUnmount() { - clearInterval(this.intervalID); - } - tick() { - this.setState({ - time: new Date().toLocaleString() - - }); - } +import React from 'react'; +import Clock from 'react-live-clock'; + +export default class MyComponent extends React.Component { render() { - return ( -

- {this.state.time}. -

- ); + return( + + ) } - } - -export default TimeNow; \ No newline at end of file +} \ No newline at end of file diff --git a/fortune-timer-app/src/components/Timer-box/Timer--clock.js b/fortune-timer-app/src/components/Timer-box/Timer--clock.js deleted file mode 100644 index d84cf4a..0000000 --- a/fortune-timer-app/src/components/Timer-box/Timer--clock.js +++ /dev/null @@ -1,11 +0,0 @@ -import React, {Image} from 'react'; -import styled from 'styled-components'; - -const clock = () => { -return( - - -) -} - -export default clock; \ No newline at end of file diff --git a/fortune-timer-app/src/components/Timer-box/Timer--navigation.js b/fortune-timer-app/src/components/Timer-box/Timer--navigation.js index 646e50e..d3a44d1 100644 --- a/fortune-timer-app/src/components/Timer-box/Timer--navigation.js +++ b/fortune-timer-app/src/components/Timer-box/Timer--navigation.js @@ -19,14 +19,13 @@ const navBar = () => { return( - Simple Timer + Simple Timer diff --git a/fortune-timer-app/src/components/Timer-box/TimerNowPage.js b/fortune-timer-app/src/components/Timer-box/TimerNowPage.js new file mode 100644 index 0000000..c2fe83c --- /dev/null +++ b/fortune-timer-app/src/components/Timer-box/TimerNowPage.js @@ -0,0 +1,26 @@ +import React from 'react'; +import Time from './TimeNow'; +import styled from 'styled-components'; +import { Row, Col } from 'react-bootstrap'; + +const Styles = styled.div` + +time{ + font-size: 44px; + line-height:50px; +} +`; + +function timeTimer(){ + return ( + + + + + + ) +} + +export default timeTimer; \ No newline at end of file diff --git a/fortune-timer-app/src/containers/App.js b/fortune-timer-app/src/containers/App.js index f8e4253..704ff70 100644 --- a/fortune-timer-app/src/containers/App.js +++ b/fortune-timer-app/src/containers/App.js @@ -1,13 +1,23 @@ import React from 'react'; import Layout from './Layout/Layout'; -import TimerBox from '../components/Timer-box/Timer--box'; - +import NavBar from '../components/Timer-box/Timer--navigation'; +import TimeNowPage from '../components/Timer-box/TimerNowPage'; +import SetTimerPage from '../components/SetTimerPage'; +import TimeMapPage from '../components/TimeMapPage'; +import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; function App() { return ( + - + + + + + + + ); } diff --git a/fortune-timer-app/src/containers/Layout/Layout.js b/fortune-timer-app/src/containers/Layout/Layout.js index 5d4d8a5..d86387e 100644 --- a/fortune-timer-app/src/containers/Layout/Layout.js +++ b/fortune-timer-app/src/containers/Layout/Layout.js @@ -12,7 +12,6 @@ const Styles = styled.div` const Layout = (props) => { return( - {props.children} diff --git a/fortune-timer-app/src/index.css b/fortune-timer-app/src/index.css index ec2585e..2931310 100644 --- a/fortune-timer-app/src/index.css +++ b/fortune-timer-app/src/index.css @@ -1,4 +1,5 @@ body { + margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', @@ -11,3 +12,21 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +.col-md-8{ + height:20vh; + background-color:#D9D7D8; + border-radius:18px; + box-shadow: 0px 1px 37px -4px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 1px 37px -4px rgba(0,0,0,0.75); + box-shadow: 0px 1px 37px -4px rgba(0,0,0,0.75); + text-align:center; + display: flex; + justify-content: center; + align-items: center; + margin-top: 138px; +} + +.container-fluid{ + border:1px solid white; + height:90vh; +} \ No newline at end of file