Zrzut ekranu do kodu

Dane wejściowe

Content

A screenshot of a SaaS landing-page hero section with a headline, subtext, an email signup field, and a blue call-to-action button on a light background that needs to be turned into responsive HTML and CSS.

Wynik (fragment)

Generuje responsywną strukturę HTML z wyśrodkowanym kontenerem hero: nagłówek h1, przygaszony akapit podtytułu, inline'owe pole e-mail oraz ostylowany niebieski przycisk CTA, plus pasujący CSS wykorzystujący flexbox, odstępy i stan hover. Znaczniki odzwierciedlają układ i są gotowe do wklejenia do projektu i dopracowania.

Dane wejściowe

Content

A screenshot of a three-column pricing table with tier names, monthly prices, feature lists, and a highlighted middle plan that needs to be converted into clean HTML and CSS.

Wynik (fragment)

Tworzy trzykolumnową siatkę kart cenowych, każda z nagłówkiem poziomu, dużą ceną, listą funkcji w punktach i przyciskiem CTA, przy czym środkowa karta otrzymuje wyróżnioną obwódkę i plakietkę. Towarzyszący CSS obsługuje siatkę, cienie kart oraz responsywne układanie w stos na urządzeniach mobilnych, dając działający punkt wyjścia do dostosowania.

Dane wejściowe

Content

A screenshot of a simple centered login form with email and password fields, a remember-me checkbox, and a sign-in button that needs to be turned into HTML and CSS.

Wynik (fragment)

Wyprowadza wyśrodkowaną kartę zawierającą formularz z opisanymi polami e-mail i hasła, wierszem z polem wyboru „zapamiętaj mnie” oraz przyciskiem logowania na całą szerokość, ostylowany czystymi odstępami, zaokrąglonymi polami i stanem focus. Semantyczne znaczniki i CSS dostarczają gotowy do uruchomienia układ logowania do studiowania i rozbudowy.