organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

add section services

Browse source
This commit is contained in:
borntojesus 2023-11-14 13:51:12 +02:00
parent e4b9c18dfd
commit 891d7cbb87
32 changed files with 322 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
sass/common/header.scss
View file

@ -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);
}
}

23
sass/component/buttons.scss
View file

@ -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);
}
}
}

31
sass/component/hero.scss
View file

@ -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%);
}
}

4
sass/main.scss
View file

@ -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";

178
sass/pages/home.scss Normal file
View file

@ -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%);
}
}
}

4
sass/variables/color-theme.scss
View file

@ -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;
}

14
sass/variables/fonts.scss
View file

@ -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{

11
sass/variables/images.scss Normal file
View file

@ -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');
}

1
sass/variables/spasing.scss
View file

@ -5,6 +5,7 @@
--mb-40: 40rem;
--border-r-8: 8rem;
--border-r-24: 24rem;
--transition: 0.5s;
}

BIN
static/images/open-map/map-bg-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
static/images/open-map/map-bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
static/images/open-map/open-map-bg.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 214 KiB

BIN
static/images/open-map/open-map-logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
static/images/open-map/paul-green-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/images/open-map/paul-green-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
static/images/open-map/paul-green-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/open-map/paul-green-4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/images/open-map/unsplash-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/images/open-map/unsplash-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
static/images/open-map/unsplash-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/images/open-map/unsplash-4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/images/sections/map-m-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 256 KiB

BIN
static/images/sections/map-s-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 227 KiB

15
templates/components/open_map.html
View file

@ -1,15 +0,0 @@
<div class="open__map">
<div class="container">
<div class="open__map__info">
<img class="open__map__info__logo" src="/images/open-map/open-map-logo.png">
<div class="open__map__info__title">
Organic
</div>
<div class="open__map__info__description">
Community + Open Maps
</div>
</div>
</div>
</div>

7
templates/home.html
View file

@ -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 }}

8
templates/index.html
View file

@ -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 }}

18
templates/section/freedom_section.html
View file

@ -1,18 +0,0 @@
<div class="freedom__section">
<div class="container">
<div class="freedom__section__info">
<div class="freedom__section__text">
<div class="freedom__section__info__title">
Freedom Is Here
</div>
<div class="freedom__section__info__description">
Discover your journey, navigate the world with privacy and community are at the forefront.
</div>
<a class="freedom__section__info__button">
Learn more
</a>
</div>
<img src="/images/sections/search-and-plan-route-banner.png">
</div>
</div>
</div>

0
templates/components/hero.html → templates/section/hero.html
View file

55
templates/section/home-services.html Normal file
View file

@ -0,0 +1,55 @@
<section class="services">
<div class="container services__container">
<!--Item-->
<div class="services__item">
<div class="services__content">
<h3 class="h2 services__title">
Offline Search and Route
</h3>
<p class="p services__description">
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
<a class="button button--transparent" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
<div class="services__card">
<img class="services__img services__img--first" src="/images/sections/map-m-1.png">
<img class="services__img" src="/images/sections/map-s-1.png">
<a class="button button--card services__button" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
</div>
<!--Item End-->
<!--Item-->
<div class="services__item">
<div class="services__content">
<h3 class="h2 services__title">
Offline Search and Route
</h3>
<p class="p services__description">
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
<a class="button button--transparent" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
<div class="services__card">
<img class="services__img services__img--first" src="/images/sections/map-m-1.png">
<img class="services__img" src="/images/sections/map-s-1.png">
<a class="button button--card services__button" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
</div>
<!-- Item End-->
</div>
</section>

23
templates/section/open_map.html Normal file
View file

@ -0,0 +1,23 @@
<section class="open-map">
<div class="container open-map__container">
<div class="open-map__img"></div>
<h1 class="h2 open-map__title">
Organic
</h1>
<p class="h2-sub open-map__description">
Community + Open Maps
</p>
<div class="open-map__icon-row">
<img class="open-map__icon" src="images/open-map/unsplash-1.png" width="50">
<img class="open-map__icon" src="images/open-map/unsplash-2.png" width="50">
<img class="open-map__icon" src="images/open-map/unsplash-3.png" width="50">
<img class="open-map__icon" src="images/open-map/unsplash-4.png" width="50">
<img class="open-map__icon" src="images/open-map/paul-green-1.png" width="50">
<img class="open-map__icon" src="images/open-map/paul-green-2.png" width="50">
<img class="open-map__icon" src="images/open-map/paul-green-3.png" width="50">
<img class="open-map__icon" src="images/open-map/paul-green-4.png" width="50">
</div>
</div>
</section>

59
templates/section/site_sections.html
View file

@ -1,59 +0,0 @@
<div class="sections">
<div class="container shadow">
<div class="sections__separate">
<div class="sections__separate__info">
<div class="sections__separate__info__title">
Search and Plan Route
</div>
<div class="sections__separate__info__description">
See the place you want to go while in an underground parking garage, and navigate while on a distant hike.
</div>
<a class="sections__separate__info__link">
Learn more
</a>
</div>
<img src="/images/sections/search-and-plan-route-banner.png">
</div>
</div>
<div class="container container--main">
<div class="sections__separate">
<img src="/images/sections/no-tracking-banner.png">
<div class="sections__separate__info">
<div class="sections__separate__info__title">
No Tracking or Data Collection
</div>
<div class="sections__separate__info__description">
The app is designed with privacy as a priority and does not identify users, or track information about them. </div>
<a class="sections__separate__info__link">
Learn more
</a>
</div>
</div>
<div class="sections__separate">
<div class="sections__separate__info">
<div class="sections__separate__info__title">
Save Your Battery
</div>
<div class="sections__separate__info__description">
Efficiently uses your battery, doesn’t drain your battery like other navigation apps </div>
<a class="sections__separate__info__link">
Learn more
</a>
</div>
<img src="/images/sections/save-your-battery-banner.png">
</div>
<div class="sections__separate">
<img src="/images/sections/free-and-builty-by-community-banner.png">
<div class="sections__separate__info">
<div class="sections__separate__info__title">
Free and Built by the Community
</div>
<div class="sections__separate__info__description">
People like you helped build the app by adding locations to the OpenStreetMap, giving feedback on features, and contributing code </div>
<a class="sections__separate__info__link">
Learn more
</a>
</div>
</div>
</div>
</div>

3
templates/ui/btn-arrow.html Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2929 4.29289C13.6834 3.90237 14.3166 3.90237 14.7071 4.29289L21.7071 11.2929C21.8946 11.4804 22 11.7348 22 12C22 12.2652 21.8946 12.5196 21.7071 12.7071L14.7071 19.7071C14.3166 20.0976 13.6834 20.0976 13.2929 19.7071C12.9024 19.3166 12.9024 18.6834 13.2929 18.2929L18.5858 13L3 13C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11L18.5858 11L13.2929 5.70711C12.9024 5.31658 12.9024 4.68342 13.2929 4.29289Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 591 B