Refactor hero section, update how-it-works cards, add Instagram invite + footer to all pages
This commit is contained in:
Estelle Köhler
parent
5ee62ff604
commit
221aa90649
40
assets/icon_eating-svgrepo-com.svg
Normal file
40
assets/icon_eating-svgrepo-com.svg
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 298.748 298.748" xml:space="preserve">
|
||||||
|
<g id="XMLID_1429_">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M89.486,99.966l5.118,2.999l10.451-6.427c1.463-0.9,2.999-1.573,4.57-2.038l-12.606-7.387
|
||||||
|
c-3.552-2.081-8.113-0.889-10.193,2.661C84.746,93.323,85.937,97.887,89.486,99.966z"/>
|
||||||
|
<path d="M194.008,187.239c5.392,0,9.764-4.372,9.764-9.764c0-5.393-4.372-9.764-9.764-9.764H99.344
|
||||||
|
c-5.393,0-9.764,4.372-9.764,9.764c0,5.393,4.372,9.764,9.764,9.764h39.885v46.522h-7.948c-4.113,0-7.447,3.334-7.447,7.447
|
||||||
|
c0,4.113,3.334,7.447,7.447,7.447h30.791c4.113,0,7.447-3.334,7.447-7.447c0-4.113-3.334-7.447-7.447-7.447h-7.949v-46.522
|
||||||
|
H194.008z"/>
|
||||||
|
<path d="M80.72,177.226c-1.169-3.279-3.799-5.825-7.112-6.888l-10.951-3.51l7.194-25.11l-18.93-16.393l30.517,14.102
|
||||||
|
c2.778,1.283,6.078,1.142,8.782-0.521l29.67-18.248c4.379-2.694,5.746-8.427,3.052-12.806c-2.694-4.379-8.427-5.746-12.806-3.052
|
||||||
|
l-25.418,15.634l-25.987-12.009l13.749,2.106c-1.581-1.776-3.658-3.147-6.112-3.851l-21.263-6.092
|
||||||
|
c-3.485-0.998-7.227-0.497-10.326,1.384c-3.099,1.881-5.271,4.97-5.993,8.522l-12.821,63.063
|
||||||
|
c-0.664,3.266,0.174,6.657,2.283,9.237c0.327,0.4,0.686,0.764,1.06,1.11H7.621c-0.541,0-1.067,0.061-1.576,0.17
|
||||||
|
C2.603,184.73,0,187.751,0,191.384v49.815c0,4.113,3.334,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-42.401H49.29v42.401
|
||||||
|
c0,4.113,3.334,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-43.818l15.626,43.848c2.072,5.815,8.466,8.843,14.272,6.772
|
||||||
|
c5.812-2.071,8.844-8.461,6.773-14.273L80.72,177.226z"/>
|
||||||
|
<circle cx="66.103" cy="76.449" r="19.243"/>
|
||||||
|
<circle cx="252.446" cy="69.335" r="19.243"/>
|
||||||
|
<path d="M291.129,183.905h-14.077c0.415-0.256,0.819-0.532,1.201-0.844c2.579-2.111,4.073-5.268,4.07-8.6l-0.054-64.353
|
||||||
|
c-0.006-7.573-6.471-13.548-14.029-12.947l-22.049,1.752c-7.156,0.569-12.498,6.831-11.929,13.988l0.922,11.603l1.781-0.025
|
||||||
|
l16.473-14.381l-15.502,24.067l-29.838,0.426c-5.14,0.073-9.248,4.3-9.175,9.441c0.073,5.095,4.226,9.176,9.305,9.176
|
||||||
|
c0.045,0,0.091,0,0.136-0.001l34.828-0.498c3.117-0.044,6.005-1.646,7.693-4.267l18.205-28.263l-10.052,33.515
|
||||||
|
c-1.559,5.197-6.287,8.576-11.439,8.655c-5.26,0.071-3.13,0.042-9.398,0.131l0.362,4.555l-12.661,3.092
|
||||||
|
c-3.652,0.892-6.611,3.561-7.872,7.102l-20.136,56.505c-2.072,5.812,0.961,12.201,6.773,14.273
|
||||||
|
c5.812,2.072,12.202-0.963,14.272-6.772l15.626-43.85v43.82c0,4.113,3.335,7.447,7.447,7.447c4.113,0,7.447-3.334,7.447-7.447
|
||||||
|
v-42.401h34.395v42.401c0,4.113,3.335,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-49.815
|
||||||
|
C298.748,187.265,295.406,183.905,291.129,183.905z"/>
|
||||||
|
<path d="M104.088,144.815c-0.057,0.25-0.09,0.502-0.09,0.757c0,4.239,6.881,7.896,16.812,9.586v1.397
|
||||||
|
c0,2.202,1.786,3.988,3.988,3.988h16.795c2.203,0,3.988-1.786,3.988-3.988v-1.396c9.931-1.69,16.812-5.346,16.812-9.586
|
||||||
|
c0-0.255-0.032-0.506-0.088-0.755c-0.11-0.487-0.933-0.854-1.915-0.854h-54.387C105.024,143.963,104.2,144.33,104.088,144.815z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
82
assets/icon_table-dinner-svgrepo-com.svg
Normal file
82
assets/icon_table-dinner-svgrepo-com.svg
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 298.096 298.096" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M187.592,218.502c-10.82-3.316-27.172-8.32-30.632-20.716c-1.292-4.612-1.276-37.344-0.944-59.436
|
||||||
|
c20.636-0.22,39.808-1.256,54.66-2.984c27.704-3.224,27.704-7.308,27.704-9.272l-0.044-0.472l0.044-11.252
|
||||||
|
c0-0.056,0-0.108,0-0.16v-0.008c0-1.964,0-6.048-27.704-9.272c-16.8-1.952-39.12-3.028-62.848-3.028
|
||||||
|
c-23.732,0-46.048,1.076-62.848,3.028c-27.708,3.224-27.708,7.308-27.708,9.272v11.892c0,1.964,0,6.048,27.708,9.272
|
||||||
|
c14.852,1.728,34.02,2.764,54.656,2.984c0.332,22.092,0.348,54.824-0.944,59.436c-3.46,12.392-19.808,17.4-30.628,20.712
|
||||||
|
c-7.596,2.328-11.78,3.608-11.78,6.912c-0.012,0.304-0.044,1.124,0.44,1.86c0.416,0.884,0.996,1.172,0.972,1.148
|
||||||
|
c4.692,3.48,29.272,5.068,50.128,5.068c20.852,0,45.432-1.584,49.956-4.952c0.764-0.456,1.584-1.516,1.584-3.112
|
||||||
|
C199.372,222.114,195.188,220.83,187.592,218.502z M147.828,105.906c50.612,0,82.344,4.776,86.308,8.272
|
||||||
|
c-0.08,0.076-0.156,0.152-0.26,0.228c-0.144,0.104-0.304,0.212-0.496,0.32c-0.22,0.124-0.484,0.244-0.764,0.368
|
||||||
|
c-0.244,0.108-0.5,0.216-0.792,0.324c-0.34,0.128-0.728,0.256-1.132,0.384c-0.344,0.108-0.688,0.22-1.076,0.328
|
||||||
|
c-0.46,0.128-0.972,0.26-1.492,0.388c-0.436,0.108-0.876,0.22-1.356,0.328c-0.576,0.132-1.212,0.26-1.852,0.392
|
||||||
|
c-0.528,0.108-1.048,0.216-1.616,0.32c-0.696,0.132-1.452,0.26-2.208,0.388c-0.616,0.104-1.22,0.208-1.876,0.312
|
||||||
|
c-0.8,0.128-1.664,0.248-2.52,0.372c-0.712,0.104-1.412,0.208-2.168,0.308c-0.908,0.12-1.884,0.24-2.848,0.356
|
||||||
|
c-0.796,0.096-1.572,0.196-2.408,0.288c-1.024,0.116-2.116,0.228-3.196,0.336c-0.876,0.092-1.728,0.184-2.64,0.268
|
||||||
|
c-1.128,0.108-2.324,0.208-3.508,0.312c-0.96,0.084-1.892,0.168-2.884,0.248c-1.236,0.096-2.54,0.188-3.832,0.28
|
||||||
|
c-1.032,0.072-2.032,0.148-3.096,0.216c-1.34,0.088-2.756,0.164-4.148,0.24c-1.104,0.064-2.18,0.128-3.32,0.188
|
||||||
|
c-1.46,0.072-2.992,0.136-4.508,0.2c-1.156,0.048-2.272,0.104-3.46,0.148c-1.676,0.064-3.432,0.112-5.172,0.16
|
||||||
|
c-1.1,0.032-2.16,0.072-3.28,0.1c-2.056,0.052-4.196,0.084-6.332,0.116c-0.88,0.012-1.724,0.036-2.62,0.048
|
||||||
|
c-3.072,0.036-6.216,0.056-9.444,0.056c-3.22,0-6.36-0.02-9.424-0.056c-1.172-0.016-2.28-0.044-3.428-0.06
|
||||||
|
c-1.84-0.032-3.704-0.056-5.484-0.1c-1.672-0.04-3.268-0.096-4.884-0.148c-1.156-0.036-2.344-0.068-3.472-0.108
|
||||||
|
c-2.264-0.084-4.448-0.18-6.6-0.284c-0.38-0.02-0.784-0.032-1.16-0.052c-30.476-1.516-49.04-4.868-51.904-7.492
|
||||||
|
C65.292,110.71,97.072,105.906,147.828,105.906z M61.276,118.61c0.148,0.072,0.344,0.14,0.504,0.208
|
||||||
|
c0.228,0.096,0.46,0.188,0.716,0.284c0.3,0.112,0.628,0.224,0.964,0.336c0.288,0.096,0.576,0.196,0.892,0.292
|
||||||
|
c0.364,0.112,0.772,0.228,1.176,0.34c0.164,0.044,0.304,0.092,0.472,0.136l-4.724,5.66V118.61z M63.196,127.118l5.252-6.3
|
||||||
|
c0.268,0.06,0.524,0.124,0.808,0.184c0.56,0.124,1.184,0.244,1.796,0.368c0.412,0.084,0.792,0.164,1.228,0.248l-5.536,6.636
|
||||||
|
C65.284,127.87,64.08,127.49,63.196,127.118z M69.2,128.846l5.66-6.78c0.392,0.064,0.756,0.132,1.164,0.196
|
||||||
|
c0.884,0.14,1.856,0.28,2.824,0.416l-5.784,6.932C71.66,129.358,70.364,129.102,69.2,128.846z M75.644,130.062l5.856-7.02
|
||||||
|
c1.124,0.148,2.248,0.292,3.484,0.436c0.192,0.024,0.404,0.04,0.596,0.064l-5.936,7.112
|
||||||
|
C78.244,130.458,76.888,130.262,75.644,130.062z M82.308,130.998l5.988-7.172c16.376,1.728,37.308,2.68,59.536,2.68
|
||||||
|
c23.728,0,46.048-1.076,62.848-3.032c1.688-0.196,3.268-0.396,4.756-0.6c0.516-0.072,0.964-0.144,1.46-0.212
|
||||||
|
c0.932-0.132,1.872-0.268,2.724-0.4c0.524-0.084,0.984-0.168,1.476-0.252c0.74-0.124,1.492-0.248,2.168-0.376
|
||||||
|
c0.484-0.092,0.916-0.18,1.372-0.272c0.6-0.12,1.208-0.24,1.756-0.36c0.44-0.096,0.832-0.192,1.24-0.288
|
||||||
|
c0.488-0.116,0.98-0.228,1.424-0.344c0.388-0.1,0.732-0.2,1.088-0.3c0.392-0.112,0.788-0.22,1.144-0.332
|
||||||
|
c0.332-0.104,0.632-0.204,0.932-0.308c0.316-0.108,0.632-0.216,0.916-0.324c0.272-0.104,0.52-0.204,0.764-0.304
|
||||||
|
c0.148-0.06,0.328-0.124,0.468-0.184l-0.028,7.28l0.004,0.036c-3,3.508-34.972,8.46-86.512,8.46
|
||||||
|
C119.56,134.402,97.24,132.906,82.308,130.998z M147.828,229.486c-24.224,0-42.432-1.936-47.24-4.024
|
||||||
|
c1.372-0.904,5.364-2.128,8.648-3.136c11.652-3.568,29.256-8.96,33.308-23.46c1.764-6.312,1.252-49.452,1.092-60.468h8.372
|
||||||
|
c-0.16,11.016-0.672,54.156,1.092,60.464c4.052,14.5,21.66,19.896,33.312,23.464c3.312,1.016,7.344,2.248,8.684,3.156
|
||||||
|
C191.08,227.462,172.596,229.486,147.828,229.486z"/>
|
||||||
|
<path d="M82.696,153.378H22.28c-0.696,0-1.36,0.14-1.964,0.396c-0.5-8.16-0.996-16.324-1.492-24.484
|
||||||
|
c0.292,0.052,0.564,0.172,0.872,0.172c0.076,0,0.152,0,0.228-0.004c2.788-0.128,4.952-2.496,4.828-5.284l-2.684-60.356
|
||||||
|
c-0.12-2.788-2.54-4.992-5.284-4.832c-2.788,0.128-4.952,2.496-4.828,5.284l0.004,0.132c-0.46-0.088-5.384,0.036-7.344,0
|
||||||
|
L0,64.346v174.592c0,0,7.552,0.192,10.252,0.18c4.652-0.024,4.94-3.596,5.036-4.804c0.788-9.676,1.032-31.124,1.192-45.32
|
||||||
|
c0.052-4.576,0.096-8.704,0.148-11.012h49.536c0.252,2.24,0.72,6.46,1.232,11.132c1.528,13.912,3.836,34.936,5.224,45.928
|
||||||
|
c0.144,1.144,1.16,3.396,2.96,3.668c1.38,0.208,2.72,0.172,4.004,0.14l3.344-0.024v-75.368c2.68-0.12,4.84-2.304,4.84-5.02
|
||||||
|
C87.756,155.65,85.484,153.378,82.696,153.378z M16.88,61.25c0.044,0,0.084,0,0.124,0c1.484,0,2.728,1.172,2.792,2.668
|
||||||
|
l2.684,60.356c0.072,1.54-1.124,2.844-2.664,2.916c-0.404,0.016-0.788-0.052-1.136-0.18c-0.468-7.72-4.468-62.84-4.468-62.84
|
||||||
|
C14.144,62.63,15.34,61.322,16.88,61.25z M78.916,234.862c-0.78,0.016-1.524,0.02-2.224-0.044
|
||||||
|
c-0.06-0.104-0.104-0.216-0.116-0.276c-1.384-10.964-3.688-31.968-5.216-45.864c-1.3-11.836-1.416-12.836-1.484-13.136
|
||||||
|
l-0.352-1.56H12.876c0,0-0.804,50.472-1.584,60.008c-0.048,0.588-0.124,0.848-0.1,0.892c-0.088,0.024-7.04,0-7.2,0.004V68.39
|
||||||
|
l0.54,0.008c2.052,0.04,4.092,0.076,6.128-0.012c0.236-0.008,0.392-0.004,0.468-0.016c0.024,0.116,0.056,0.312,0.072,0.616
|
||||||
|
c0.488,9.028,1.04,18.056,1.588,27.08l0.488,8.02c1.136,18.784,3.712,61.672,3.712,61.672h61.928V234.862z M82.696,161.234H22.28
|
||||||
|
c-0.564,0-1.06-0.208-1.5-0.5c-0.024-0.18-0.064-0.364-0.076-0.544c-0.08-1.28-0.156-2.56-0.232-3.836
|
||||||
|
c0.492-0.424,1.112-0.708,1.808-0.708h60.416c1.54,0,2.792,1.252,2.792,2.792S84.236,161.234,82.696,161.234z"/>
|
||||||
|
<path d="M293.476,64.402c-1.96,0.04-3.92,0.076-5.872-0.012c-0.556-0.02-1.02,0.068-1.48,0.16l0.012-0.28
|
||||||
|
c0.124-2.788-2.04-5.156-4.828-5.284c-2.916-0.168-5.16,2.044-5.284,4.832l-2.684,60.356c-0.124,2.788,2.04,5.156,4.828,5.284
|
||||||
|
c0.08,0.004,0.152,0.004,0.228,0.004c0.308,0,0.58-0.116,0.872-0.172c-0.496,8.16-0.988,16.324-1.492,24.484
|
||||||
|
c-0.604-0.256-1.268-0.396-1.964-0.396h-60.42c-2.788,0-5.06,2.272-5.06,5.064c0,2.712,2.156,4.896,4.84,5.02v75.364l3.344,0.024
|
||||||
|
c1.284,0.036,2.62,0.072,4.004-0.14c1.8-0.272,2.816-2.524,2.96-3.668c1.388-10.996,3.696-32.016,5.224-45.928
|
||||||
|
c0.516-4.696,0.98-8.932,1.228-11.132h49.54c0.052,2.308,0.096,6.44,0.148,11.012c0.16,14.192,0.404,35.644,1.192,45.316
|
||||||
|
c0.092,1.208,0.328,4.68,5.112,4.588c2.384-0.044,10.172,0.04,10.172,0.04V64.342L293.476,64.402z M278.396,127.194
|
||||||
|
c-0.04,0-0.084,0-0.124,0c-1.54-0.072-2.736-1.376-2.664-2.916l2.684-60.356c0.068-1.536,1.248-2.724,2.916-2.668
|
||||||
|
c1.54,0.072,2.736,1.376,2.664,2.916l-0.084,1.868c-0.488,0.7-3.912,53.244-4.384,60.96
|
||||||
|
C279.092,127.118,278.752,127.194,278.396,127.194z M215.392,161.234c-1.54,0-2.792-1.252-2.792-2.792
|
||||||
|
c0-1.54,1.252-2.792,2.792-2.792h60.416c0.696,0,1.316,0.28,1.808,0.708c-0.08,1.276-0.156,2.556-0.232,3.832
|
||||||
|
c-0.012,0.18-0.052,0.368-0.076,0.548c-0.44,0.288-0.936,0.496-1.496,0.496H215.392z M294.096,234.886
|
||||||
|
c-0.16-0.004-6.736,0.032-6.844,0.032c-0.164,0-0.264-0.004-0.296,0.004c-0.04-0.104-0.112-0.364-0.16-0.936
|
||||||
|
c-0.776-9.536-1.016-30.904-1.176-45.04c-0.088-7.956-0.144-14.968-0.144-14.968h-56.912l-0.352,1.56
|
||||||
|
c-0.072,0.3-0.184,1.3-1.484,13.136c-1.528,13.9-3.832,34.904-5.212,45.848c-0.016,0.072-0.064,0.184-0.12,0.292
|
||||||
|
c-0.7,0.068-1.44,0.06-2.224,0.044v-69.1h62.288c0,0,2.212-42.888,3.352-61.672l0.488-8.02c0.552-9.024,1.1-18.052,1.588-27.08
|
||||||
|
c0.02-0.312,0.048-0.504,0.04-0.592c0.1-0.008,7.168,0,7.168,0V234.886z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.1 KiB |
@ -48,15 +48,18 @@
|
|||||||
.hero {
|
.hero {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 50px;
|
gap: 55px;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 88px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 40px 0;
|
padding: 44px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__left .badge {
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__left h1 {
|
.hero__left h1 {
|
||||||
white-space: nowrap;
|
font-size: 2.64rem;
|
||||||
font-size: 2.4rem;
|
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,6 +68,12 @@
|
|||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero__buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-3);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.hero__right {
|
.hero__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -73,15 +82,15 @@
|
|||||||
|
|
||||||
.image-card {
|
.image-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 396px;
|
max-width: 436px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 396px;
|
max-width: 436px;
|
||||||
max-height: 464px;
|
max-height: 510px;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@ -131,7 +140,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 12px;
|
||||||
padding: 28px 20px;
|
padding: 28px 20px;
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
border-radius: 28px;
|
border-radius: 28px;
|
||||||
@ -154,6 +163,12 @@
|
|||||||
color: var(--brown);
|
color: var(--brown);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.how-step__icon {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: var(--brown);
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.how-step__png {
|
.how-step__png {
|
||||||
width: 192px;
|
width: 192px;
|
||||||
height: 192px;
|
height: 192px;
|
||||||
@ -166,9 +181,9 @@
|
|||||||
|
|
||||||
.how-step__label {
|
.how-step__label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -182,6 +197,28 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.how-step__footer-pill {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-step__footer-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-step__footer-banner {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
background: var(--butter);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Bagel Fat One', sans-serif;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.12rem;
|
||||||
|
color: var(--brown);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.how-it-works__steps {
|
.how-it-works__steps {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@ -172,6 +172,22 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Badge */
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background-color: var(--olive-light);
|
||||||
|
color: var(--olive-dark);
|
||||||
|
font-family: 'Jost', sans-serif;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -184,12 +200,24 @@ p {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: var(--butter-light);
|
color: var(--butter-light);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
background-color: var(--olive-dark);
|
background-color: var(--olive-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button--outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--olive);
|
||||||
|
border: 2px solid var(--olive);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--outline:hover {
|
||||||
|
background-color: var(--olive-light);
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.button-small {
|
.button-small {
|
||||||
background: var(--olive);
|
background: var(--olive);
|
||||||
@ -254,6 +282,51 @@ p {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Card Footer */
|
||||||
|
.card-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: var(--space-3);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text Muted */
|
||||||
|
.text-muted {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Instagram Invite */
|
||||||
|
.instagram-invite {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: var(--space-7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-invite__link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-invite__icon {
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 8px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-invite__logo {
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -86,6 +86,12 @@
|
|||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
@ -408,6 +408,12 @@
|
|||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
@ -35,6 +35,12 @@
|
|||||||
|
|
||||||
<!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox -->
|
<!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox -->
|
||||||
<script src="js/event_detail.js"></script>
|
<script src="js/event_detail.js"></script>
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
@ -66,6 +66,12 @@
|
|||||||
|
|
||||||
<!-- Page logic: data loading, filtering and card rendering -->
|
<!-- Page logic: data loading, filtering and card rendering -->
|
||||||
<script src="js/event_overview.js"></script>
|
<script src="js/event_overview.js"></script>
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
@ -60,6 +60,12 @@
|
|||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
52
index.html
52
index.html
@ -9,6 +9,8 @@
|
|||||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||||
<!-- Stylesheet für diese Seite-->
|
<!-- Stylesheet für diese Seite-->
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<link rel="stylesheet" href="css/index.css">
|
||||||
|
<!-- Font Awesome Icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
<script src="js/navigation.js" defer></script>
|
<script src="js/navigation.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -17,11 +19,10 @@
|
|||||||
<header class="top-nav-wrap">
|
<header class="top-nav-wrap">
|
||||||
<div class="top-nav">
|
<div class="top-nav">
|
||||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||||
<img src="assets/logo_invite.svg" alt="Invite Logo">
|
<img src="assets/logo_invite.svg" alt="Invité">
|
||||||
</a>
|
</a>
|
||||||
<nav class="nav-tab-links" aria-label="Hauptnavigation">
|
<nav class="nav-tab-links" aria-label="Hauptnavigation">
|
||||||
<a class="button-small auth-nav-button auth-nav-button--default" href="login.html" aria-label="Login">Login</a>
|
<a class="button-small" href="login.html" aria-label="Login">Login</a>
|
||||||
<a class="button-small auth-nav-button auth-nav-button--default" href="signup.html" aria-label="Signup">Signup</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -30,9 +31,10 @@
|
|||||||
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="hero__left">
|
<div class="hero__left">
|
||||||
<h1>Dein Platz am Tisch wartet schon.</h1>
|
<span class="badge">Einfach. Lecker. Gemeinsam.</span>
|
||||||
<p>Egal, ob du leidenschaftlich gerne den Kochlöffel schwingst oder dich einfach auf ein hausgemachtes Essen in guter Gesellschaft freust: Bei Invité bringst du Menschen zusammen. Finde Events, die zu deinem Geschmack passen, und geniesse unkomplizierte Begegnungen ohne Networking-Zwang.</p>
|
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
|
||||||
<a class="btn" href="login.html">Anmelden</a>
|
<p>Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.</p>
|
||||||
|
<a class="button" href="signup.html">Anmelden</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hero__right">
|
<div class="hero__right">
|
||||||
@ -49,18 +51,36 @@
|
|||||||
<div class="how-it-works__steps">
|
<div class="how-it-works__steps">
|
||||||
<article class="how-step how-step--numbered">
|
<article class="how-step how-step--numbered">
|
||||||
<span class="how-step__corner-number how-step__corner-number--brown">1</span>
|
<span class="how-step__corner-number how-step__corner-number--brown">1</span>
|
||||||
<img src="assets/icon_register.png" alt="Register" class="how-step__png how-step__png--brown" />
|
<i class="fa-solid fa-id-card how-step__icon"></i>
|
||||||
<p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
|
<p class="how-step__label how-step__label--brown how-step__label--big">Anmelden & Dabeisein</p>
|
||||||
|
<p class="how-step__label">Erstelle kurz dein Profil und zeig uns deinen Geschmack. Bei uns zählt der Mensch am Tisch, nicht der Lebenslauf.</p>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="how-step__footer-banner">
|
||||||
|
<span>QUICK SETUP · 2 MIN</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="how-step how-step--numbered">
|
<article class="how-step how-step--numbered">
|
||||||
<span class="how-step__corner-number how-step__corner-number--brown">2</span>
|
<span class="how-step__corner-number how-step__corner-number--brown">2</span>
|
||||||
<img src="assets/icon_add-event.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
|
<i class="fa-solid fa-magnifying-glass-location how-step__icon"></i>
|
||||||
<p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
|
<p class="how-step__label how-step__label--brown how-step__label--big">Tisch finden oder decken</p>
|
||||||
|
<p class="how-step__label">Entdecke spontane Events in deiner Nähe oder öffne deine eigene Küche. Du entscheidest, ob du Gast oder Gastgeber bist</p>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="how-step__footer-banner">
|
||||||
|
<span>GASTGEBER · GAST</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="how-step how-step--numbered">
|
<article class="how-step how-step--numbered">
|
||||||
<span class="how-step__corner-number how-step__corner-number--brown">3</span>
|
<span class="how-step__corner-number how-step__corner-number--brown">3</span>
|
||||||
<img src="assets/icon_Plate.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
|
<i class="fa-solid fa-utensils how-step__icon"></i>
|
||||||
<p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
|
<p class="how-step__label how-step__label--brown how-step__label--big">Teile den Tisch</p>
|
||||||
|
<p class="how-step__label">Triff neue Leute in entspannter Atmosphäre. Geniesse gutes Essen in Gesellschaft und mach aus einer Mahlzeit eine echte Begegnung.</p>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="how-step__footer-banner">
|
||||||
|
<span>GEMEINSAM GENIESSEN</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -119,10 +139,10 @@
|
|||||||
<div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
|
<div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
|
||||||
|
|
||||||
|
|
||||||
<div class="gallery__info">
|
<div class="instagram-invite">
|
||||||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="gallery__handle" style="display: flex; align-items: center; gap: 16px; text-decoration: none;">
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
<img src="assets/Icon_instagram.png" alt="Instagram" class="gallery__icon--instagram" />
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
<img src="assets/logo_invite.svg" alt="Invité Logo" class="gallery__icon--invite" />
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -29,6 +29,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
function buildLoggedOutNavigation() {
|
function buildLoggedOutNavigation() {
|
||||||
const loginIsActive = currentPage === 'login.html';
|
const loginIsActive = currentPage === 'login.html';
|
||||||
const signupIsActive = currentPage === 'signup.html';
|
const signupIsActive = currentPage === 'signup.html';
|
||||||
|
const isIndex = currentPage === 'index.html' || currentPage === '';
|
||||||
|
|
||||||
|
// Auf der Startseite nur Login anzeigen.
|
||||||
|
if (isIndex) {
|
||||||
|
return `
|
||||||
|
<a
|
||||||
|
class="button-small"
|
||||||
|
href="login.html"
|
||||||
|
aria-label="Login"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<a
|
<a
|
||||||
@ -47,7 +61,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
>
|
>
|
||||||
Signup
|
Signup
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Baut die Navigation fuer eingeloggte Benutzer.
|
// Baut die Navigation fuer eingeloggte Benutzer.
|
||||||
|
|||||||
@ -60,6 +60,12 @@
|
|||||||
</div> <!-- Schliesst main-content -->
|
</div> <!-- Schliesst main-content -->
|
||||||
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
||||||
<script src="js/login.js"></script>
|
<script src="js/login.js"></script>
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
@ -92,6 +92,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="js/signup.js"></script>
|
<script src="js/signup.js"></script>
|
||||||
|
<div class="instagram-invite">
|
||||||
|
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||||||
|
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite__icon" />
|
||||||
|
<img src="assets/logo_invite.svg" alt="Invité Logo" class="instagram-invite__logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<a href="impressum.html" class="footer__link">Impressum</a>
|
<a href="impressum.html" class="footer__link">Impressum</a>
|
||||||
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
<a href="datenschutz.html" class="footer__link">Datenschutz</a>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user