za-ek/marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptive

Browse Source
This commit is contained in:
Zakhar 2026-06-02 22:42:03 +03:00
parent ed30d0b5b7
commit 94e0cf67ff
2 changed files with 85 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
index.html
View File

@ -12,7 +12,7 @@
<style> <style>
html, body {height: 100vh;overflow: hidden;} 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;} 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;scroll-behavior: smooth;} #scroller {scroll-snap-type: y mandatory;overflow-y: scroll;overflow-x:hidden;height: 100vh;scroll-behavior: smooth;}
.container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;} .container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
.text_secondary {color:#6D8982;} .text_secondary {color:#6D8982;}
h1 {font-size: 254px;padding:0;margin:0;} h1 {font-size: 254px;padding:0;margin:0;}
@ -24,7 +24,7 @@
#top_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;} #top_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#top_logo img {width: 24px;} #top_logo img {width: 24px;}
#top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;} #top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;min-width: 420px;}
#top_line {position:relative;display: flex;flex-direction: row;justify-content: space-around;padding:18px 0;height:80px;box-sizing: border-box; border-bottom: 1px solid #e7ede7;} #top_line {position:relative;display: flex;flex-direction: row;justify-content: space-around;padding:18px 0;height:80px;box-sizing: border-box; border-bottom: 1px solid #e7ede7;}
#top_menu {display:flex;flex-direction:row;gap: 40px;margin-top:13px;height:18px;align-items: center;} #top_menu {display:flex;flex-direction:row;gap: 40px;margin-top:13px;height:18px;align-items: center;}
#top_menu a {color: #6D8982;font-size:14px;font-weight: 500;line-height: 17px;text-decoration: none;} #top_menu a {color: #6D8982;font-size:14px;font-weight: 500;line-height: 17px;text-decoration: none;}
@ -33,7 +33,7 @@
#try_button {background-color: #FFBA00;padding:13px 43px;font-weight: bold;border-radius: 100px;color:#0C3B2E;text-decoration: none; #try_button {background-color: #FFBA00;padding:13px 43px;font-weight: bold;border-radius: 100px;color:#0C3B2E;text-decoration: none;
display: flex;} display: flex;}
.page_container {width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;} .page_container {width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 420px;padding-top: 39px;}
#page_index {} #page_index {}
#page_index_content {align-items: start;} #page_index_content {align-items: start;}
#page_index p {font-size: 18px;} #page_index p {font-size: 18px;}
@ -46,15 +46,15 @@
#page_autobasket {} #page_autobasket {}
#page_autobasket_content {display: flex;flex-direction: column;gap: 64px;} #page_autobasket_content {display: flex;flex-direction: column;gap: 64px;}
#page_autobasket_content_description {text-align: center;} #page_autobasket_content_description {text-align: center;}
#page_autobasket_content_description p {font-size: 24px;} #page_autobasket_content_description p {font-size: 24px;color: #0C3B2E;}
#page_autobasket_images {display: flex;flex-direction: row;gap: 20px;justify-content: center;} #page_autobasket_images {display: flex;flex-direction: row;gap: 20px;justify-content: center;}
#page_autobasket_images div {display: flex;flex-direction: column; gap: 16px;max-width: 387px;text-align: center} #page_autobasket_images div {display: flex;flex-direction: column; gap: 16px;max-width: 387px;text-align: center;align-items: center;}
#page_autobasket_images img {max-width: 100%;} #page_autobasket_images img {max-width: 100%;}
#page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;} #page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;}
#page_meal_plan {} #page_meal_plan {}
#page_meal_plan_content {display: flex;flex-direction: row;gap:20px;padding:0 120px;justify-content: space-around;} #page_meal_plan_content {display: flex;flex-direction: row;gap:20px;padding:0 120px;justify-content: space-around;}
#page_meal_plan_content_description {display: flex;flex-direction: column;gap:40px;} #page_meal_plan_content_description {display: flex;flex-direction: column;gap:40px;min-width: 400px;}
#page_meal_plan_broc {max-width:529px;} #page_meal_plan_broc {max-width:529px;}
#page_meal_plan_items {gap: 24px;display: flex;flex-direction: column;} #page_meal_plan_items {gap: 24px;display: flex;flex-direction: column;}
.page_meal_plan_item {display: flex;flex-direction: row;gap: 16px;max-width: 650px;} .page_meal_plan_item {display: flex;flex-direction: row;gap: 16px;max-width: 650px;}
@ -62,7 +62,7 @@
.page_meal_plan_item img {width:54px;} .page_meal_plan_item img {width:54px;}
.page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;} .page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
#page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:80px;box-sizing: border-box;} #page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:110px;box-sizing: border-box;}
#page_how_it_works_content {text-align: center;} #page_how_it_works_content {text-align: center;}
#page_how_it_works_step {} #page_how_it_works_step {}
#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 {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;font-size:18px;}
@ -84,12 +84,86 @@
#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 {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_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
#page_footer {height: 136px;width: 100%;} #page_footer {height: 136px;width: 100%;padding-top:15px;}
#page_footer > div {display: flex;align-items: center;justify-content: space-between;} #page_footer > div {display: flex;align-items: center;justify-content: space-between;}
#page_footer a {color:#5EA12D;text-decoration: none;} #page_footer a {color:#5EA12D;text-decoration: none;}
#bottom_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;} #bottom_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#bottom_logo img {width: 24px;} #bottom_logo img {width: 24px;}
@media (max-width: 1360px){
#page_how_it_works_steps {padding: 0 20px;}
#page_footer {padding-bottom: 80px;}
}
@media (max-width: 1280px){
.big_index_greeting {font-size: 204px;line-height: 185px;}
p.description_large {font-size: 22px;}
.page_container {padding-top:0;}
}
@media (max-width: 1100px){
.big_index_greeting {font-size: 174px;line-height: 155px;}
p.description_large {font-size: 18px;}
#page_autobasket_images {max-width: 100%;padding: 0 20px;}
#page_autobasket_images > div {max-width: 33%;}
#page_autobasket_images div img {max-width: 100% !important;}
#page_how_it_works_info_content {font-size: 20px;}
}
@media (max-width: 960px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 14px;}
#top_line {justify-content: space-between;padding: 18px;}
#top_menu {display: none;}
p.description_large br {display: none;}
#page_autobasket_content_description p {font-size: 20px;}
.page_container {min-height: auto;padding-top:100px;}
#page_meal_plan_content {padding-left: 20px;}
#page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;}
#page_how_it_works_steps > div {display: flex;flex-direction: row;gap: 20px;}
#page_how_it_works_steps > div img {height: auto;max-width: 80px;max-height: 80px;}
#page_how_it_works_steps > div:nth-child(3) {flex-direction: row-reverse;}
.page_how_it_works_steps_arrow {display: none !important;}
#page_how_it_works_step_3 img {top:0;position: relative;width: 120px;}
#page_how_it_works_info_content br {display: none;}
}
@media (max-width: 800px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
p.description_large {font-size: 20px;}
#page_autobasket_content_description p {font-size: 16px;}
#page_meal_plan_broc {display: none;}
#page_how_it_works_info_content {margin-left: 280px;color:#0C3B2E;}
#page_how_it_works_info_image img {max-width: 360px;}
#page_footer {padding-left: 40px;padding-right: 20px;}
}
@media (max-width: 600px){
.big_index_greeting {font-size: 104px;line-height: 105px;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
#page_autobasket_content_description p {font-size: 22px;padding: 0 15px;}
#page_autobasket_content_description p br {display: none;}
#page_autobasket_images {flex-direction: column;}
#page_autobasket_images div {max-width: 100% !important;}
#page_autobasket_images > div {flex-direction: row;}
#page_autobasket_images div img {max-width: 50% !important;}
#page_how_it_works_info_image img {max-width: 220px;}
#page_how_it_works_info_content {margin-left: 100px;color:#0C3B2E;}
}
@media (max-height: 1000px){
#page_autobasket_content {gap: 20px;}
#page_autobasket_images div img {max-width: 300px;}
}
@media (max-height: 800px),
(max-width: 1000px)
{
#scroller {scroll-snap-type: initial;scroll-behavior: initial;}
}
</style> </style>
</head> </head>
<body> <body>

3
package.json
View File

@ -1,4 +1,7 @@
{ {
"scripts": {
"start": "./node_modules/http-server/bin/http-server -p 9876 ."
},
"dependencies": { "dependencies": {
"http-server": "^14.1.1" "http-server": "^14.1.1"
}, },