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 259

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.

W liście nie są widoczne oferty ukryte przez zleceniodawcę lub freelancerów z profilem Plus, a także oferty, które naruszają regulamin

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

Wykonanie szablonu strony głównej

82 oferty 31 lipca

59 PLN
Szukamy front-end developera.

137 ofert 29 lipca

2918 PLN
Zbudować stronę na WP

Projektowanie stron internetowych 128 ofert 28 lipca

Nie podano
Projektant e-maili / Koder wiadomości

E-mail marketing 53 oferty 27 lipca

420 PLN
Nowy responsywny szablon HTML/CSS dla dużej strony z kodem legacy

71 ofert 27 lipca

Nie podano

Magic Traffic
Kijów, Ukraina
Magic Traffic

Zleceń 163
Ocena 5.0
Ranking 3 560

Magic Traffic

Yevhenii Goncharenko

Christina Polishuk

Yury Nikonenko

Sierafim Ilika

Vladyslav Levadnii

Yevhenii Goncharenko

Aktualnie brak ofert

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

Wykonanie szablonu strony głównej

Szukamy front-end developera.

Zbudować stronę na WP

Projektant e-maili / Koder wiadomości

Nowy responsywny szablon HTML/CSS dla dużej strony z kodem legacy