From a782395cda42dff16010811877397bb019ce1f9b Mon Sep 17 00:00:00 2001 From: karemarsy Date: Thu, 23 Apr 2020 19:35:31 +0200 Subject: [PATCH] Add the template in the project Added the template of landing page in the project and customise it --- app/assets/stylesheets/application.css.scss | 243 +++++++++++++++++++- app/views/home/index.html.erb | 240 ++++++++++++++++++- 2 files changed, 480 insertions(+), 3 deletions(-) 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. +

+ + +
+
+ + + +
+