we ae going to redesing dexar. here are css from the figma. i will try to explain all. pls do responsive and better! thank you you are free to do changes better and responsive ofc!! Header:
Главная
О нас
Контакты
Искать...
RU
.frame { width: 1440px; height: 84px; display: flex; background-color: #74787b1a; } .frame .group { margin-top: 18px; width: 148px; height: 48px; position: relative; margin-left: 56px; } .frame .div { display: inline-flex; margin-top: 18px; width: 569px; height: 49px; position: relative; margin-left: 57px; align-items: flex-start; } .frame .div-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 48px; position: relative; flex: 0 0 auto; background-color: #497671; border-radius: 13px 0px 0px 13px; border: 1px solid; border-color: #d3dad9; box-shadow: 0px 3px 4px #00000026; } .frame .text-wrapper { position: relative; width: fit-content; margin-top: -1.00px; font-family: "DM Sans-SemiBold", Helvetica; font-weight: 600; color: #ffffff; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; } .frame .div-wrapper-2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 63px; position: relative; flex: 0 0 auto; background-color: #a1b4b5; border: 1px solid; border-color: #d3dad9; box-shadow: 0px 3px 4px #00000026; } .frame .div-wrapper-3 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 42px; position: relative; flex: 0 0 auto; background-color: #ffffffbd; border-radius: 0px 13px 13px 0px; border: 1px solid; border-color: #d3dad9; box-shadow: 0px 3px 4px #00000026; } .frame .text-wrapper-2 { color: #1e3c38; position: relative; width: fit-content; margin-top: -1.00px; font-family: "DM Sans-SemiBold", Helvetica; font-weight: 600; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; } .frame .frame-wrapper { margin-top: 18px; width: 234px; height: 49px; position: relative; margin-left: 126px; background-color: #ffffffbd; border-radius: 22px; border: 1px solid; border-color: #d2dad9; box-shadow: 0px 3px 4px #00000026; } .frame .div-2 { display: inline-flex; align-items: center; gap: 27px; padding: 0px 20px; position: relative; top: 10px; left: 50px; } .frame .text-wrapper-3 { color: #828e8d; position: relative; width: fit-content; margin-top: -1.00px; font-family: "DM Sans-SemiBold", Helvetica; font-weight: 600; font-size: 22px; text-align: center; letter-spacing: 0; line-height: normal; } .frame .icn { position: absolute; top: 1px; left: -32px; width: 28px; height: 28px; } .frame .korzina-frame { margin-top: 26px; width: 48px; height: 32px; position: relative; margin-left: 57px; background-color: #ffffff4c; border-radius: 12px; border: 1px solid; border-color: #667a77; } .frame .cart { position: absolute; top: calc(50.00% - 13px); left: calc(50.00% - 14px); width: 27px; height: 27px; } .frame .RU-frame { display: flex; margin-top: 26px; width: 67px; height: 32px; position: relative; margin-left: 4px; align-items: center; gap: 8px; padding: 6px; background-color: #ffffff4c; border-radius: 12px; border: 1px solid; border-color: #667a77; } .frame .text-wrapper-4 { position: relative; width: fit-content; margin-top: -6.50px; margin-bottom: -4.50px; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #1e3c38; font-size: 24px; letter-spacing: 0; line-height: normal; } .frame .group-2 { position: relative; width: 9.29px; height: 14px; transform: rotate(90.00deg); } .frame .line { top: -2px; position: absolute; left: 1px; width: 9px; height: 10px; transform: rotate(-90.00deg); } .frame .img { top: 6px; position: absolute; left: 1px; width: 9px; height: 10px; transform: rotate(-90.00deg); } .frame .login-frame { margin-top: 26px; width: 48px; height: 32px; position: relative; margin-left: 4px; background-color: #ffffff4c; border-radius: 12px; border: 1px solid; border-color: #667a77; } .frame .icon { position: absolute; top: calc(50.00% - 12px); left: calc(50.00% - 12px); width: 24px; height: 24px; } 1. background: rgba(117, 121, 124, 0.1); padding: 14px 0px; width: 1440px; height: 84px; 2. logo stays the 3. after logo 3 btns in same div and without gap 3.1 "главная" border: 1px solid #d3dad9; border-radius: 13px 0 0 13px; padding: 10px 48px; width: 187px; height: 49px; 3.2 "о нас"border: 1px solid #d3dad9; padding: 10px 63px; width: 188px; height: 49px; 3.3 "котакты"border: 1px solid #d3dad9; border-radius: 0 13px 13px 0; padding: 10px 42px; width: 194px; height: 49px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.74); hover: background: #a1b4b5; active : background: #497671; 4. next search btn with place holder "искать..." and on the left fixed svg icon " " border: 1px solid #d3dad9; border-radius: 22px; padding: 6px 10px; width: 234px; height: 49px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.74); 5. after 3 buttons to the right 5.1 cart btn border-radius: 12px; fill: rgba(255, 255, 255, 0.3); border: 1px solid #677b78; 5.2 lang selector btn style border: 1px solid #677b78; border-radius: 12px; padding: 6px; width: 67px; height: 32px; HERO we are goung to have a width wide hero, photos for dekstop and mobile you can see in the same folder on it text. here are codes from figma
Здесь ты найдёшь всё

Тысячи товаров в одном месте

просто и удобно
.frame { display: flex; flex-direction: column; width: 639px; align-items: flex-start; gap: 18px; position: relative; } .frame .text-wrapper { position: relative; width: 659px; margin-top: -1.00px; margin-right: -20.00px; font-size: 57px; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #1e3c38; letter-spacing: 0; line-height: normal; } .frame .div { position: absolute; top: 87px; left: 0; width: 581px; font-size: 34px; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #1e3c38; letter-spacing: 0; line-height: normal; } .frame .text-wrapper-2 { position: absolute; top: 133px; left: 0; width: 281px; font-size: 34px; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #1e3c38; letter-spacing: 0; line-height: normal; } under the text we have btns.. hovers and actives for all web site are the same as from header first
Перейти в каталог
.pereyti-v-katalog { width: 337px; height: 60px; display: flex; border-radius: 13px; border: 1px solid; border-color: #d3dad9; background: linear-gradient( 360deg, rgba(73, 118, 113, 1) 0%, rgba(167, 206, 202, 1) 100% ); } .pereyti-v-katalog .text-wrapper { margin-top: 12px; width: 269px; height: 36px; margin-left: 34px; position: relative; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 27px; text-align: center; letter-spacing: 1.08px; line-height: normal; } second btn
Найти товар
.frame { width: 264px; height: 60px; display: flex; gap: 9.2px; background-color: #f5f5f5; border-radius: 13px; border: 1px solid; border-color: #d3dad9; } .frame .text-wrapper { margin-top: 12px; width: 181px; height: 36px; position: relative; margin-left: 36px; font-family: "DM Sans-Medium", Helvetica; font-weight: 500; color: #1e3c38; font-size: 27px; text-align: center; letter-spacing: 1.08px; line-height: normal; } .frame .group { margin-top: 22.0px; width: 10.62px; height: 16px; position: relative; } .frame .line { top: -1px; width: 12px; position: absolute; left: 1px; height: 10px; } .frame .img { top: 7px; width: 11px; position: absolute; left: 1px; height: 10px; }