LuminaDental
Nowoczesna, responsywna strona docelowa dla fikcyjnej kliniki stomatologicznej — zbudowana w czystym HTML5, CSS3 i JavaScript, prezentująca profesjonalny, budzący zaufanie wizerunek marki medycznej.
Strona w akcji
Zaufanie i profesjonalizm
wyrażone w interfejsie
Lumina Dental to responsywna strona typu landing page stworzona dla fikcyjnej kliniki stomatologicznej. Projekt powstał wyłącznie w celach portfolio — jako pokaz umiejętności budowania profesjonalnego, budzącego zaufanie interfejsu medycznego wyłącznie w oparciu o semantyczny HTML5, nowoczesny CSS3 i czysty JavaScript.
Cały projekt — nazwa kliniki, personel, zdjęcia, opinie pacjentów i dane kontaktowe — jest wymyślony. Strona nie reprezentuje żadnej rzeczywistej placówki medycznej ani klienta.
Stack technologiczny
Jak zbudowana jest strona
Strona opiera się na znacznikach semantycznych HTML5, co poprawia dostępność, SEO oraz czytelność kodu.
<header>...</header> <main> <section id="uslugi">...</section> <section id="opinie">...</section> </main>
Paleta i odstępy zdefiniowane jako zmienne CSS, dzięki czemu spójny, budzący zaufanie motyw jest łatwy do utrzymania i rozwijania.
:root {
--mint: #4fd6b0;
--void: #05090b;
}
Menu typu hamburger otwierane i zamykane w czystym JavaScript, bez dodatkowych zależności.
ham.addEventListener("click", () =>
drawer.classList.toggle("open"));
Siatka kart usług prezentuje zakres opieki stomatologicznej, zbudowana na CSS Grid.
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Sekcja rekomendacji renderowana jako karuzela lub siatka opinii, budująca wiarygodność kliniki w oczach odwiedzających.
<div class="testimonial-card"> ... </div>
Walidacja pól po stronie klienta w JavaScript — formularz ma charakter demonstracyjny i nie wysyła danych na żaden backend.
form.addEventListener("submit", e => {
e.preventDefault();
validate(form);
});
Co wyróżnia projekt
Dlaczego te technologie
| Technologia | Zastosowanie | Powód wyboru |
|---|---|---|
| HTML5 | Struktura strony | Semantyka, dostępność, SEO bez narzutu frameworka |
| CSS3 | Stylowanie i layout | Responsywność i zmienne CSS wystarczają dla landing page |
| JavaScript | Interaktywność | Menu mobilne, lightbox, walidacja — bez zbędnych zależności |
| Media Queries | Responsywność | Pełna kontrola nad breakpointami bez frameworka CSS |
| Google Fonts | Typografia | Szybkie wdrożenie profesjonalnych fontów bez lokalnych plików |
| Vercel | Hosting / deployment | Automatyczny deployment z main, darmowy SSL i CDN |
Jak uruchomić
git clone https://github.com/Andrii418/lumina-dental-landing.git
cd lumina-dental-landing # otwórz index.html w przeglądarce # lub uruchom rozszerzenie Live Server
vercel --prod
O projekcie
Uwaga: Lumina Dental to w całości fikcyjny projekt demonstracyjny stworzony wyłącznie w celach portfolio i edukacyjnych. Klient, teksty, grafiki, personel oraz dane kontaktowe są wymyślone i nie reprezentują żadnej rzeczywistej kliniki stomatologicznej ani pacjenta.