From 4a19c30e4aaef5aa82a298f8e57c6bb3257db853 Mon Sep 17 00:00:00 2001 From: Heitor Ramon Ribeiro Date: Fri, 8 Feb 2019 16:30:26 -0200 Subject: [PATCH] Added some new design to Landing Page (#3178) * Update Landing.vue * Update Landing.vue --- docs/src/pages/Landing.vue | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/Landing.vue b/docs/src/pages/Landing.vue index 874d0b8fcd5..27d1d08a6bf 100644 --- a/docs/src/pages/Landing.vue +++ b/docs/src/pages/Landing.vue @@ -21,11 +21,13 @@ q-btn(push, color="white", text-color="primary", to="/introduction-to-quasar", label="About") q-btn(push, color="white", text-color="primary", to="/start", label="Get started") .text-body2.q-ml-md v{{ $q.version }} + .text-center(style="position:absolute; bottom: 0; width: 100%;") + q-icon(name="expand_more", style="opacity: .4").text-h2.text-white - section.padding.landing__front + section.padding.landing__front.text-center div div.q-mb-lg Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours: - .q-gutter-md.row + .q-gutter-md.row.justify-center q-btn(color="primary", push, no-caps, no-wrap, icon-right="launch", label="SPA (Single Page App)", to="/quasar-cli/developing-spa/introduction") q-btn(color="teal", push, no-caps, no-wrap, icon-right="launch", label="PWA (Progressive Web App)", to="/quasar-cli/developing-pwa/introduction") q-btn(color="accent", push, no-caps, no-wrap, icon-right="launch", label="SSR (Server-side Rendered App)", to="/quasar-cli/developing-ssr/introduction") @@ -49,7 +51,7 @@ h4 All Platforms in One Go p One source code for all platforms simultaneously: responsive desktop/mobile websites (SPA or SSR), PWAs (Progressive Web Apps), mobile apps (that look native) and Desktop apps (through Electron). - section.padding.bg-primary + section.padding.bg-primary.bg-swirl-section .landing__features.row.justify-between.items-start.q-col-gutter-xl .col-xs-12.col-sm-5 .feature-item @@ -263,6 +265,12 @@ export default { padding-top 72px !important padding-bottom 72px !important +.bg-swirl-section + background-repeat no-repeat !important + background-position center + background-size cover + background-image url(https://cdn.quasar-framework.org/img/landing_first_section.png) !important + @keyframes logo-rotate 100% transform rotate(-360deg)