Kamila96/FocusOne
0
1<!DOCTYPE html>2<html lang="pl">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Focus One - Projektowanie Graficzne</title>7 <link rel="stylesheet" href="css/style.css">8 <link rel="stylesheet" href="css/graphic-design.css">9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">11 <script src="js/components.js"></script>12</head>13<body class="graphic-design">14 <div class="main-content grafika">15 <nav>16 <div class="nav-container">17 <div class="nav-left">18 <a href="index.html">19 <img src="image/logo_biale z png.png" alt="Focus One logo" class="logo" style="height:48px;width:auto;object-fit:contain;" />20 </a>21 </div>22 <div class="nav-center">23 <div class="nav-links">24 <a href="graphic-design.html" class="nav-link">Home</a>25 <a href="#about" class="nav-link">O mnie</a>26 <a href="#services" class="nav-link">Usługi</a>27 <a href="#portfolio" class="nav-link">Portfolio</a>28 <a href="graphic-design-pricing.html" class="nav-link">Cennik</a>29 <a href="#contact" class="nav-link">Kontakt</a>30 <a href="photography.html" class="nav-link">Przejdź do fotografii</a>31 </div>32 </div>33 <div class="nav-right">34 <button class="cta-btn desktop-only" onclick="location.href='#contact'">Rozpocznij projekt</button>35 <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Menu">36 <span class="hamburger-line"></span>37 <span class="hamburger-line"></span>38 <span class="hamburger-line"></span>39 </button>40 </div>41 </div>42 <div class="mobile-menu" id="mobileMenu">43 <div class="mobile-menu-content">44 <a href="graphic-design.html" class="mobile-menu-link">Home</a>45 <a href="#about" class="mobile-menu-link" onclick="closeMobileMenu()">O mnie</a>46 <a href="#services" class="mobile-menu-link" onclick="closeMobileMenu()">Usługi</a>47 <a href="#portfolio" class="mobile-menu-link" onclick="closeMobileMenu()">Portfolio</a>48 <a href="graphic-design-pricing.html" class="mobile-menu-link">Cennik</a>49 <a href="#contact" class="mobile-menu-link" onclick="closeMobileMenu()">Kontakt</a>50 <a href="photography.html" class="mobile-menu-link">Przejdź do fotografii</a>51 <button class="mobile-cta-btn" onclick="location.href='#contact'; closeMobileMenu()">Rozpocznij projekt</button>52 </div>53 </div>54 </nav>55 56 <!-- Hero Section -->57 <section class="hero-section">58 <div class="hero-background">59 <div class="gradient-orb"></div>60 </div>61 <div class="hero-container">62 <div class="hero-content">63 <h1 class="hero-title">64 <span class="title-main">Projektowanie graficzne</span>65 <span class="title-accent">na najwyższym poziomie</span>66 </h1>67 <p class="hero-description">Tworzę projekty, które wyróżniają się w tłumie i budują silną markę Twojej firmy</p>68 <div class="hero-cta">69 <a href="#contact" class="primary-button">Rozpocznij projekt</a>70 <a href="#portfolio" class="secondary-button">Zobacz portfolio</a>71 </div>72 </div>73 <div class="hero-visual">74 <div class="light-effect" id="lightEffect">75 <div class="starfield">76 <div class="star"></div>77 <div class="star"></div>78 <div class="star"></div>79 <div class="star"></div>80 <div class="star"></div>81 <div class="star"></div>82 <div class="star"></div>83 <div class="star"></div>84 <div class="star"></div>85 <div class="star"></div>86 <div class="star"></div>87 <div class="star"></div>88 </div>89 <div class="light-cursor" id="lightCursor"></div>90 <div class="light-cursor-secondary" id="lightCursorSecondary"></div>91 <div class="ambient-glow"></div>92 <div class="ambient-glow"></div>93 <div class="ambient-glow"></div>94 </div>95 </div>96 </div>97 </section>98 99 <!-- About Me Section -->100 <section id="about" class="about-section">101 <div class="about-container">102 <div class="about-content">103 <div class="about-text">104 <h2 class="section-title">O MNIE</h2>105 <div class="about-description">106 <p>Jestem dyplomowaną absolwentką Grafiki na Społecznej Akademii Nauk. Ukończyłam również Akademię Fotografii oraz podyplomowe studia z digital mediów. Swoje umiejętności rozwijam regularnie, uczestnicząc w kursach i szkoleniach branżowych.</p>107 108 <p>Zajmuję się szeroko pojętym projektowaniem graficznym – od materiałów drukowanych, przez branding, po fotografię. Pracuję z różnymi klientami, dbając o to, by każdy projekt był dopracowany, funkcjonalny i estetyczny.</p>109 110 <p>Poza pracą lubię tworzyć rzeczy „po swojemu" – eksperymentować z formą, kolorem i światłem. Zawsze stawiam na jakość i dobry kontakt z klientem.</p>111 </div>112 </div>113 <div class="about-image">114 <img src="image/kamila.jpg" alt="Kamila - Grafik" class="profile-image">115 </div>116 </div>117 </div>118 </section>119 120 <!-- Services Section -->121 <section id="services" class="services-section">122 <h2 class="section-title">Oferta</h2>123 124 <div class="services-grid">125 <!-- Identyfikacja wizualna -->126 <div class="service-card" data-image="image/logo-example.jpg">127 <div class="service-content">128 <div class="service-icon">129 <i class="fas fa-paint-brush"></i>130 </div>131 <h3>✅ Identyfikacja wizualna</h3>132 <ul class="service-list">133 <li>Logo</li>134 <li>Księga znaku (podstawowa / rozszerzona)</li>135 <li>Paleta kolorów, typografia</li>136 <li>Brandbook</li>137 </ul>138 </div>139 <div class="service-preview">140 <img src="image/logo-example.jpg" alt="Przykład logo" class="preview-image">141 </div>142 </div>143 144 <!-- Materiały do druku -->145 <div class="service-card" data-image="image/print-example.jpg">146 <div class="service-content">147 <div class="service-icon">148 <i class="fas fa-print"></i>149 </div>150 <h3>✅ Materiały do druku (DTP)</h3>151 <ul class="service-list">152 <li>Ulotki, plakaty, katalogi</li>153 <li>Wizytówki, teczki, broszury</li>154 <li>Skład i przygotowanie do druku (prepress)</li>155 <li>Reklama wielkoformatowa</li>156 <li>Branding samochodów</li>157 </ul>158 </div>159 <div class="service-preview">160 <img src="image/print-example.jpg" alt="Przykład materiałów drukowanych" class="preview-image">161 </div>162 </div>163 164 <!-- Grafika cyfrowa -->165 <div class="service-card" data-image="image/digital-example.jpg">166 <div class="service-content">167 <div class="service-icon">168 <i class="fas fa-mobile-alt"></i>169 </div>170 <h3>✅ Grafika cyfrowa</h3>171 <ul class="service-list">172 <li>Grafiki do social mediów (posty, stories, banery)</li>173 <li>Reklamy internetowe (Facebook Ads, Google Ads)</li>174 <li>Ilustracje, infografiki, ikony</li>175 </ul>176 </div>177 <div class="service-preview">178 <img src="image/digital-example.jpg" alt="Przykład grafiki cyfrowej" class="preview-image">179 </div>180 </div>181 182 <!-- Animacje -->183 <div class="service-card" data-image="image/animation-example.jpg">184 <div class="service-content">185 <div class="service-icon">186 <i class="fas fa-play-circle"></i>187 </div>188 <h3>✅ Animacje</h3>189 <ul class="service-list">190 <li>Proste animacje 2D (np. do social mediów, reklam, stron www)</li>191 <li>Animowane banery i prezentacje</li>192 <li>Ruchome elementy graficzne (np. logo, ilustracje)</li>193 <li>Formatowanie pod potrzeby różnych platform (MP4, GIF, HTML5)</li>194 </ul>195 </div>196 <div class="service-preview">197 <img src="image/animation-example.jpg" alt="Przykład animacji" class="preview-image">198 </div>199 </div>200 201 <!-- Inne usługi -->202 <div class="service-card" data-image="image/other-example.jpg">203 <div class="service-content">204 <div class="service-icon">205 <i class="fas fa-cogs"></i>206 </div>207 <h3>✅ Inne usługi graficzne</h3>208 <ul class="service-list">209 <li>Projekty niestandardowe na zamówienie</li>210 <li>Korekta gotowych materiałów</li>211 <li>Dostosowanie grafik do druku i internetu</li>212 <li>Szablony do PowerPointa i innych narzędzi</li>213 </ul>214 </div>215 <div class="service-preview">216 <img src="image/other-example.jpg" alt="Przykład innych usług" class="preview-image">217 </div>218 </div>219 220 <!-- Fotografia -->221 <div class="service-card photography-card">222 <div class="service-content">223 <div class="service-icon">224 <i class="fas fa-camera"></i>225 </div>226 <h3>📸 Fotografia</h3>227 <p>Zerknij na stronę fotograficzną</p>228 <button class="photography-cta-btn" onclick="window.location.href='photography.html'">229 <i class="fas fa-camera"></i>230 Przejdź do fotografii231 </button>232 </div>233 </div>234 </div>235 236 <!-- Package Deal Banner -->237 <div class="package-banner">238 <div class="package-content">239 <h3>W pakiecie taniej!</h3>240 <p><strong>Identyfikacja wizualna + sesja wizerunkowa</strong></p>241 <p>Kompleksowe rozwiązanie dla Twojej marki</p>242 <button class="package-btn" onclick="location.href='#contact'">Zapytaj o pakiet</button>243 </div>244 </div>245 </section>246 247 <!-- Process Section -->248 <section class="process-section">249 <h2 class="section-title">Proces</h2>250 <div class="process-steps">251 <div class="process-step">252 <div class="step-number">01</div>253 <h3>Poznanie potrzeb</h3>254 <p>Szczegółowa analiza Twoich potrzeb i celów biznesowych</p>255 </div>256 <div class="process-step">257 <div class="step-number">02</div>258 <h3>Koncepcja</h3>259 <p>Tworzenie wstępnych koncepcji i kierunków kreatywnych</p>260 </div>261 <div class="process-step">262 <div class="step-number">03</div>263 <h3>Projektowanie</h3>264 <p>Dopracowanie wybranej koncepcji i tworzenie finalnych projektów</p>265 </div>266 <div class="process-step">267 <div class="step-number">04</div>268 <h3>Wdrożenie</h3>269 <p>Przygotowanie plików do druku lub publikacji online</p>270 </div>271 </div>272 </section>273 274 <!-- Portfolio Section -->275 <section id="portfolio" class="portfolio-section">276 <h2 class="section-title">Wybrane Projekty</h2>277 <div class="portfolio-grid">278 <div class="portfolio-item">279 <img src="image/graphic-design/portfolio1.jpg" alt="Projekt 1">280 <div class="portfolio-overlay">281 <h3>Branding dla restauracji</h3>282 <p>Logo, menu, materiały promocyjne</p>283 </div>284 </div>285 <div class="portfolio-item">286 <img src="image/graphic-design/portfolio2.jpg" alt="Projekt 2">287 <div class="portfolio-overlay">288 <h3>Kampania social media</h3>289 <p>Seria postów i stories dla marki modowej</p>290 </div>291 </div>292 <div class="portfolio-item">293 <img src="image/graphic-design/portfolio3.jpg" alt="Projekt 3">294 <div class="portfolio-overlay">295 <h3>Katalog produktowy</h3>296 <p>40-stronicowy katalog dla marki kosmetycznej</p>297 </div>298 </div>299 </div>300 </section>301 302 <!-- Testimonials Section -->303 <section class="testimonials-section">304 <h2 class="section-title">Opinie Klientów</h2>305 <div class="testimonials-grid">306 <div class="testimonial-card">307 <div class="testimonial-content">308 <p>"Współpraca z Focus One to czysta przyjemność. Profesjonalne podejście i kreatywne rozwiązania."</p>309 </div>310 <div class="testimonial-author">311 <img src="image/graphic-design/client1.jpg" alt="Klient 1">312 <div class="author-info">313 <h4>Anna Kowalska</h4>314 <p>Właścicielka, Cafe Luna</p>315 </div>316 </div>317 </div>318 <div class="testimonial-card">319 <div class="testimonial-content">320 <p>"Świetne zrozumienie naszych potrzeb i terminowa realizacja. Polecam!"</p>321 </div>322 <div class="testimonial-author">323 <img src="image/graphic-design/client2.jpg" alt="Klient 2">324 <div class="author-info">325 <h4>Marek Nowak</h4>326 <p>CEO, TechStart</p>327 </div>328 </div>329 </div>330 </div>331 </section>332 333 <!-- Contact Section -->334 <section id="contact" class="contact-section">335 <div class="contact-container">336 <div class="contact-info">337 <h2>Rozpocznijmy współpracę</h2>338 <p>Opowiedz mi o swoim projekcie, a wspólnie stworzymy coś wyjątkowego</p>339 340 <div class="contact-details">341 <div class="contact-item">342 <i class="fas fa-map-marker-alt"></i>343 <div class="contact-item-content">344 <span class="contact-item-label">Lokalizacja</span>345 <span class="contact-item-value">Warszawa, Polska</span>346 </div>347 </div>348 349 <div class="contact-item">350 <i class="fas fa-phone"></i>351 <div class="contact-item-content">352 <span class="contact-item-label">Telefon</span>353 <span class="contact-item-value">793-332-323</span>354 </div>355 </div>356 357 <div class="contact-item">358 <i class="fas fa-envelope"></i>359 <div class="contact-item-content">360 <span class="contact-item-label">Email</span>361 <span class="contact-item-value">studio@focusone.pl</span>362 </div>363 </div>364 </div>365 366 <div class="social-media">367 <a href="https://www.facebook.com/focusonestudio/" target="_blank" class="social-link facebook">368 <i class="fab fa-facebook-f"></i>369 </a>370 <a href="https://www.instagram.com/_focusone/" target="_blank" class="social-link instagram">371 <i class="fab fa-instagram"></i>372 </a>373 </div>374 </div>375 376 <div class="map-container">377 <div class="map-overlay">378 <h3><i class="fas fa-map-marker-alt"></i> Znajdziesz nas w Warszawie</h3>379 <p>Działamy na terenie całej Warszawy i okolic. Skontaktuj się z nami, aby umówić spotkanie!</p>380 </div>381 <iframe 382 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d156388.35522860472!2d20.896111563677287!3d52.233033086741895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc669a869f01%3A0x72f0be2a88ead3fc!2sWarszawa!5e0!3m2!1spl!2spl!4v1697654832037!5m2!1spl!2spl"383 allowfullscreen=""384 loading="lazy"385 referrerpolicy="no-referrer-when-downgrade"386 title="Lokalizacja Focus One - Warszawa">387 </iframe>388 </div>389 </div>390 </section>391 </div>392 393 <script>394 // Falling Star Animation395 function createFallingStar() {396 const heroSection = document.querySelector('.hero-section');397 if (!heroSection) return;398 399 // Create the star container400 const starContainer = document.createElement('div');401 starContainer.style.position = 'absolute';402 starContainer.style.pointerEvents = 'none';403 404 // Create the main star405 const fallingStar = document.createElement('div');406 fallingStar.className = 'falling-star';407 408 // Create the trail409 const starTrail = document.createElement('div');410 starTrail.className = 'falling-star-trail';411 412 // Random starting position at the top413 const startX = Math.random() * (window.innerWidth * 0.8);414 const startY = -100;415 416 starContainer.style.left = startX + 'px';417 starContainer.style.top = startY + 'px';418 419 // Add random animation duration variation420 const duration = 2.5 + Math.random() * 1; // 2.5-3.5 seconds421 const animationDuration = duration + 's';422 423 fallingStar.style.animationDuration = animationDuration;424 starTrail.style.animationDuration = animationDuration;425 426 // Add random delay for more natural effect427 const delay = Math.random() * 0.5; // 0-0.5 seconds428 const animationDelay = delay + 's';429 430 fallingStar.style.animationDelay = animationDelay;431 starTrail.style.animationDelay = animationDelay;432 433 // Append star and trail to container434 starContainer.appendChild(fallingStar);435 starContainer.appendChild(starTrail);436 437 // Add container to hero section438 heroSection.appendChild(starContainer);439 440 // Remove the star after animation completes441 setTimeout(() => {442 if (starContainer.parentNode) {443 starContainer.parentNode.removeChild(starContainer);444 }445 }, (duration + delay) * 1000);446 }447 448 // Create falling star every 10 seconds449 function startFallingStars() {450 // Create first star immediately451 createFallingStar();452 453 // Then create one every 10 seconds454 setInterval(createFallingStar, 10000);455 }456 457 // Start the falling stars when page loads458 document.addEventListener('DOMContentLoaded', startFallingStars);459 </script>460</body>461</html>