Pr/kuba #16
|
|
@ -0,0 +1,46 @@
|
||||||
|
<script>
|
||||||
|
import Category from "./Category.svelte"
|
||||||
|
import Headline from "./Headline.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="categories">
|
||||||
|
<Headline content="Feeling Adventurous?"></Headline>
|
||||||
|
<div class="options">
|
||||||
|
<Category text="Beach" imgLink="">
|
||||||
|
|
||||||
|
</Category>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.categories{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 0 0 20px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<script>
|
||||||
|
export let text = ""
|
||||||
|
export let imgLink = ""
|
||||||
|
</script>
|
||||||
|
<button>
|
||||||
|
<div>
|
||||||
|
{#if imgLink !== ""}
|
||||||
|
<img style="flex-grow: 1" src={imgLink}>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
{text}
|
||||||
|
</h3>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active, button:hover{
|
||||||
|
opacity: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
button > h3{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > div{
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
overflow: none;
|
||||||
|
background-color: #EFEFF0;
|
||||||
|
|
||||||
|
border-radius: 200px;
|
||||||
|
border: 2px solid #AFB1B6;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: stretch;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath 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='%23AFB1B6'/%3E%3C/g%3E%3Cpath 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='%23AFB1B6'/%3E%3Cpath 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='%23AFB1B6'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<script>
|
||||||
|
import CompartmentItem from "./Compartment_Item.svelte"
|
||||||
|
import Headline from "./Headline.svelte";
|
||||||
|
|
||||||
|
export let items = []
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<Headline content="Inspiration on your trip"></Headline>
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
{#each items as item }
|
||||||
|
<CompartmentItem price={item.price} location={item.location} name={item.name} image={item.image}></CompartmentItem>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 0 0 20px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.section > .options{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section > .options::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
<script>
|
||||||
|
export let price = "$0.00"
|
||||||
|
export let location = "Home"
|
||||||
|
export let name = "Kawa Ijen"
|
||||||
|
export let image = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button>
|
||||||
|
<div class="image">
|
||||||
|
{#if image !== ""}
|
||||||
|
<img style="flex-grow: 1;" src={image}>
|
||||||
|
{/if}
|
||||||
|
<div class="bookmark">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_1402_894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="12" height="15">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.33301H13.3592V15.2308H2V1.33301Z" fill="white"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1402_894)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.56133 2.33301C3.862 2.33301 3 2.98767 3 4.28034V14.0963C3 14.159 3.036 14.193 3.066 14.2103C3.096 14.229 3.14333 14.2423 3.198 14.2117L7.45267 11.825C7.60467 11.7403 7.79067 11.7397 7.94333 11.8257L12.1613 14.2083C12.2167 14.2403 12.264 14.2257 12.294 14.2077C12.324 14.1897 12.3593 14.1557 12.3593 14.093V4.40234C12.3593 3.89101 12.3593 2.33301 9.80067 2.33301H5.56133ZM3.13267 15.231C2.936 15.231 2.73933 15.1783 2.56067 15.073C2.20933 14.8683 2 14.5023 2 14.0963V4.28034C2 2.40701 3.298 1.33301 5.56133 1.33301H9.80067C12.062 1.33301 13.3593 2.45234 13.3593 4.40234V14.093C13.3593 14.4997 13.15 14.8657 12.798 15.0703C12.4473 15.2757 12.0247 15.2797 11.67 15.0797L7.69667 12.835L3.68667 15.0843C3.51333 15.1817 3.32333 15.231 3.13267 15.231Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price">
|
||||||
|
{price}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<h3>{name}</h3>
|
||||||
|
<div>
|
||||||
|
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.16667 4.66602C5.52333 4.66602 5 5.18935 5 5.83335C5 6.47668 5.52333 6.99935 6.16667 6.99935C6.81 6.99935 7.33333 6.47668 7.33333 5.83335C7.33333 5.18935 6.81 4.66602 6.16667 4.66602ZM6.16667 7.99935C4.972 7.99935 4 7.02802 4 5.83335C4 4.63802 4.972 3.66602 6.16667 3.66602C7.36133 3.66602 8.33333 4.63802 8.33333 5.83335C8.33333 7.02802 7.36133 7.99935 6.16667 7.99935Z" fill="#61646B"/>
|
||||||
|
<mask id="mask0_1402_1007" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="14">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.666504 0.333008H11.6662V13.333H0.666504V0.333008Z" fill="white"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1402_1007)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.16602 1.33301C3.68468 1.33301 1.66602 3.37101 1.66602 5.87501C1.66602 9.06101 5.41535 12.165 6.16602 12.3303C6.91668 12.1643 10.666 9.06034 10.666 5.87501C10.666 3.37101 8.64735 1.33301 6.16602 1.33301V1.33301ZM6.16602 13.333C4.97002 13.333 0.666016 9.63167 0.666016 5.87501C0.666016 2.81901 3.13335 0.333008 6.16602 0.333008C9.19868 0.333008 11.666 2.81901 11.666 5.87501C11.666 9.63167 7.36202 13.333 6.16602 13.333V13.333Z" fill="#61646B"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{location}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button{
|
||||||
|
padding: 8px 8px 12px 8px;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
border: 1px solid #EFEFF0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image{
|
||||||
|
width: 240px;
|
||||||
|
height: 152px;
|
||||||
|
|
||||||
|
/* background */
|
||||||
|
|
||||||
|
background-color: #EFEFF0;
|
||||||
|
/* subtle-light */
|
||||||
|
|
||||||
|
border: 2px solid #AFB1B6;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1402_2000' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1402_2000)'%3E%3Cpath 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='%2361646B'/%3E%3C/g%3E%3Cpath 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='%2361646B'/%3E%3Cpath 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='%2361646B'/%3E%3C/svg%3E%0A");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image > .bookmark{
|
||||||
|
position: absolute;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
right: 12px;
|
||||||
|
top: 12px;
|
||||||
|
background: #4263EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image > .price{
|
||||||
|
position: absolute;
|
||||||
|
padding: 4px 8px 4px 8px;
|
||||||
|
height: 28px;
|
||||||
|
left: 12px;
|
||||||
|
bottom: 12px;
|
||||||
|
background: #4263EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info{
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info > h3{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #19191B;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info > div{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/*min 370px*/
|
||||||
.discover {
|
.discover {
|
||||||
background-color: #110042;
|
background-color: #110042;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import FooterItem from "./Footer_Item.svelte";
|
||||||
|
|
||||||
|
export let items = [{"id": 0, "name":"Home", "active":true}, {"id": 0, "name":"Home", "active":true}, {"id": 0, "name":"Home", "active":true}, {"id": 0, "name":"Home", "active":true}, {"id": 0, "name":"Home", "active":true}]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
|
||||||
|
<FooterItem active={true} name={"Home"}>
|
||||||
|
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1571 24.2352V20.6679C11.1571 19.7573 11.9007 19.019 12.818 19.019H16.1712C16.6117 19.019 17.0342 19.1928 17.3457 19.502C17.6572 19.8112 17.8322 20.2306 17.8322 20.6679V24.2352C17.8294 24.6138 17.9789 24.9779 18.2476 25.2465C18.5163 25.5152 18.8819 25.6663 19.2633 25.6663H21.551C22.6194 25.6691 23.6451 25.2497 24.4015 24.5006C25.158 23.7516 25.5832 22.7345 25.5832 21.6738V11.511C25.5832 10.6542 25.2006 9.84149 24.5386 9.29179L16.7562 3.12152C15.4024 2.03966 13.4628 2.07459 12.1495 3.20448L4.54468 9.29179C3.85137 9.82529 3.43698 10.6404 3.4165 11.511V21.6634C3.4165 23.8742 5.22178 25.6663 7.44871 25.6663H9.68418C10.4763 25.6663 11.12 25.0319 11.1257 24.2456L11.1571 24.2352Z" fill="#4263EB" />
|
||||||
|
</svg>
|
||||||
|
</FooterItem>
|
||||||
|
|
||||||
|
<FooterItem active={false} name={"Home"}>
|
||||||
|
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1571 24.2352V20.6679C11.1571 19.7573 11.9007 19.019 12.818 19.019H16.1712C16.6117 19.019 17.0342 19.1928 17.3457 19.502C17.6572 19.8112 17.8322 20.2306 17.8322 20.6679V24.2352C17.8294 24.6138 17.9789 24.9779 18.2476 25.2465C18.5163 25.5152 18.8819 25.6663 19.2633 25.6663H21.551C22.6194 25.6691 23.6451 25.2497 24.4015 24.5006C25.158 23.7516 25.5832 22.7345 25.5832 21.6738V11.511C25.5832 10.6542 25.2006 9.84149 24.5386 9.29179L16.7562 3.12152C15.4024 2.03966 13.4628 2.07459 12.1495 3.20448L4.54468 9.29179C3.85137 9.82529 3.43698 10.6404 3.4165 11.511V21.6634C3.4165 23.8742 5.22178 25.6663 7.44871 25.6663H9.68418C10.4763 25.6663 11.12 25.0319 11.1257 24.2456L11.1571 24.2352Z" fill="#61646B" />
|
||||||
|
</svg>
|
||||||
|
</FooterItem>
|
||||||
|
|
||||||
|
<FooterItem active={false} name={"Home"}>
|
||||||
|
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1571 24.2352V20.6679C11.1571 19.7573 11.9007 19.019 12.818 19.019H16.1712C16.6117 19.019 17.0342 19.1928 17.3457 19.502C17.6572 19.8112 17.8322 20.2306 17.8322 20.6679V24.2352C17.8294 24.6138 17.9789 24.9779 18.2476 25.2465C18.5163 25.5152 18.8819 25.6663 19.2633 25.6663H21.551C22.6194 25.6691 23.6451 25.2497 24.4015 24.5006C25.158 23.7516 25.5832 22.7345 25.5832 21.6738V11.511C25.5832 10.6542 25.2006 9.84149 24.5386 9.29179L16.7562 3.12152C15.4024 2.03966 13.4628 2.07459 12.1495 3.20448L4.54468 9.29179C3.85137 9.82529 3.43698 10.6404 3.4165 11.511V21.6634C3.4165 23.8742 5.22178 25.6663 7.44871 25.6663H9.68418C10.4763 25.6663 11.12 25.0319 11.1257 24.2456L11.1571 24.2352Z" fill="#61646B" />
|
||||||
|
</svg>
|
||||||
|
</FooterItem>
|
||||||
|
|
||||||
|
<FooterItem active={false} name={"Home"}>
|
||||||
|
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1571 24.2352V20.6679C11.1571 19.7573 11.9007 19.019 12.818 19.019H16.1712C16.6117 19.019 17.0342 19.1928 17.3457 19.502C17.6572 19.8112 17.8322 20.2306 17.8322 20.6679V24.2352C17.8294 24.6138 17.9789 24.9779 18.2476 25.2465C18.5163 25.5152 18.8819 25.6663 19.2633 25.6663H21.551C22.6194 25.6691 23.6451 25.2497 24.4015 24.5006C25.158 23.7516 25.5832 22.7345 25.5832 21.6738V11.511C25.5832 10.6542 25.2006 9.84149 24.5386 9.29179L16.7562 3.12152C15.4024 2.03966 13.4628 2.07459 12.1495 3.20448L4.54468 9.29179C3.85137 9.82529 3.43698 10.6404 3.4165 11.511V21.6634C3.4165 23.8742 5.22178 25.6663 7.44871 25.6663H9.68418C10.4763 25.6663 11.12 25.0319 11.1257 24.2456L11.1571 24.2352Z" fill="#61646B" />
|
||||||
|
</svg>
|
||||||
|
</FooterItem>
|
||||||
|
|
||||||
|
<FooterItem active={false} name={"Home"}>
|
||||||
|
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1571 24.2352V20.6679C11.1571 19.7573 11.9007 19.019 12.818 19.019H16.1712C16.6117 19.019 17.0342 19.1928 17.3457 19.502C17.6572 19.8112 17.8322 20.2306 17.8322 20.6679V24.2352C17.8294 24.6138 17.9789 24.9779 18.2476 25.2465C18.5163 25.5152 18.8819 25.6663 19.2633 25.6663H21.551C22.6194 25.6691 23.6451 25.2497 24.4015 24.5006C25.158 23.7516 25.5832 22.7345 25.5832 21.6738V11.511C25.5832 10.6542 25.2006 9.84149 24.5386 9.29179L16.7562 3.12152C15.4024 2.03966 13.4628 2.07459 12.1495 3.20448L4.54468 9.29179C3.85137 9.82529 3.43698 10.6404 3.4165 11.511V21.6634C3.4165 23.8742 5.22178 25.6663 7.44871 25.6663H9.68418C10.4763 25.6663 11.12 25.0319 11.1257 24.2456L11.1571 24.2352Z" fill="#61646B" />
|
||||||
|
</svg>
|
||||||
|
</FooterItem>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
width: calc(100%);
|
||||||
|
|
||||||
|
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
border-top: 1px solid #EFEFF0;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding: 15px 10px 25px 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let active:boolean = false
|
||||||
|
export let name: string = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button>
|
||||||
|
<slot/>
|
||||||
|
{#if active}
|
||||||
|
<p class="active" style="color:#4263EB">{name}</p>
|
||||||
|
{:else}
|
||||||
|
<p>{name}</p>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
|
||||||
|
button{
|
||||||
|
height: 54px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > p{
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
export let content = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
{content}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,6 +7,9 @@
|
||||||
@import url("normalize.scss");
|
@import url("normalize.scss");
|
||||||
@import url("fonts.scss");
|
@import url("fonts.scss");
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,193 +1,56 @@
|
||||||
<script>
|
<script>
|
||||||
import Discover from '../lib/Components/index/Discover.svelte';
|
import Discover from '../lib/Components/index/Discover.svelte';
|
||||||
import Top from '../lib/Components/index/Top.svelte';
|
import Top from '../lib/Components/index/Top.svelte';
|
||||||
|
import Footer from '../lib/Components/index/Footer.svelte';
|
||||||
|
import Categories from '../lib/Components/index/Categories.svelte'
|
||||||
|
import Comparment from '../lib/Components/index/Comparment.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<Top>
|
<Top>
|
||||||
|
|
||||||
</Top>
|
</Top>
|
||||||
|
|
||||||
<Discover>
|
<Discover>
|
||||||
|
|
||||||
</Discover>
|
</Discover>
|
||||||
|
|
||||||
|
|
||||||
<div class="line">
|
<div class="line">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="categories">
|
<Categories>
|
||||||
<h1>
|
</Categories>
|
||||||
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>
|
<Comparment items={[{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown"}]}>
|
||||||
<div>
|
</Comparment>
|
||||||
<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>
|
||||||
<div class="info">
|
|
||||||
|
|
||||||
</div>
|
<Footer>
|
||||||
</button>
|
|
||||||
|
|
||||||
<button>
|
</Footer>
|
||||||
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<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 {
|
.content {
|
||||||
|
height: calc(100% - 94px);
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-bottom: 94px;
|
||||||
|
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line{
|
.line{
|
||||||
|
|
@ -196,76 +59,4 @@
|
||||||
background-color: #EFEFF0;
|
background-color: #EFEFF0;
|
||||||
margin: 20px auto 20px auto;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue