diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 8405ae7..9b25a07 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -60,4 +60,245 @@ body { .table-wrapper { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); -} \ No newline at end of file +} + + +/* +Colours +#FFFFFF - White +#4c82fc - Mustard +#4c82fc - Green +*/ + +.has-text-primary { + color: #4c82fc !important; +} + +.has-mustard-bg { + background-color: #4c82fc; +} + +.has-blue-bg { + background-color: #4c82fc; +} + +.has-white-mustard-gradient { + background: rgb(255, 255, 255); + background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%); + background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%); + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1); +} + +@media(max-width: 1024px) { + .has-white-mustard-gradient { + background: rgb(255, 255, 255); + background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%); + background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%); + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1); + } +} + +/* +Typography +*/ + +@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap'); + +h1, +h2, +h3 { + font-family: 'Calistoga'; + margin-bottom: 10px; +} +p, +a, +span { + font-family: 'Open Sans', sans-serif; + font-weight: 400; +} + +@media(max-width: 767px) { + p { + max-width: 90%; + margin: 0 auto; + } +} + + + +/* +Links +*/ +.a-menu { + letter-spacing: 3px; + text-transform: uppercase; + transition: opacity 1s ease; + opacity: 0.8; +} + +.a-menu:hover { + opacity: 1; + color: #000000 !important; + text-decoration: none; +} + +/* +Wrapper +*/ +.section .container, +.hero .hero-body, +.hero .hero-head { + width: 1200px; + max-width: 100%; + margin: 0 auto; +} + +/* +Some aesthetic improvements +*/ +nav { + padding-top: 20px; + max-height: 50px; +} + +.paragraph { + width: 600px; + line-height: 1.5em; +} + +/* +Hero +*/ +.burger { + position: absolute; + top: 0; + right: 0; +} +@media(min-width: 1024px) { + .hero-body { + background-image: url(../img/hero.png); + background-size: 30%; + background-position: 80% 50%; + background-repeat: no-repeat; + } + .hero-body p { + width: 600px; + } +} + +/* +Button +*/ +.btn { + margin-top: 20px; + border-radius: 50px; + border: none; + padding: 10px 30px; + transition: opacity 1s ease; + opacity: 1; + cursor: pointer; +} + +.btn:hover { + opacity: 0.8; +} + +/* +Twitter Feed +*/ +#twitter-feed .columns { + margin: 0px; +} +@media(max-width: 1024px) { + margin: 0px 10px; +} + +.box { + padding-top: 30px; + padding-bottom: 30px; +} + +.box .icon { + margin-top: -10px; + color: #4c82fc !important; + transition: color 0.5s ease; +} + +.box .icon:hover { + color: #4c82fc !important; +} +#twitter-feed .container .is-size-7 { + padding: 20px; +} + +/* +Features +*/ +.feature-img { + max-width: 60%; + margin: 0 auto; +} + +.column { + display: flex; + justify-content: center; + flex-flow: column; + text-align: center; +} + +.column h3, +.column p { + align-self: center; +} + +@media(max-width: 1024px) { + .reverse-row-order { + flex-direction: column-reverse; + display: flex; + } +} + +/* +Newsletter +*/ +#newsletter { + text-align: center; +} + +#newsletter p { + width: 600px; + margin: 0 auto; +} + +.social-link { + padding: 15px; + color: #FFFFFF !important; +} + +.newsletter-input { + border: none; + border-bottom: 2px solid #4c82fc; + border-radius: 0% !important; + box-shadow: none; + text-align: center; +} + +#newsletter .field { + width: 400px; + max-width: 80%; + padding: 20px; + margin: 0 auto; +} + +/* +Footer +*/ +#footer p { + padding: 20px; +} + +#footer a { + color: #FFFFFF !important; +} diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 75a45da..f9553e8 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,4 +1,6 @@ -
+<% +=begin%> +

@@ -9,4 +11,238 @@

-
\ No newline at end of file +
+<% +=end%> + + + + +
+ + +
+
+ +
+
+
+

+ An engaging headline +

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+ +
+
+
+ + + +
+
+
+
+
+
+
+
+ Image +
+
+
+
+

+ Some guy @someguy 5m +
+ Frist time I used @fancyapp, was like the first time I listened to The Beatles. Christmas came early, I guess. +

+
+ +
+
+
+
+
+
+
+
+
+ Image +
+
+
+
+

+ Some girl @somegirl 5m +
+ Fancy App is the answer to all your problems, all praise the #fancyappgod! +

+
+ +
+
+
+
+
+
+
+ + + +
+
+
+
+

+ Open Source, all the way +

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+
+
+ feature +
+
+
+
+
+ +
+ feature +
+
+

+ Second Exciting Feature

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+
+ +
+
+
+
+ +
+

+ Third Feature, Wow

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+
+
+ feature +
+
+
+
+ + +
+
+

+ Newsletter or Call to Action

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+ + +
+
+ + + +
+