diff --git a/public/LightBulb2.svg b/public/LightBulb2.svg new file mode 100644 index 0000000..294b34e --- /dev/null +++ b/public/LightBulb2.svg @@ -0,0 +1,62 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/public/lightbulb-white.png b/public/lightbulb-white.png new file mode 100644 index 0000000..1433650 Binary files /dev/null and b/public/lightbulb-white.png differ diff --git a/public/lightbulb-yellow.png b/public/lightbulb-yellow.png new file mode 100644 index 0000000..47df06c Binary files /dev/null and b/public/lightbulb-yellow.png differ diff --git a/public/main.js b/public/main.js index 8b13789..a2e5a3a 100644 --- a/public/main.js +++ b/public/main.js @@ -1 +1,25 @@ - +(function () { + var icon = document.getElementById('js-icon'); + var text = document.getElementsByClassName('text'); + var isOn = false; + for(var i = 0; i < text.length; i++){ + text[i].style.color = 'white'; + } + icon.addEventListener('click', function(e) { + if (!isOn) { + icon.setAttribute('src', '/lightbulb-yellow.png'); + document.body.style.backgroundColor = 'white'; + for(var i = 0; i < text.length; i++){ + text[i].style.color = 'black'; + } + isOn = true; + } else { + icon.src = '/lightbulb-white.png'; + document.body.style.backgroundColor = '#2b2b2b'; + for(var i = 0; i < text.length; i++){ + text[i].style.color = 'white'; + } + isOn = false; + } + }); +})(); diff --git a/public/style.css b/public/style.css index 641db83..65ab549 100644 --- a/public/style.css +++ b/public/style.css @@ -5,6 +5,10 @@ body { text-align: center; + margin: auto; + background-color: #2b2b2b; + font-family: 'Dosis', sans-serif; + transition: 2s ease; } a { @@ -16,17 +20,107 @@ h1 { } img { - display: block; - margin: 0 auto; + display: block; + margin: 0 auto; } -.fa-lightbulb-o { - font-size: 250px; +.icon { + width: 10vw; + margin: 5vh auto; + transition: 2s ease; } .landing_btn { display: block; - margin: 10px auto; - width: 300px; - height: 100px; + font-size: 3vw; + padding: 2rem; + margin: 1.5rem auto; + border-radius: 10px; + font-family: 'Dosis', sans-serif; + cursor: pointer; + text-decoration: none; +} + +.landing_btn--skills { + background-color: #FF7C4C; + border: 1px solid #C63C09; + box-shadow: 0px 6px 0px #D13700, 0px 3px 15px rgba(0, 0, 0, .4); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .3); + box-shadow: inset 0px 0px 3px rgba(255, 255, 255, .5); + -webkit-box-shadow: 0px 6px 0px #D13700, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + -moz-box-shadow: 0px 6px 0px #D13700, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + box-shadow: 0px 6px 0px #C63C09, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); +} + +.landing_btn--idea { + background-color: #8AE1FC; + border: 1px solid #2d6898; + box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0, 0, 0, .4); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .3); + box-shadow: inset 0px 0px 3px rgba(255, 255, 255, .5); + -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); +} +} + +.header { + color: white; + font-family: 'Dosis', sans-serif; + font-size: 2rem; +} + +.footer { + color: white; + font-family: 'Dosis', sans-serif; + font-size: 1.5rem; + margin-top: 2rem; +} + +a { + text-decoration: none; + color: inherit; +} + +.form__label{ + display: block; + font-size: 2vw; + color: white; + margin-bottom: 1vh; +} + +.idea-form input { + margin-bottom: 3.5vh; + width: 30vw; + font-size: 2vw; +} + +.idea-form textarea { + font-size: 2vw; + +} +.submit { + font-size: 5vh; + background-color: #44FFD1; + padding: 1vw; + width: auto; + margin-top: 2vh; + border-radius: 10px; + background-color: #44FFD1; + border: 1px solid #207d66; + box-shadow: 0px 6px 0px #207d66, 0px 3px 15px rgba(0, 0, 0, .4); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .3); + box-shadow: inset 0px 0px 3px rgba(255, 255, 255, .5); + -webkit-box-shadow: 0px 6px 0px #207d66, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + -moz-box-shadow: 0px 6px 0px #207d66, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + box-shadow: 0px 6px 0px #207d66, 0px 3px 15px rgba(0, 0, 0, .4), inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px 0px 3px rgba(255, 255, 255, .5); + cursor: pointer; +} + +.btn_browse { + display: inline; +} + +.block { + display: inline-block; } diff --git a/src/views/browse.hbs b/src/views/browse.hbs index 5110492..f5d70ec 100644 --- a/src/views/browse.hbs +++ b/src/views/browse.hbs @@ -1,5 +1,7 @@ {{#each data}} - -

{{this.ideatitle}}

+ + {{/each}} diff --git a/src/views/home.hbs b/src/views/home.hbs index a326e5d..87323d1 100644 --- a/src/views/home.hbs +++ b/src/views/home.hbs @@ -1,6 +1,3 @@ - - - - - + + diff --git a/src/views/new-idea.hbs b/src/views/new-idea.hbs index 0f1bfa7..ecb9947 100644 --- a/src/views/new-idea.hbs +++ b/src/views/new-idea.hbs @@ -1,7 +1,12 @@ +
- - - - - + + + + + + + + +
diff --git a/src/views/partials/footer.hbs b/src/views/partials/footer.hbs index 1473a8d..56d55b6 100644 --- a/src/views/partials/footer.hbs +++ b/src/views/partials/footer.hbs @@ -1,7 +1,9 @@ -