Stworzyć bibliotekę autonomicznych bloków do generowania dynamicznych stron internetowych. CMS będzie automatycznie zbierać strony, wybierając losowo różne bloki (nagłówek, treść, stopka itp.).

Bloki powinny być niezależne i łatwe do łączenia ze sobą w dowolnej kolejności.

Płatność

Za projekt lub stawka za 1 godzinę.

Skład bloków

Nagłówek – 5 wariantów
Bloki H1 – 6 wariantów
Bloki treści – 11 wariantów
Stopka – 12 wariantów

Listę i przykłady bloków można zobaczyć w pliku:
Google Sheets – szablony bloków

Ogólne wymagania

Jednolity plik CSS dla wszystkich bloków
Wszystkie style powinny być przechowywane w jednym pliku CSS.
Jeden klas na element
Na każdym elemencie HTML dozwolony jest tylko 1 klasa.
Autonomia bloków
- Bloki nie powinny zależeć od siebie pod względem stylów.
- Każdy blok ma unikalny prefiks w nazwach klas.
- Układ nie powinien się łamać przy dowolnym połączeniu bloków.
Odstępy między blokami
- Przewidzieć pionowe odstępy (margin/padding), aby bloki dobrze wyglądały przy dowolnych kombinacjach.
- Preferowane jest użycie padding wewnątrz bloków, aby treść nie przylegała do krawędzi.

System zmiennych dla kolorów
Wszystkie kolory i tła powinny być przypisywane za pomocą właściwości CSS custom properties (zmienne).

Zmienna są podłączane przez :root { ... } z użyciem stałych:

:root {
  --header-bg: var(--{{ synonyms.header }});
  --header-btn-login-bg: var(--{{ synonyms['header__buttons-login'] }});
  --header-btn-login-text: var(--{{ synonyms['header__buttons-login'] }}_text);
  --header-btn-signup-bg: var(--{{ synonyms['header__buttons-signup'] }});
  --header-btn-signup-text: var(--{{ synonyms['header__buttons-signup'] }}_text);

  --body-bg: var(--{{ synonyms['wrapper'] }});
  --body-text: var(--{{ synonyms['header__text'] }});
  --body-btn-bg: var(--{{ synonyms['slot__button'] }});
  --body-btn-text: var(--{{ synonyms['slot__text'] }});
  --h1-bg-top: var(--{{ synonyms['block-h1__top'] }});
  --h1-bg-main: var(--{{ synonyms['block-h1__h1'] }});
  --slot-bg: var(--{{ synonyms['block-slot-with-group-row__slots-wrap-local'] }});

  --footer-bg: var(--{{ synonyms['footer'] }});
  --footer-color: var(--{{ synonyms['footer__color'] }});
}

Wewnątrz bloków używać tylko zmiennych, a nie sztywnych kolorów.

Standardy układu

HTML5, semantyczne oznaczenie
Mobile-first, responsywność (flex/grid)
Minimalna liczba zależności (żadne zewnętrzne biblioteki).
Obrazy – przez <img> lub <picture>, ikony – przez SVG.
Czcionki i rozmiary – względne (rem, %).
Wszystkie bloki powinny poprawnie wyglądać przy szerokościach 320px – 1920px.

Szczegóły techniczne bloków

Nagłówek (5 wariantów)

Skład: logo, menu, przyciski (Zaloguj się/Zarejestruj), możliwie pasek wyszukiwania.
Tło – przez --header-bg.
Przyciski – przez --header-btn-login-bg, --header-btn-signup-bg.

Bloki H1 (6 wariantów)

Skład: nagłówek H1, podtytuł/opis, tło/gradient.
Używać --h1-bg-top, --h1-bg-main do stylizacji.

Bloki treści (11 wariantów)

Skład: karty, sekcje tekstowe, galerie, bloki CTA, bloki z przyciskami.
Tło – --body-bg, tekst – --body-text.
Przyciski – --body-btn-bg, --body-btn-text.

Stopka (12 wariantów)

Skład: nawigacja, prawa autorskie, media społecznościowe, szybkie linki.
Tło – --footer-bg, tekst – --footer-color.

Kontrola jakości

Każdy blok testowany jest osobno (standalone).
Sprawdzanie kombinacji bloków (losowa kolejność) – aby nigdzie nie było "sklejania" lub wizualnych błędów.
Test responsywności (smartfon, tablet, desktop). Priorytet telefon.

Oferty 9

Christina Polishuk

1 0

Zlecenia -
Ocena -
Ranking 216

Budżet: 10000 UAH Termin: 4 dni

Dzień dobry

Dziękuję za szczegółowy opis projektu.
Mam ponad 5-letnie doświadczenie w frontendowym programowaniu. Pracuję zarówno w firmie, jak i na freelansie.

Moje doświadczenie:
- Tworzenie responsywnych stron internetowych i interfejsów użytkownika z HTML, Smarty, CSS/SCSS/SASS/LESS, JavaScript/jQuery, Vue.js.
- Optymalizacja wydajności stron internetowych i poprawa UX.
- Tworzenie i modyfikacja poszczególnych bloków, stron i komponentów, integracja z API.
- Doświadczenie w pracy z Laravel, Docker, React, Next.js, a także Git do pracy zespołowej.
- Testowanie międzyprzeglądarkowe i międzyplatformowe (desktop, tablet, mobile).

Twoje wymagania (jednolity CSS, autonomiczne bloki, użycie właściwości niestandardowych dla kolorów, mobile-first responsywność) odpowiadają mojemu doświadczeniu. Regularnie tworzę nowe bloki i komponenty, które powinny działać w dowolnych kombinacjach i być łatwe do skalowania.

Chętnie wyjaśnię szczegóły

Yury Nikonenko

111 3

Budżet: 12000 UAH Termin: 7 dni

Cześć, Magic Traffic!
Realizuję bibliotekę autonomicznych bloków zgodnie z TZ.

Z poważaniem, Jurij

Sierafim Ilika

0 0

Zlecenia -
Ocena -
Ranking 307

Budżet: 5000 UAH Termin: 3 dni

Cześć! Mam duże doświadczenie w tworzeniu modułowych i skalowalnych systemów front-end, a Twój projekt dotyczący stworzenia biblioteki autonomicznych bloków dla dynamicznych stron internetowych idealnie odpowiada moim wymaganiom. Specjalizuję się w tworzeniu responsywnych semantycznych układów w HTML5 i CSS3, gdzie każdy komponent jest całkowicie niezależny, nadaje się do ponownego użycia i jest stylizowany za pomocą scentralizowanego systemu zmiennych, co zapewnia jednolitość i elastyczność. Zgodnie z Twoimi wymaganiami wdrożę koncepcję „jedna klasa na element”, unikalne prefiksy i niestandardowe właściwości CSS, aby wszystkie bloki mogły być łączone w dowolnej kolejności bez konfliktów. Będę również stosować podejście zorientowane na urządzenia mobilne, przeprowadzać testy w punktach kontrolnych (320–1920 pikseli) i zapewniać doskonałą responsywność za pomocą Flexbox/Grid. Wszystkie projekty będą zoptymalizowane pod kątem wydajności, dostępności i zgodności między przeglądarkami, z uwzględnieniem Twoich wymagań dotyczących autonomii i łatwości wsparcia. Dzięki mojemu doświadczeniu w tworzeniu dostosowanych rozwiązań CMS mogę stworzyć niezawodną bibliotekę bloków, która będzie odpowiadać Twoim technicznym i projektowym oczekiwaniom.

Vladyslav Levadnii

19 0

Budżet: 1111 UAH Termin: 3 dni

Dzień dobry! Jestem gotów wykonać pracę jakościowo.
Portfolio prac w moim profilu.
Z góry dziękuję!

Yevhenii Goncharenko

Oferta, która wygrała

10 1

Budżet: 6000 UAH Termin: 7 dni

Dzień dobry. Zainteresował mnie twój zlecenie. Doświadczenie w branży internetowej od 2014 roku. Pisz na PW w celu omówienia szczegółów.

Magic Traffic
Kijów, Ukraina
Magic Traffic

Zleceń 163
Ocena 5.0
Ranking 3 589

Skład biblioteki autonomicznych bloków dla dynamicznych stron (Nagłówek, H1, Treść, Stopka)

Opinia zleceniodawcy o współpracy z Yevhenii Goncharenko

Skład biblioteki autonomicznych bloków dla dynamicznych stron (Nagłówek, H1, Treść, Stopka)

5.0

Magic Traffic

Opinia freelancera o współpracy z Magic Traffic

Skład biblioteki autonomicznych bloków dla dynamicznych stron (Nagłówek, H1, Treść, Stopka)

5.0

Yevhenii Goncharenko

Cel

Płatność

Skład bloków

Ogólne wymagania

Standardy układu

Szczegóły techniczne bloków

Nagłówek (5 wariantów)

Bloki H1 (6 wariantów)

Bloki treści (11 wariantów)

Stopka (12 wariantów)

Kontrola jakości

Christina Polishuk

Yury Nikonenko

Sierafim Ilika

Vladyslav Levadnii

Yevhenii Goncharenko

Oferty ukryte

Aktualnie brak ofert

Aktualne zlecenia dla freelancerów w kategorii Układ HTML i CSS

Wykonanie + projekt baru sushi

Redesign i ponowne uruchomienie strony internetowej kliniki stomatologicznej Brovchak Family Dental Care

Dokończyć szablon WIX

Wykonanie szablonu gotowego projektu strony (WordPress / WooCommerce)

Opracowanie strony internetowej według projektu