Strona dla fachowców, elektryków, hydraulików, usług remontowaych
Wizytówka dla fachowców, hydraulików elektyków, usług remontowych, glazurników itp.
Świadczysz usługi remontowe, jesteś hydraulikiem, elektrykiem i chciałbyś mieć stronę internetową? Możesz zlecić ją profesjonalnej firmie, albo zrobić samemu. Każde z tych rozwiązań ma swoje wady i zalety. Jeżeli chcesz mieć wszystko dopieszczone, wykonane tak jak chcesz i masz budżet na stronę - to oczywiście zleć zawodowcom. Ale jeżeli potrzebujesz mieć szybko i tanio swoje miejsce w sieci - zapoznaj się z tym artykułem. Koszt wykonania jest niewielki, a możliwości takie strony są spore:
- Możez zamieścić zdjęcia z wykonywaych prac - to znacznie polepsza atrakcyjnosć oferty, w porównianiu do papierowj wizytówki
- Możesz zamieścić video z YT z prezentajcą swoich usług albo relacją z roboty - w dzisiejszym świecie video działa bardzo dobrze
- Wizytówka ułatwi uzyskiwanie poleceń - łatwo ją wysłać przez komunikatory, zameścić na aucie, a Klient od razu uzyskuje zdjęcia z prac
Co powinna zawierać dobra wizytówka online
- numer telefonu (klikalny)
- zakres usług
- kilka zdjęć
- (opcjonalnie) wideo z realizacji
ile to kosztuje?
- domena 18 zł za pierwszy rok/ około 80 przedłużenie w kolejnym roku
- hosting 15 zł /rok
- szablon: 0 zł
- czas 30 - 60 minut
Dla kogo NIE jest taka strona wizytówka?
Jeżeli potrzebujesz zaawansowanych funkcji, na przykład rezerwacji, logowania, zakładanie kont użytkowników, analityki internetowej lub zaawansowango seo - wybierz stronę przygotowaną przez profesjonalną firmę.
W przykładzie poniżej zbudujemy wizytówkę dla osoby zajmującej sie remontami, inne wersje wykombinujesz sam.
Zobacz demo
Krok 0: Zamów hosting Bieda15
Hosting kosztuje 15 PLN na rok i powinien wystarczyć do tego zastosowania.
Krok 1: Kup domenę
Możesz dzialać na darmowej subdomenie od biedahostingu, ale na własnej wygląda to zdecydowanie lepiej. Możesz poszukać domen w lokalnych, np. waw.pl - dzięki temu będziesz miał większy wybór ciekawych adresów. Możesz poszukać promocji u różnych dostawców - ale pamiętaj, że nawet takie super oferty są droższe przy przedłużeniu za rok.
Krok 2: Podłącz domenę do hostingu
W panelu domeny zmień ustawienia DNS na ns1.microhost.pl i ns2.microhost.pl i dodaj domenę w panelu swojego hostingu przez Zarządzenie kontami-> Zarządzanie domenami -> dodaj nową. Rozpropagowanie zmian w DNS moze zająć dłuższy czas, dlatego wynik może być widoczny nawet następnego dnia.
Krok 3: Podłącz darmowy certyfikat SSL
W panelu hostingu, który otrzymałeś po zakupie przejdż do Zarządzanie kontami -> certyfikaty SSL. Wybierz "Uzyskaj automatyczny certyfikat od dostawcy ACME". Wypełnij pola i wybierz zapisz.
Krok 4: Kod strony z linkami
Kod strony możesz wygenrować w AI, ale oczywiście polecamy wykonać samodzielnie. Mozesz kombinować z promptami, a możesz zacząć od najprostszego, czyli np. wygeneruj stronę w html i css dla osoby zajmującej się remontami. Możesz spróbować doprecyzować np. zmień kolor nagłówka, a także eksperymentować z róznymi modelami AI. Umieść kod strony w pliku index.html w folderze publi_html dodanej domeny. Mój przykład wyglada tak - skopiuj cały kod do swojego pliku index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marek Kowalski - Remonty & Wykończenia</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #ff6b00;
--dark: #1a1a1a;
--concrete: #e8e8e8;
--steel: #4a4a4a;
--warning: #ffd700;
--grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
background: var(--concrete);
color: var(--dark);
overflow-x: hidden;
}
/* Sticky CTA Header */
.sticky-cta {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--primary);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
animation: slideDown 0.6s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.sticky-cta-left {
display: flex;
align-items: center;
gap: 1rem;
}
.sticky-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem;
color: white;
letter-spacing: 2px;
}
.sticky-cta-phone {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--dark);
color: white;
padding: 0.8rem 2rem;
text-decoration: none;
font-weight: 700;
font-size: 1.2rem;
border: 3px solid var(--dark);
}
.sticky-cta-phone::before {
content: '📞';
font-size: 1.3rem;
animation: ring 2s ease-in-out infinite;
}
@keyframes ring {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(-15deg); }
20%, 40% { transform: rotate(15deg); }
50% { transform: rotate(0deg); }
}
.phone-number {
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 2px;
}
/* Hero Section */
.hero {
position: relative;
height: 100vh;
background: linear-gradient(135deg, var(--dark) 0%, var(--steel) 100%);
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}
.construction-sign {
background: var(--warning);
color: var(--dark);
padding: 0.5rem 1.5rem;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 3px;
transform: rotate(-2deg);
margin-bottom: 2rem;
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3rem, 12vw, 8rem);
color: var(--concrete);
letter-spacing: 8px;
line-height: 0.9;
margin-bottom: 1rem;
text-shadow:
3px 3px 0 var(--primary),
6px 6px 0 rgba(0,0,0,0.2);
animation: slideInDown 1s ease-out;
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--concrete);
font-weight: 600;
margin-bottom: 2rem;
opacity: 0;
animation: fadeInUp 1s ease-out 0.3s forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cta-button {
display: inline-block;
background: var(--primary);
color: white;
padding: 1.2rem 3rem;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
border: 3px solid var(--primary);
opacity: 0;
animation: fadeInUp 1s ease-out 0.6s forwards;
}
.cta-button span {
position: relative;
z-index: 1;
}
/* Services Section */
.services {
padding: 6rem 2rem;
background: var(--concrete);
position: relative;
}
.services::before {
content: 'USŁUGI';
position: absolute;
top: 10%;
left: -5%;
font-family: 'Bebas Neue', sans-serif;
font-size: 20vw;
color: rgba(0,0,0,0.03);
letter-spacing: 20px;
z-index: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 8vw, 5rem);
color: var(--dark);
margin-bottom: 1rem;
letter-spacing: 4px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60%;
height: 6px;
background: var(--primary);
transform: skew(-20deg);
}
.section-subtitle {
font-size: 1.2rem;
color: var(--steel);
margin-bottom: 4rem;
font-weight: 600;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: white;
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 6px solid var(--primary);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: var(--primary);
opacity: 0.05;
transform: rotate(45deg) translate(50%, -50%);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.service-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.service-card h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
color: var(--dark);
margin-bottom: 1rem;
letter-spacing: 2px;
}
.service-card p {
color: var(--steel);
line-height: 1.8;
font-size: 1rem;
}
/* Portfolio Section */
.portfolio {
padding: 6rem 2rem;
background: var(--dark);
color: white;
position: relative;
}
.portfolio::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 50px,
rgba(255,107,0,0.03) 50px,
rgba(255,107,0,0.03) 51px
);
pointer-events: none;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
position: relative;
z-index: 1;
}
.portfolio-item {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--steel) 0%, var(--dark) 100%);
position: relative;
overflow: hidden;
cursor: pointer;
}
.portfolio-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.portfolio-item::before {
content: '';
position: absolute;
inset: 0;
background: var(--grain);
opacity: 0.3;
}
.portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--primary) 0%, transparent 100%);
display: flex;
align-items: flex-end;
padding: 2rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-overlay h4 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
letter-spacing: 2px;
color: white;
}
/* Contact Section */
.contact {
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--concrete) 0%, white 100%);
position: relative;
}
.contact-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.contact-item {
background: white;
padding: 2rem;
border: 3px solid var(--dark);
position: relative;
transition: transform 0.3s ease;
}
.contact-item:hover {
transform: scale(1.05);
border-color: var(--primary);
}
.contact-item::before {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
background: var(--primary);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-item:hover::before {
opacity: 1;
}
.contact-item h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem;
color: var(--dark);
margin-bottom: 1rem;
letter-spacing: 2px;
}
.contact-item p {
font-size: 1.2rem;
color: var(--steel);
font-weight: 600;
}
.contact-item a {
color: var(--primary);
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}
.contact-item:hover a {
color: white;
}
/* Footer */
footer {
background: var(--dark);
color: var(--concrete);
padding: 3rem 2rem;
text-align: center;
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: repeating-linear-gradient(
90deg,
var(--primary),
var(--primary) 20px,
var(--warning) 20px,
var(--warning) 40px
);
}
footer p {
font-size: 1rem;
opacity: 0.8;
}
.footer-brand {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 4px;
margin-bottom: 1rem;
color: var(--primary);
}
/* Responsive */
@media (max-width: 768px) {
.sticky-cta {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.sticky-logo {
font-size: 1.2rem;
}
.sticky-cta-phone {
width: 100%;
justify-content: center;
font-size: 1.1rem;
padding: 0.8rem 1rem;
}
h1 {
letter-spacing: 4px;
}
.section-title {
letter-spacing: 2px;
}
.services-grid,
.portfolio-grid,
.contact-info {
grid-template-columns: 1fr;
}
}
/* Scroll animations */
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInScroll 0.8s ease forwards;
}
@keyframes fadeInScroll {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
align-items: center;
justify-content: center;
cursor: pointer;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
object-fit: contain;
animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
background: none;
border: none;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.lightbox-close:hover {
transform: scale(1.2);
}
.lightbox-title {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 2px;
text-align: center;
background: rgba(255, 107, 0, 0.9);
padding: 1rem 2rem;
}
/* Video Section */
.video-section {
padding: 6rem 2rem;
background: white;
position: relative;
}
.video-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
align-items: center;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
background: var(--dark);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-description h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 2rem;
letter-spacing: 2px;
}
.video-description ul {
list-style: none;
padding: 0;
}
.video-description li {
font-size: 1.1rem;
color: var(--steel);
margin-bottom: 1rem;
padding-left: 0;
line-height: 1.6;
}
@media (max-width: 968px) {
.video-container {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* Navigation Menu */
.main-nav {
position: fixed;
top: 70px; /* poniżej sticky CTA */
left: 0;
right: 0;
background: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(10px);
z-index: 999;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.nav-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem;
color: var(--primary);
letter-spacing: 2px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
align-items: center;
}
.nav-link {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--primary);
}
.nav-cta {
background: var(--primary);
color: white;
padding: 0.6rem 1.5rem;
text-decoration: none;
font-weight: 700;
border: 2px solid var(--primary);
transition: all 0.3s ease;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.nav-toggle span {
display: block;
width: 25px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Mobile Menu */
@media (max-width: 768px) {
.main-nav {
top: 120px; /* poniżej sticky CTA na mobile */
}
.nav-toggle {
display: flex;
}
.nav-menu {
position: absolute;
top: 60px;
left: 0;
right: 0;
background: rgba(26, 26, 26, 0.98);
flex-direction: column;
gap: 0;
padding: 1rem 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-menu.active {
max-height: 400px;
}
.nav-menu li {
width: 100%;
text-align: center;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-menu li:last-child {
border-bottom: none;
}
.nav-link, .nav-cta {
display: block;
width: 100%;
}
}
/* Adjust hero section to account for fixed nav */
.hero {
margin-top: 0;
}
</style>
</head>
<body>
<!-- Navigation Menu -->
<nav class="main-nav">
<div class="nav-container">
<div class="nav-logo">MK REMONTY</div>
<button class="nav-toggle" id="nav-toggle">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu" id="nav-menu">
<li><a href="#uslugi" class="nav-link">Usługi</a></li>
<li><a href="#realizacje" class="nav-link">Realizacje</a></li>
<li><a href="#o-mnie" class="nav-link">O Mnie</a></li>
<li><a href="#kontakt" class="nav-link">Kontakt</a></li>
<li><a href="tel:+48600123456" class="nav-cta">Zadzwoń</a></li>
</ul>
</div>
</nav>
<!-- Sticky CTA Header -->
<div class="sticky-cta">
<div class="sticky-cta-left">
<span class="sticky-logo">MAREK KOWALSKI</span>
</div>
<a href="tel:+48600123456" class="sticky-cta-phone">
<span class="phone-number">+48 600 123 456</span>
</a>
</div>
<section class="hero">
<div class="hero-content">
<div class="construction-sign">PROFESJONALNIE OD 1998</div>
<h1>MAREK<br>KOWALSKI</h1>
<p class="hero-subtitle">Remonty • Wykończenia • Adaptacje</p>
<a href="#kontakt" class="cta-button"><span>Zamów Wycenę</span></a>
</div>
</section>
<section class="services" id="uslugi">
<div class="container">
<h2 class="section-title">Co Robię?</h2>
<p class="section-subtitle">Kompleksowe usługi remontowo-budowlane</p>
<div class="services-grid">
<div class="service-card fade-in">
<div class="service-icon">🔨</div>
<h3>Remonty Mieszkań</h3>
<p>Kompleksowe remonty od A do Z. Przygotowanie projektu, zakup materiałów, wykonanie wszystkich prac wykończeniowych. Terminowo i solidnie.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.1s;">
<div class="service-icon">🧱</div>
<h3>Prace Murarskie</h3>
<p>Murowanie ścian, tynkowanie, wylewki. Doświadczenie w pracy z różnymi materiałami: cegła, pustaki, beton komórkowy.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.2s;">
<div class="service-icon">🎨</div>
<h3>Malowanie & Gładź</h3>
<p>Przygotowanie powierzchni, gładzie gipsowe, malowanie farbami wysokiej jakości. Idealne wykończenie ścian i sufitów.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.3s;">
<div class="service-icon">🚿</div>
<h3>Łazienki</h3>
<p>Układanie płytek, montaż armatury, hydroizolacja. Kompleksowe wykończenie łazienek według projektu klienta.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.4s;">
<div class="service-icon">🪟</div>
<h3>Stolarka & Podłogi</h3>
<p>Montaż drzwi, paneli, parkietu. Precyzyjne wykończenie zgodnie z najwyższymi standardami.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.5s;">
<div class="service-icon">⚡</div>
<h3>Instalacje</h3>
<p>Współpraca z zaufanymi elektrykami i hydraulikami. Kompleksowa obsługa wszystkich instalacji w mieszkaniu.</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="realizacje">
<div class="container">
<h2 class="section-title" style="color: var(--concrete);">Realizacje</h2>
<p class="section-subtitle" style="color: rgba(255,255,255,0.7);">Wybrane projekty z ostatnich lat</p>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="img/image1.png" alt="Remont 60m² Warszawa" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Remont 60m² Warszawa</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/lazienka1.png" alt="Łazienka Mokotów" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Łazienka Mokotów</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/kawalerka.png" alt="Kawalerka Śródmieście" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Kawalerka Śródmieście</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/dom.png" alt="Dom Podwarszawski" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Dom Podwarszawski</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/biuro.png" alt="Biuro 120m²" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Biuro 120m²</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/strych.png" alt="Adaptacja Strychu" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Adaptacja Strychu</h4>
</div>
</div>
</div>
</div>
</section>
<section class="video-section" id="o-mnie">
<div class="container">
<h2 class="section-title">Poznaj Mnie</h2>
<p class="section-subtitle">Kilka słów o mojej pracy i doświadczeniu</p>
<div class="video-container">
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/vjcbuy9P6OA"
title="Film prezentacyjny"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="video-description">
<h3>Dlaczego Warto Mi Zaufać?</h3>
<ul>
<li>✓ Ponad 25 lat doświadczenia w branży budowlanej</li>
<li>✓ Setki zadowolonych klientów w Warszawie i okolicach</li>
<li>✓ Gwarancja na wykonane prace</li>
<li>✓ Terminowość i solidność w każdym projekcie</li>
<li>✓ Indywidualne podejście do każdego zlecenia</li>
</ul>
</div>
</div>
</div>
</section>
<section class="contact" id="kontakt">
<div class="container contact-content">
<h2 class="section-title">Skontaktuj Się</h2>
<p class="section-subtitle">Zamów bezpłatną wycenę lub umów spotkanie</p>
<div class="contact-info">
<div class="contact-item">
<h3>Telefon</h3>
<p><a href="tel:+48600123456">+48 600 123 456</a></p>
</div>
<div class="contact-item">
<h3>Email</h3>
<p><a href="mailto:kontakt@remonty-kowalski.pl">kontakt@remonty-kowalski.pl</a></p>
</div>
<div class="contact-item">
<h3>Obszar Działania</h3>
<p>Warszawa i okolice<br>(do 50 km)</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-brand">MAREK KOWALSKI</div>
<p>© 2026 Wszystkie prawa zastrzeżone | Remonty & Wykończenia</p>
</footer>
<!-- Lightbox -->
<div class="lightbox" id="lightbox">
<button class="lightbox-close" onclick="closeLightbox()">×</button>
<img class="lightbox-content" id="lightbox-img" src="" alt="">
<div class="lightbox-title" id="lightbox-title"></div>
</div>
<script data-cfasync="false" "></script><script data-cfasync="false" "></script><script>
// Scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = entry.target.style.animation || 'fadeInScroll 0.8s ease forwards';
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Lightbox functions
function openLightbox(imageSrc, title) {
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxTitle = document.getElementById('lightbox-title');
lightboxImg.src = imageSrc;
lightboxTitle.textContent = title;
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
const lightbox = document.getElementById('lightbox');
lightbox.classList.remove('active');
document.body.style.overflow = 'auto';
}
// Close lightbox on click outside image
document.getElementById('lightbox').addEventListener('click', function(e) {
if (e.target === this) {
closeLightbox();
}
});
// Close lightbox on ESC key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeLightbox();
}
});
// Add click handlers to portfolio items
document.querySelectorAll('.portfolio-item').forEach(item => {
item.addEventListener('click', function() {
const title = this.querySelector('h4').textContent;
const img = this.querySelector('.portfolio-image');
if (img && img.src) {
openLightbox(img.src, title);
}
});
});
// Mobile menu toggle
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.getElementById('nav-menu');
navToggle.addEventListener('click', function() {
this.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function() {
navToggle.classList.remove('active');
navMenu.classList.remove('active');
});
});
</script>
</body>
</html>
Krok 5: Zmodyfkuj potrzebne informacje i obrazy
Zgodne z Waszymi planami informacje możesz modyfkować przez AI (jeżeli go używasz) podczas tworzenia szablonu strony. Możesz wpisać na przykład "zmień obszar działań na: " Takie podejcie oczywiscie zadziała, ale jeżeli masz trochę zacięcia technicznego - to polecam zmodyfikować informacje i linki ręcznie. Kod W moim szablonie mam fragmenty:
- Imię i nazwisko i numeer telefonu - Znajdż wszystkie wystąpienia nazwiska Marek Kowalski i numeru telefonu w moim szablonie - zamień na własne dane.
- Zakres usług - znajdz fragment z zakresem usług, zmień je zgodnie z informacjami o sobie
<div class="container">
<h2 class="section-title">Co Robię?</h2>
<p class="section-subtitle">Kompleksowe usługi remontowo-budowlane</p>
<div class="services-grid">
<div class="service-card fade-in">
<div class="service-icon">🔨</div>
<h3>Remonty Mieszkań</h3>
<p>Kompleksowe remonty od A do Z. Przygotowanie projektu, zakup materiałów, wykonanie wszystkich prac wykończeniowych. Terminowo i solidnie.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.1s;">
<div class="service-icon">🧱</div>
<h3>Prace Murarskie</h3>
<p>Murowanie ścian, tynkowanie, wylewki. Doświadczenie w pracy z różnymi materiałami: cegła, pustaki, beton komórkowy.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.2s;">
<div class="service-icon">🎨</div>
<h3>Malowanie & Gładź</h3>
<p>Przygotowanie powierzchni, gładzie gipsowe, malowanie farbami wysokiej jakości. Idealne wykończenie ścian i sufitów.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.3s;">
<div class="service-icon">🚿</div>
<h3>Łazienki</h3>
<p>Układanie płytek, montaż armatury, hydroizolacja. Kompleksowe wykończenie łazienek według projektu klienta.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.4s;">
<div class="service-icon">🪟</div>
<h3>Stolarka & Podłogi</h3>
<p>Montaż drzwi, paneli, parkietu. Precyzyjne wykończenie zgodnie z najwyższymi standardami.</p>
</div>
<div class="service-card fade-in" style="animation-delay: 0.5s;">
<div class="service-icon">⚡</div>
<h3>Instalacje</h3>
<p>Współpraca z zaufanymi elektrykami i hydraulikami. Kompleksowa obsługa wszystkich instalacji w mieszkaniu.</p>
</div>
</div>
</div>
</section>
- Galeria zdjęć - w panelu hostingu utwórz folder img i wgraj do niego zdjęcia. Następnie zmodyfkuj fragment:
<section class="portfolio" id="realizacje">
<div class="container">
<h2 class="section-title" style="color: var(--concrete);">Realizacje</h2>
<p class="section-subtitle" style="color: rgba(255,255,255,0.7);">Wybrane projekty z ostatnich lat</p>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="img/image1.png" alt="Remont 60m² Warszawa" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Remont 60m² Warszawa</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/lazienka1.png" alt="Łazienka Mokotów" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Łazienka Mokotów</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/kawalerka.png" alt="Kawalerka Śródmieście" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Kawalerka Śródmieście</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/dom.png" alt="Dom Podwarszawski" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Dom Podwarszawski</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/biuro.png" alt="Biuro 120m²" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Biuro 120m²</h4>
</div>
</div>
<div class="portfolio-item">
<img src="img/strych.png" alt="Adaptacja Strychu" class="portfolio-image">
<div class="portfolio-overlay">
<h4>Adaptacja Strychu</h4>
</div>
</div>
</div>
</div>
</section>
- Sekcja video- zmodyfikuj poniższy fragment. W miejsce XXXXX wstaw ID wybranego filmu z yt
<section class="video-section" id="o-mnie">
<div class="container">
<h2 class="section-title">Poznaj Mnie</h2>
<p class="section-subtitle">Kilka słów o mojej pracy i doświadczeniu</p>
<div class="video-container">
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/XXXXXX"
title="Film prezentacyjny"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="video-description">
<h3>Dlaczego Warto Mi Zaufać?</h3>
<ul>
<li>✓ Ponad 25 lat doświadczenia w branży budowlanej</li>
<li>✓ Setki zadowolonych klientów w Warszawie i okolicach</li>
<li>✓ Gwarancja na wykonane prace</li>
<li>✓ Terminowość i solidność w każdym projekcie</li>
<li>✓ Indywidualne podejście do każdego zlecenia</li>
</ul>
</div>
</div>
</div>
</section>
- Dane kontaktowe - zmodyfikuj fragment
<section class="contact" id="kontakt"> <div class="container contact-content"> <h2 class="section-title">Skontaktuj Się</h2> <p class="section-subtitle">Zamów bezpłatną wycenę lub umów spotkanie</p> <div class="contact-info"> <div class="contact-item"> <h3>Telefon</h3> <p><a href="tel:+48600123456">+48 600 123 456</a></p> </div> <div class="contact-item"> <h3>Email</h3> <p><a href="mailto:kontakt@remonty-kowalski.pl">kontakt@remonty-kowalski.pl</a></p> </div> <div class="contact-item"> <h3>Obszar Działania</h3> <p>Warszawa i okolice<br>(do 50 km)</p> </div> </div> </div> </section> <footer> <div class="footer-brand">MAREK KOWALSKI</div> <p>© 2026 Wszystkie prawa zastrzeżone | Remonty & Wykończenia</p> </footer>
Dlaczego to działa na tanim hostingu?
Do takiego zadania nie potrzebujesz VPS-a ani chmury. Wystarczy: biedahosting, najprostsza oferta pozwlająca na utrzymnie strony w internecie. Właśnie do takich małych rzeczy powstał BiedaHosting — prosty, tani i bez umów.
Faq
- Ile kosztuje taka strona?
Sama strona jest darmowa - koszt to hosting i domena - razem kilkadziesiąt złotych rocznie - Czy muszę znać HTML?
Modyfikacja szablonu wymaga podstawowej znajomości html, ale przy odrobinie uważnosci można zmodyfikować tylko potrzebne dane. Można również modyfikować strony z pomocą AI. - Czy mogę mieć własną domenę i maila?
Tak, oczywiscie, możesz wystawić stronę na własnej domenie i własnie do takiego rozwiażania zachęcamy - Czy to działa na telefonie?
Tak, szablon prawidłowo wyświetla sie na telefonie.