scroll smooth

This commit is contained in:
Zakhar 2026-05-21 13:32:08 +02:00
parent 6d9a8a8b33
commit ed30d0b5b7

View File

@ -12,7 +12,7 @@
<style>
html, body {height: 100vh;overflow: hidden;}
body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
#scroller {scroll-snap-type: y mandatory;overflow: scroll;height: 100vh;}
#scroller {scroll-snap-type: y mandatory;overflow: scroll;height: 100vh;scroll-behavior: smooth;}
.container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
.text_secondary {color:#6D8982;}
h1 {font-size: 254px;padding:0;margin:0;}
@ -62,10 +62,10 @@
.page_meal_plan_item img {width:54px;}
.page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
#page_how_it_works {}
#page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:80px;box-sizing: border-box;}
#page_how_it_works_content {text-align: center;}
#page_how_it_works_step {}
#page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;}
#page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;font-size:18px;}
#page_how_it_works_steps .step-image {width:80px;}
.page_how_it_works_steps_arrow {display: flex;justify-content: center;align-items: center;}
#page_how_it_works_step_1 {position: relative;}
@ -73,7 +73,7 @@
#page_how_it_works_step_2 {}
#page_how_it_works_step_2_arrow {height:30px;}
#page_how_it_works_step_3 {position: relative;align-items: end;display: flex;}
#page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;left:-30px;}
#page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;}
#page_how_it_works_info {background-color: #edfaae;width:100%;border-radius: 24px;position: relative;display: flex;flex-direction: row;box-sizing: border-box;height:320px;margin-top:60px;}
#page_how_it_works_info_image {position: relative;height:320px;margin-top:70px;}
@ -84,7 +84,7 @@
#page_how_it_works_info_content ul li {list-style-type: disc;padding-top:3px;padding-bottom:24px;}
#page_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
#page_footer {min-height: 136px;}
#page_footer {height: 136px;width: 100%;}
#page_footer > div {display: flex;align-items: center;justify-content: space-between;}
#page_footer a {color:#5EA12D;text-decoration: none;}
@ -176,7 +176,7 @@
</div>
<div class="page_meal_plan_item">
<div><img src="/images/personalization-icon.png" alt=""></div>
<div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
<div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
</div>
</div>
</div>
@ -204,12 +204,12 @@
</div>
<div id="page_how_it_works_step_2">
<img src="/images/laugh-icon.png" class="step-image" alt="">
<p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br>с новым списком покупок</p>
<p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br>с новым списком покупок</p>
</div>
<div class="page_how_it_works_steps_arrow"><img src="/images/arrow-2.png" alt="" id="page_how_it_works_step_2_arrow"></div>
<div id="page_how_it_works_step_3">
<img src="/images/broc_meal_plan.png" alt="">
<p>Из списка продуктов можно <br> сформировать автокорзину <br>на недостающие</p>
<p>Из списка продуктов можно <br> сформировать автокорзину <br>на недостающие</p>
</div>
</div>
<div id="page_how_it_works_info">
@ -227,9 +227,7 @@
</div>
</div>
</div>
</div>
</div>
<div id="page_footer">
<div id="page_footer">
<div class="container container_row">
<div>
<div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
@ -239,6 +237,8 @@
<a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>