Dostosowanie strony HTML do urządzeń mobilnych

Trzeba zrealizować stronę na podstawie projektu w Figma https://www.figma.com/design/ctUULCDdE4pCsqxnJjsVb3/7453_Zagorye_03?node-id=1-114&t=m0mzTt1D7SzLA4eq-0

Na podstawie już istniejącego szablonu projektu strony internetowej wykonać szereg dla frameworka Laravel. Makieta projektu została stworzona w Figma. Bardziej szczegółowo opiszę już w wiadomościach prywatnych.

Jest lejek sprzedażowy dla sklepu internetowego, który chcemy powtórzyć u siebie Wygląda on tak Główna strona (produkt, który jest główny w sprzedaży, na przykład koszula) Potem strona checkout (gdzie osoba wprowadza swoje dane i wybiera, ile na przykład koszul chce kupić) Następnie przechodzi dalej w lejek i oferowane są dodatkowe sprzedaże 1 (skarpetki) + potem dodatkowa sprzedaż 2 (majtki) i na końcu strona dziękuję Jak to powinno działać w kwestii przejść między stronami i logiki, możesz zobaczyć tutaj (trzeba dojść do końca do strony dziękuję) https://3plus3.heroman.com.ua/standard/ Mamy przykłady stron, które chcemy zrobić u siebie To znaczy, dla nas w zasadzie skopiujemy design - zrealizujemy - wypełnimy pod nasz produkt Strony z dodatkowymi sprzedażami będą takie same pod względem designu i struktury jak na stronie, którą wysłałem powyżej (majtki) Nie musisz wypełniać stron informacjami, tylko zebrać szkielet - aby zgłoszenie przychodziło poprawnie Nie trzeba też wymyślać struktury stron Od Ciebie w zasadzie Skopiować i zrealizować Ustawić, aby technicznie działało poprawnie Pokazać, jak z tym pracować, abyśmy mogli to robić sami Są 2 konstruktorzy stron, które mamy na myśli, z jednym intensywnie pracujemy teraz i trzeba zrozumieć, czy można na nim coś takiego rozwinąć (ale czytałem w GPT, że można)

Zadanie Trzeba stworzyć stylowy, responsywny szablon e-mailowy na podstawie dostarczonego tekstu i przygotować go do załadowania do usługi e-mail marketingowej. Co należy zrobić Opracować projekt e-maila. Stworzyć responsywny HTML e-mail. Wstawić dostarczony tekst. Przygotować bloki na obrazy i ikony. Dodaj przyciski CTA. Przygotować linki z znacznikami UTM. Stworzyć wersję tekstową wiadomości. Sprawdzić wyświetlanie w głównych klientach e-mailowych. Przygotować finalny plik do załadowania do usługi wysyłkowej. Wymagania dotyczące projektu Potrzebny jest czysty, nowoczesny, premium-style e-mail. Wiadomość powinna być łatwa do przeczytania, nieprzeładowana, z jasną strukturą, krótkimi blokami tekstowymi, wizualnymi akcentami i kilkoma przyciskami CTA. Wymagania techniczne responsywna HTML e-mailowa; poprawne wyświetlanie na desktopie i urządzeniach mobilnych; układ oparty na tabelach; szerokość kontenera około 600–700 px; inline CSS / CSS kompatybilne z e-mailem; przyciski powinny być HTML/CSS, nie obrazkami; wszystkie ważne dane powinny być tekstem HTML; obrazy powinny mieć tekst alternatywny; bez JavaScript; bez formularzy w e-mailu; poprawne działanie linków; przygotowanie znaczników UTM dla CTA. Sprawdzenie Trzeba sprawdzić wyświetlanie w co najmniej: Gmail; Apple Mail; Outlook; mobilnych klientach e-mailowych. Na wyjściu trzeba otrzymać Gotowy plik HTML e-maila. Wersję tekstową. Podgląd lub zrzuty ekranu desktop/mobile. Instrukcję, gdzie zmieniać linki, tekst i obrazy. Plik/wersję gotową do załadowania do usługi wysyłkowej. W odpowiedzi proszę dołączyć przykłady HTML e-maili, które wykonaliście, oraz wskazać, z jakimi usługami wysyłkowymi pracowaliście.

It is necessary to reproduce as accurately as possible:– the structure of the pages; – the layout of the blocks; – the catalog grid; – the sizes of the elements; – the margins; – the typography; – the colors; – the header and footer; – product cards – the menu structure; – menu categories; – modal windows; – adaptive behavior; – hover, active, and mobile states. – the product page must have microdata for products – Pages must be optimized according to Google SEO recommendations1. Type of siteResponsive online sushi delivery store.Main versions:– desktop – from 1280 px; – tablet – 768–1279 px; – mobile – 320–767 px.2. NavigationHomeCategoriesPromotionsAbout UsDelivery and PaymentContactsMenuProduct CardShopping CartPage TemplateThe “Page Template” block should contain:– header;– breadcrumb;— “up” arrow— Light and dark theme switcher with user choice retention.— A watermark with the logo on the background of the page— Fix an image of chopsticks on the right edge of the background— Footer ResultDeliver:– Figma mockup for desktop and mobile; – HTML files; – CSS; – JavaScript; – a folder with placeholders; – responsive version of the page; – archive of the completed project.The main requirement is the most accurate reproduction of the structure, design, and behavior of the page example.com