diff --git a/sass/common/header.scss b/sass/common/header.scss index dc29c5d0..9cfcc6eb 100644 --- a/sass/common/header.scss +++ b/sass/common/header.scss @@ -30,9 +30,11 @@ background-color: var(--common-green-primery); .header { &__logo { + transition: color var(--transition); color: var(--common-green); } &__link a{ + transition: color var(--transition); color: var(--common-black); } } diff --git a/sass/component/buttons.scss b/sass/component/buttons.scss index cb9297e3..a811ccf7 100644 --- a/sass/component/buttons.scss +++ b/sass/component/buttons.scss @@ -11,6 +11,7 @@ text-decoration: none; border-radius: var(--border-r-8); transition: background-color var(--transition); + gap: 10rem; &:hover { transition: background-color var(--transition); background-color: var(--common-green-hover); @@ -18,4 +19,26 @@ &--main { background-color: var(--common-green); } + &--transparent { + color: var(--common-green-btn); + transition: transform var(--transition); + padding: 10rem 0; + min-width: fit-content; + &:hover { + transition: background-color var(--transition); + background-color: transparent; + transition: transform var(--transition); + transform: scale(1.1); + } + } + + &--card { + background-color: var(--common-green); + font: var(--p-sub); + padding: 8rem; + flex-direction: row-reverse; + svg { + transform: scaleX(-1); + } + } } \ No newline at end of file diff --git a/sass/component/hero.scss b/sass/component/hero.scss deleted file mode 100644 index 3fac5261..00000000 --- a/sass/component/hero.scss +++ /dev/null @@ -1,31 +0,0 @@ -.hero { - background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed; - min-height: 100vh; - padding: 80rem 0; - display: flex; - align-items: center; - justify-content: center; - position: relative; - - &__container { - display: flex; - justify-content: flex-start; - align-items: center; - position: relative; - } - &__content { - max-width: 494rem; - } - &__title { - margin-bottom: var(--mb-16); - } - &__description { - margin-bottom: var(--mb-40); - } - &__image { - position: absolute; - top: 50%; - right: -20rem; - transform: translateY(-50%); - } -} \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss index ef592c7f..ca2cf910 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -2,6 +2,7 @@ @import "./variables/color-theme"; @import "./variables/fonts"; @import "./variables/spasing"; +@import "./variables/images"; /// Global Style /// @import "./global/reset"; @@ -13,9 +14,8 @@ // Component Style @import "./component/buttons"; @import "./component/switch-theme"; -@import "./component/hero"; // Pages Style - +@import "./pages/home"; diff --git a/sass/pages/home.scss b/sass/pages/home.scss new file mode 100644 index 00000000..c906a91a --- /dev/null +++ b/sass/pages/home.scss @@ -0,0 +1,178 @@ + +// Hero Section +.hero { + background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed; + min-height: 100vh; + padding: 80rem 0; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &__container { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + } + + &__content { + max-width: 494rem; + } + + &__title { + margin-bottom: var(--mb-16); + } + + &__description { + margin-bottom: var(--mb-40); + } + + &__image { + position: absolute; + top: 50%; + right: -20rem; + transform: translateY(-50%); + } +} + +// Section MAP +.open-map { + background: var(--map-section-bg) center center / contain no-repeat; + display: flex; + margin: 30rem 0; + align-items: center; + justify-content: center; + min-height: 660rem; + &__container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + } + &__img { + background: var(--map-section-icon) center center / cover no-repeat; + width: 144rem; + height: 144rem; + margin-bottom: var(--mb-16); + } + &__title { + margin-bottom: var(--mb-16); + } + &__icon { + position: absolute; + left: calc(50% - 25rem); + top: calc(50% - 25rem); + &:nth-child(1) { + width: 96rem; + left: calc(50% + 175rem); + top: calc(50% - 85rem); + } + &:nth-child(2) { + width: 72rem; + left: calc(50% + 285rem); + top: calc(50% - -45rem); + } + &:nth-child(3) { + width: 96rem; + left: calc(50% - 395rem); + top: calc(50% + -86rem); + } + &:nth-child(4) { + width: 72rem; + left: calc(50% - 355rem); + top: calc(50% - -74rem); + } + &:nth-child(5) { + width: 80rem; + left: calc(50% - -375rem); + top: calc(50% + 153rem); + } + &:nth-child(6) { + width: 64rem; + left: calc(50% + 305rem); + top: calc(50% + -217rem); + } + &:nth-child(7) { + width: 80rem; + left: calc(50% + -275rem); + top: calc(50% + 223rem); + } + &:nth-child(8) { + width: 64rem; + left: calc(50% - 195rem); + top: calc(50% + -227rem); + } + } +} + +// Services +.services { + + &__container { + padding: 50rem 40rem; + border-radius: var(--border-r-24); + background-color: var(--bg-green); + } + &__item { + display: flex; + align-items: center; + padding-bottom: 60rem; + gap: 50rem; + margin-right: -50rem; + &:nth-child(2n) { + flex-direction: row-reverse; + margin-right: auto; + margin-left: -50rem; + .services__card { + justify-content: flex-start; + } + .services__img--first { + left: auto; + right: 0; + } + } + &:last-child { + padding-bottom: 0; + } + + } + &__content { + max-width: 498rem; + } + &__title { + max-width: 357rem; + } + &__description { + margin: 24rem 0; + } + &__card { + position: relative; + flex-grow: 1; + display: flex; + justify-content: flex-end; + overflow: hidden; + } + &__button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + } + &__img { + padding: 20rem; + z-index: 3; + &--first { + object-fit: cover; + z-index: 1; + max-width: 324rem; + max-height: 374rem; + position: absolute; + top: 50%; + left: -28rem; + transform: translateY(-50%); + } + } +} diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss index 4f051977..72b277e1 100644 --- a/sass/variables/color-theme.scss +++ b/sass/variables/color-theme.scss @@ -4,7 +4,9 @@ --common-white: #ffffff; --common-green: #006C35; --common-green-primery: #CCE1D7; + --common-green-btn: #006031; --common-green-hover: #2b6445; + } // Theme COLOR change @@ -12,10 +14,12 @@ --white-black: var(--common-white); --black-white: var(--common-black); --green-theme: #006031; + --bg-green: #E5F0EB; } .dark { --white-black: var(--common-black); --black-white: var(--common-white); --green-theme: var(--common-green); + --bg-green: #33453D; } \ No newline at end of file diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss index db9ebfe0..2f517fc6 100644 --- a/sass/variables/fonts.scss +++ b/sass/variables/fonts.scss @@ -7,9 +7,11 @@ --h1: 300 48rem/60rem var(--sub-fonst); --h1-sub: 400 24rem/32rem var(--main-font); --p: 300 18rem/28rem var(--main-font); + --p-sub: 300 12rem/28rem var(--main-font); --nav-link: 500 16rem/28rem var(--main-font); } +// Title .h1{ font: var(--h1); color: var(--common-white); @@ -18,8 +20,18 @@ font: var(--h1-sub); color: var(--common-white); } -.p{ +.h2{ font: var(--h1); + color: var(--black-white); +} +.h2-sub{ + font: var(--h1-sub); + color: var(--black-white); +} + +// Text +.p{ + font: var(--p); } .nav-link{ diff --git a/sass/variables/images.scss b/sass/variables/images.scss new file mode 100644 index 00000000..91efb292 --- /dev/null +++ b/sass/variables/images.scss @@ -0,0 +1,11 @@ +:root { + --map-section-icon: url('images/open-map/open-map-logo.png'); +} + +.light { + --map-section-bg: url('/images/open-map/map-bg.png'); +} + +.dark { + --map-section-bg: url('/images/open-map/map-bg-dark.png'); +} \ No newline at end of file diff --git a/sass/variables/spasing.scss b/sass/variables/spasing.scss index 1333db93..4ad50b10 100644 --- a/sass/variables/spasing.scss +++ b/sass/variables/spasing.scss @@ -5,6 +5,7 @@ --mb-40: 40rem; --border-r-8: 8rem; + --border-r-24: 24rem; --transition: 0.5s; } \ No newline at end of file diff --git a/static/images/open-map/map-bg-dark.png b/static/images/open-map/map-bg-dark.png new file mode 100644 index 00000000..6276a603 Binary files /dev/null and b/static/images/open-map/map-bg-dark.png differ diff --git a/static/images/open-map/map-bg.png b/static/images/open-map/map-bg.png new file mode 100644 index 00000000..142e6436 Binary files /dev/null and b/static/images/open-map/map-bg.png differ diff --git a/static/images/open-map/open-map-bg.jpg b/static/images/open-map/open-map-bg.jpg deleted file mode 100644 index 64767670..00000000 Binary files a/static/images/open-map/open-map-bg.jpg and /dev/null differ diff --git a/static/images/open-map/open-map-logo.png b/static/images/open-map/open-map-logo.png index 1c0ef090..923d164a 100644 Binary files a/static/images/open-map/open-map-logo.png and b/static/images/open-map/open-map-logo.png differ diff --git a/static/images/open-map/paul-green-1.png b/static/images/open-map/paul-green-1.png new file mode 100644 index 00000000..61ec14f6 Binary files /dev/null and b/static/images/open-map/paul-green-1.png differ diff --git a/static/images/open-map/paul-green-2.png b/static/images/open-map/paul-green-2.png new file mode 100644 index 00000000..ccb00e0e Binary files /dev/null and b/static/images/open-map/paul-green-2.png differ diff --git a/static/images/open-map/paul-green-3.png b/static/images/open-map/paul-green-3.png new file mode 100644 index 00000000..718237ad Binary files /dev/null and b/static/images/open-map/paul-green-3.png differ diff --git a/static/images/open-map/paul-green-4.png b/static/images/open-map/paul-green-4.png new file mode 100644 index 00000000..70ed43f6 Binary files /dev/null and b/static/images/open-map/paul-green-4.png differ diff --git a/static/images/open-map/unsplash-1.png b/static/images/open-map/unsplash-1.png new file mode 100644 index 00000000..20fcb75d Binary files /dev/null and b/static/images/open-map/unsplash-1.png differ diff --git a/static/images/open-map/unsplash-2.png b/static/images/open-map/unsplash-2.png new file mode 100644 index 00000000..18db053d Binary files /dev/null and b/static/images/open-map/unsplash-2.png differ diff --git a/static/images/open-map/unsplash-3.png b/static/images/open-map/unsplash-3.png new file mode 100644 index 00000000..ca4917b8 Binary files /dev/null and b/static/images/open-map/unsplash-3.png differ diff --git a/static/images/open-map/unsplash-4.png b/static/images/open-map/unsplash-4.png new file mode 100644 index 00000000..e4143fd7 Binary files /dev/null and b/static/images/open-map/unsplash-4.png differ diff --git a/static/images/sections/map-m-1.png b/static/images/sections/map-m-1.png new file mode 100644 index 00000000..a8445336 Binary files /dev/null and b/static/images/sections/map-m-1.png differ diff --git a/static/images/sections/map-s-1.png b/static/images/sections/map-s-1.png new file mode 100644 index 00000000..aba4a629 Binary files /dev/null and b/static/images/sections/map-s-1.png differ diff --git a/templates/components/open_map.html b/templates/components/open_map.html deleted file mode 100644 index c3abd1d3..00000000 --- a/templates/components/open_map.html +++ /dev/null @@ -1,15 +0,0 @@ - -
-
-
- -
- Organic -
-
- Community + Open Maps -
-
-
-
- diff --git a/templates/home.html b/templates/home.html index 97165c26..344aa18f 100644 --- a/templates/home.html +++ b/templates/home.html @@ -2,13 +2,12 @@ {% block content %} -{% include 'components/hero.html' %} +{% include 'section/hero.html' %} -{% include 'components/open_map.html' %} +{% include 'section/open_map.html' %} -{% include 'section/site_sections.html' %} +{% include 'section/home-services.html' %} -{% include 'section/freedom_section.html' %} {{ resource.content | safe }} diff --git a/templates/index.html b/templates/index.html index 0ddd23a5..f1117f62 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,14 +2,14 @@ {% block content %} -{% include 'components/hero.html' %} +{% include 'section/hero.html' %} -{% include 'components/open_map.html' %} +{% include 'section/open_map.html' %} + +{% include 'section/home-services.html' %} -{% include 'section/site_sections.html' %} -{% include 'section/freedom_section.html' %} {{ resource.content | safe }} diff --git a/templates/section/freedom_section.html b/templates/section/freedom_section.html deleted file mode 100644 index fd7c09a5..00000000 --- a/templates/section/freedom_section.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
-
- Freedom Is Here -
-
- Discover your journey, navigate the world with privacy and community are at the forefront. -
- - Learn more - -
- -
-
-
\ No newline at end of file diff --git a/templates/components/hero.html b/templates/section/hero.html similarity index 100% rename from templates/components/hero.html rename to templates/section/hero.html diff --git a/templates/section/home-services.html b/templates/section/home-services.html new file mode 100644 index 00000000..fe948d48 --- /dev/null +++ b/templates/section/home-services.html @@ -0,0 +1,55 @@ +
+
+ +
+
+

+ Offline Search and Route +

+

+ See the place you want to go while in an underground parking garage, and navigate while on a distant + hike. +

+ + Learn more + {% include 'ui/btn-arrow.html' %} + +
+
+ + + + Learn more + {% include 'ui/btn-arrow.html' %} + +
+
+ + +
+
+

+ Offline Search and Route +

+

+ See the place you want to go while in an underground parking garage, and navigate while on a distant + hike. +

+ + Learn more + {% include 'ui/btn-arrow.html' %} + +
+
+ + + + Learn more + {% include 'ui/btn-arrow.html' %} + +
+
+ +
+ +
\ No newline at end of file diff --git a/templates/section/open_map.html b/templates/section/open_map.html new file mode 100644 index 00000000..779ab101 --- /dev/null +++ b/templates/section/open_map.html @@ -0,0 +1,23 @@ + +
+
+
+

+ Organic +

+

+ Community + Open Maps +

+
+ + + + + + + + +
+
+
+ diff --git a/templates/section/site_sections.html b/templates/section/site_sections.html deleted file mode 100644 index 7b1b93a7..00000000 --- a/templates/section/site_sections.html +++ /dev/null @@ -1,59 +0,0 @@ -
-
-
-
-
- Search and Plan Route -
-
- See the place you want to go while in an underground parking garage, and navigate while on a distant hike. -
- - Learn more - -
- -
-
-
-
- -
-
- No Tracking or Data Collection -
-
- The app is designed with privacy as a priority and does not identify users, or track information about them.
- - Learn more - -
-
-
-
-
- Save Your Battery -
-
- Efficiently uses your battery, doesn’t drain your battery like other navigation apps
- - Learn more - -
- -
-
- -
-
- Free and Built by the Community -
-
- People like you helped build the app by adding locations to the OpenStreetMap, giving feedback on features, and contributing code
- - Learn more - -
-
-
-
\ No newline at end of file diff --git a/templates/ui/btn-arrow.html b/templates/ui/btn-arrow.html new file mode 100644 index 00000000..e53515a1 --- /dev/null +++ b/templates/ui/btn-arrow.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file