diff --git a/.gitignore b/.gitignore index 1373ff3..cef2387 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules *.log .env +/build diff --git a/front_end/public/images/1.png b/front_end/public/images/1.png new file mode 100644 index 0000000..60a3279 Binary files /dev/null and b/front_end/public/images/1.png differ diff --git a/front_end/public/images/2.png b/front_end/public/images/2.png new file mode 100644 index 0000000..1d2b98d Binary files /dev/null and b/front_end/public/images/2.png differ diff --git a/front_end/public/images/3.png b/front_end/public/images/3.png new file mode 100644 index 0000000..db292e9 Binary files /dev/null and b/front_end/public/images/3.png differ diff --git a/front_end/public/javascripts/index.js b/front_end/public/javascripts/index.js deleted file mode 100644 index 1b2733d..0000000 --- a/front_end/public/javascripts/index.js +++ /dev/null @@ -1,10 +0,0 @@ -const React = require('react') -const ReactDOM = require('react-dom') - -class Root extends React.Component { - render(){ - return

BEST APP EVER

- } -} - -ReactDOM.render( , document.getElementById('root')) diff --git a/front_end/public/stylesheets/style.css b/front_end/public/stylesheets/style.css index 9453385..f8b3753 100644 --- a/front_end/public/stylesheets/style.css +++ b/front_end/public/stylesheets/style.css @@ -1,8 +1,175 @@ body { - padding: 50px; - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; + margin: auto; + font-family: 'Questrial', sans-serif; + font-style: normal; + font-weight: 500; + font-size: 17px; } +h2.title { + letter-spacing: 5px; + border-radius: 20px; + height: 20px; + width: 20px; + margin-top: 22px; +} + + a { - color: #00B7FF; + font-weight: 600; + text-align: left; + cursor: pointer; + color: #4CAF50; + font-family: 'Questrial', sans-serif; + padding-top: 10px; +} + +.logo { + color: #4CAF50; + margin-top: 10px; + padding: 5px; + font-size: 40px; +} + +.nav, h2 { + color: rgb(240, 241, 242); + padding-left: 5px; +} + +.nav { + display: flex; + flex-direction: row; + justify-content: space-between; + text-transform: uppercase; + background-color: rgb(70, 77, 92); + max-width: 100%; +} + +.nav-header-right { + margin-top: 15px; + padding: 15px; +} + +.nav-header-right, a, button { + margin: 6px; +} + +input { + padding: 10px; + font-size: 14px; + border-radius: 10px; +} + +.nav-header-left { + display: flex; + flex-direction: row; + margin-top: 5px; + padding: 10px; +} + + +.spotlight-container-img { + z-index: 10; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.learnersguild.org/images/photo2.jpg'); height: 700px; + max-width: 100%; + background-size: cover; + background-repeat: no-repeat; +} + +.spotlight-message { + color: white; + font-size: 18px; +} + +.spotlight-header { + color: #4CAF50; + font-size: 40px; + padding-top: 100px; + padding-left: 40px; + font-weight: 600; + letter-spacing: 2px; +} + +button { + z-index: -1; + background-color: #4CAF50; + border: none; + border-radius: 10px; + padding: 14px; + height: 40px; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 14px; + font-family: 'Questrial', sans-serif; +} + +.btn-demo{ + z-index: -1; + background-color: #3d4351; + border: none; + padding: 14px; + border-radius: 10px; + height: 40px; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 14px; + font-family: 'Questrial', sans-serif; +} + +.content { + text-align: center; + color: black; +} + +.content.h3, .h4 { + display: flex; + flex-direction: row; +} + +div.feat-1 { + background-image: url('/images/1.png'); + height: 200px; + width: 260px; + background-repeat: no-repeat; + background-position: 60px 50px; +} + +div.feat-2 { + background-image: url('/images/2.png'); + height: 200px; + width: 260px; + background-repeat: no-repeat; + background-position: 60px 50px; +} + +div.feat-3 { + background-image: url('/images/3.png'); + height: 200px; + width: 260px; + background-repeat: no-repeat; + background-position: 60px 50px; +} + +.content-tools { + display: flex; + flex-direction: row; + justify-content: space-around; + text-align: center; +} + +.footer-nav { + margin-top: 50px; + max-height: 50px; + color: rgb(240, 241, 242); + background-color: rgb(70, 77, 92); +} + +.footer-nav { + color: rgb(240, 241, 242); + text-transform: uppercase; + display: flex; } diff --git a/frontend/index.js b/frontend/index.js new file mode 100644 index 0000000..1c1549e --- /dev/null +++ b/frontend/index.js @@ -0,0 +1 @@ +console.log('browser code here') diff --git a/package.json b/package.json index 40fe0d1..5533364 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "react-router": "^2.6.1" }, "devDependencies": { - "mocha": "^3.1.2", "babel-cli": "^6.11.4", "babel-core": "^6.13.2", "babel-preset-es2015": "^6.13.2", diff --git a/routes/index.js b/routes/index.js index 8bc2198..806b164 100644 --- a/routes/index.js +++ b/routes/index.js @@ -3,7 +3,7 @@ const router = express.Router(); /* GET home page. */ router.get('/', (request, response, next) => { - response.render('index', { title: 'Lizardboard' }); + response.render('index', { title: 'Dragonboard', logo: 'D' }); }); module.exports = router; diff --git a/views/footer.pug b/views/footer.pug new file mode 100644 index 0000000..3652af3 --- /dev/null +++ b/views/footer.pug @@ -0,0 +1,6 @@ + +div.footer-nav + a(href= '/about') About + a(href= '/team') Team + a(href= '/contact') Contact + a(href= '/login') Login diff --git a/views/index.pug b/views/index.pug index 2202a2e..6a776fb 100644 --- a/views/index.pug +++ b/views/index.pug @@ -2,8 +2,30 @@ extends layout block content - h1=title + div.container - #root - script(src="/public/javascripts/index.js") + div.spotlight-container + div.spotlight-container-img + div.spotlight-header LIVE MONITOR DASHBOARD SOFTWARE + div.spotlight-message Focus Your Team and Improve Your KPIs + div.buttons + button.btn.btn-default(type='button') Start Your Free Trial + button.btn-demo(type='button') Book A Demo + div.spotlight-container-text + div.content + h3 Easy APIs to build dashboards for your next project + h4 Quickly see the information important to your team + + div.content-tools + div.feat-1 + a(href='/product') This is Feature 1 + p Real Time Data Visualiztion + + div.feat-2 + a(href='/product') This is Feature 2 + p Real Time Project Updates + + div.feat-3 + a(href='/product') This is Feature 3 + p Real Time Sales Goals diff --git a/views/layout.pug b/views/layout.pug index a586957..c8f1475 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -1,10 +1,26 @@ doctype html html head - title= title link(href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css') + link(href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css') link(rel='stylesheet', href='/stylesheets/style.css') + + div.nav + div.nav-header-left + h1.logo= logo + h2.title= title + + div.nav-header-right + a(href= '/product') Product + a(href= '/login') Login + input(type="text", placeholder="Email address") + button(type="submit" ) Free Trial + body block content - script(src="/javascripts/index.js") + div.footer-nav + + include footer + script(src="/javascripts/index.js") + script(src="/public/javascripts/index.js") diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..ad71a24 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,18 @@ +module.exports = { + entry: "./front_end/index.js", + output: { + path: __dirname + "/public/javascripts", + filename: "bundle.js", + module: { + loaders: [ + { + test: /\.(js|jsx)$/, + exclude: /(node_modules|bower_components)/, + loader: "babel-loader", + query: { + } + } + ] + } + } +}