v 0.3 - Homepage
This commit is contained in:
Schenky
parent
8ed3de3349
commit
d5d5052dcd
File diff suppressed because it is too large
Load Diff
|
|
@ -31,6 +31,7 @@
|
|||
justify-content: center;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
max-width: var(--max-viewport-width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const Mlat = [lat - round, lat + round]
|
||||
const Mlng = [lng - round, lng + round]
|
||||
let Mlat = [lat - width, lat + width]
|
||||
let Mlng = [lng - width, lng + width]
|
||||
|
||||
$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<div class="discover">
|
||||
<h2>
|
||||
Dicoveries around
|
||||
</h2>
|
||||
|
||||
<button>
|
||||
Start your trips!
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.discover {
|
||||
background-color: #110042;
|
||||
color: white;
|
||||
|
||||
width: calc(100% - 48px);
|
||||
height: 124px;
|
||||
|
||||
border-radius: 32px;
|
||||
|
||||
margin: 0px auto 0px auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.discover > h2{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.discover > button{
|
||||
text-align: center;
|
||||
color: #110042;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding: 8px 55px 8px 55px;
|
||||
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.discover > button:hover, .discover > button:active{
|
||||
opacity: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
<div class="top">
|
||||
<button>
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z" fill="#4263EB"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1>
|
||||
Paris, Les Invalides
|
||||
</h1>
|
||||
</div>
|
||||
<button>
|
||||
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2319 37.3851H41.2728L52.2261 48.3901C53.2853 49.4492 53.2853 51.1801 52.2261 52.2392C51.1669 53.2984 49.4361 53.2984 48.3769 52.2392L37.3978 41.2601V39.2192L36.7003 38.4959C33.0836 41.5959 28.1494 43.1976 22.9053 42.3192C15.7236 41.1051 9.98861 35.1117 9.11027 27.8784C7.76694 16.9509 16.9636 7.75425 27.8911 9.09758C35.1244 9.97591 41.1178 15.7109 42.3319 22.8926C43.2103 28.1367 41.6086 33.0709 38.5086 36.6876L39.2319 37.3851ZM14.1478 25.7601C14.1478 32.1926 19.3403 37.3851 25.7728 37.3851C32.2053 37.3851 37.3978 32.1926 37.3978 25.7601C37.3978 19.3276 32.2053 14.1351 25.7728 14.1351C19.3403 14.1351 14.1478 19.3276 14.1478 25.7601Z" fill="#4263EB"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
button:hover, button:active{
|
||||
opacity: 70%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: calc(100% - 48px);
|
||||
height: 62px;
|
||||
|
||||
margin: 30px auto 20px auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top h1{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +1,271 @@
|
|||
<script>
|
||||
import Heading from '../lib/Components/Game/Heading.svelte'
|
||||
import Overlay from '../lib/Components/Overlay.svelte'
|
||||
import Section from '../lib/Components/Section.svelte'
|
||||
import Discover from '../lib/Components/index/Discover.svelte';
|
||||
import Top from '../lib/Components/index/Top.svelte';
|
||||
</script>
|
||||
|
||||
<Overlay img="/assets/images/main.jpg">
|
||||
<Heading>
|
||||
<span>Erant</span>
|
||||
</Heading>
|
||||
|
||||
<Section title="Spuštění hry">
|
||||
<p>Pro spuštění zážitku najděte QR kód.</p>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<p>Nechť dobrodružství započne.</p>
|
||||
</Section>
|
||||
</Overlay>
|
||||
<div class="content">
|
||||
<Top>
|
||||
|
||||
</Top>
|
||||
|
||||
<Discover>
|
||||
|
||||
</Discover>
|
||||
|
||||
<div class="line">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<h1>
|
||||
Feeling Adveturous?
|
||||
</h1>
|
||||
<div class="options">
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1380_1768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 0H19.9601V19.9498H0.000488281V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1380_1768)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z" fill="#AFB1B6"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z" fill="#AFB1B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z" fill="#AFB1B6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>
|
||||
Beach
|
||||
</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h1>
|
||||
Inspiration for your trip
|
||||
</h1>
|
||||
<div class="options">
|
||||
<button>
|
||||
<div class="image">
|
||||
|
||||
</div>
|
||||
<div class="info">
|
||||
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
|
||||
</button>
|
||||
|
||||
<button>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
|
||||
.footer {
|
||||
position: absolute;
|
||||
|
||||
background-color: white;
|
||||
width: calc(100%);
|
||||
height: 73px;
|
||||
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
border-top: 1px solid rgb(205, 205, 205);
|
||||
}
|
||||
.content {
|
||||
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line{
|
||||
width: calc(100% - 48px);
|
||||
height: 1px;
|
||||
background-color: #EFEFF0;
|
||||
margin: 20px auto 20px auto;
|
||||
}
|
||||
|
||||
.categories, .section{
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 0 20px auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.categories > h1, .section > h1{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.categories > .options{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
max-height: 100px;
|
||||
max-width: 100%;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.categories > .options::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.categories > .options > button{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #61646B;
|
||||
}
|
||||
|
||||
.categories > .options > button > h3{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.categories > .options > button > div{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: none;
|
||||
background-color: #EFEFF0;
|
||||
|
||||
border-radius: 200px;
|
||||
border: 2px solid #AFB1B6;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue