This is an example of a page. Unlike posts, which are displayed on your blog’s front page in the order they’re published, pages are better suited for more timeless content that you want to be easily accessible, like your About or Contact information. Click the Edit link to make changes to this page or add another page.

/* STYL OGÓLNY */ .home-wrapper { font-family: sans-serif; max-width: 1200px; margin: 0 auto; color: #333; } /* 1. SEKCJA HERO Z WYSZUKIWARKĄ */ .hero-section { background-color: #f0f2f5; /* Możesz tu wstawić zdjęcie tła */ padding: 60px 20px; text-align: center; border-radius: 10px; margin-bottom: 30px; } .hero-title { font-size: 2em; margin-bottom: 20px; color: #2c3e50; } /* Styl wyszukiwarki WordPress */ .custom-search-form { max-width: 500px; margin: 0 auto; display: flex; } .custom-search-input { flex-grow: 1; padding: 15px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; font-size: 16px; } .custom-search-button { padding: 15px 30px; background-color: #2c3e50; /* Twój kolor główny */ color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; font-weight: bold; } /* 2. PASEK SOCIAL MEDIA */ .social-bar { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .social-btn { text-decoration: none; color: white; background-color: #333; padding: 10px 20px; border-radius: 20px; font-size: 14px; transition: 0.3s; } .social-btn.insta { background-color: #C13584; } .social-btn.fb { background-color: #4267B2; } .social-btn:hover { opacity: 0.8; } /* 3. UKŁAD GŁÓWNY (LEWA + PRAWA) */ .main-grid { display: flex; flex-wrap: wrap; gap: 30px; } /* LEWA KOLUMNA */ .content-area { flex: 2; /* Zajmuje 2/3 szerokości */ min-width: 300px; } /* Kolaż ostatnich wpisów (Grid) */ .collage-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 kolumny */ gap: 15px; margin-bottom: 40px; } .collage-item { position: relative; height: 250px; background-color: #ddd; /* Kolor zastępczy, tu będą zdjęcia */ border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; } .collage-item.large { grid-column: span 2; /* Pierwszy post szeroki na całość */ height: 350px; } .post-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.8)); width: 100%; padding: 20px; color: white; } .post-title { font-size: 1.2em; margin: 0; font-weight: bold; } /* Sekcja Losowe */ .random-posts h3 { border-bottom: 2px solid #eee; padding-bottom: 10px; } .random-list { list-style: none; padding: 0; } .random-list li { padding: 10px 0; border-bottom: 1px solid #f9f9f9; } .random-list a { text-decoration: none; color: #333; font-weight: 500; } /* PRAWA KOLUMNA (SIDEBAR) */ .sidebar { flex: 1; /* Zajmuje 1/3 szerokości */ min-width: 250px; background-color: #f9f9f9; padding: 20px; border-radius: 8px; height: fit-content; } .sidebar-widget h3 { margin-top: 0; font-size: 1.1em; text-transform: uppercase; color: #555;} /* Stylizacja kalendarza (prosta) */ .wp-calendar-table { width: 100%; text-align: center; border-collapse: collapse; } .wp-calendar-table th { background: #eee; padding: 5px; } .wp-calendar-table td { padding: 8px; border: 1px solid #eee; } /* RWD – Mobilność */ @media (max-width: 768px) { .main-grid { flex-direction: column; } .collage-grid { grid-template-columns: 1fr; } .collage-item.large { grid-column: auto; } }