Jacek Pyziak
ed4ddfd8d8
- Created index.html for the Google Ads campaign landing page with structured sections including navigation, hero, benefits, channels, pricing, and contact information. - Implemented script.js for mobile menu toggle, scroll animations, budget calculator, and smooth scrolling for anchor links. - Developed style.css for styling the landing page, ensuring a modern and responsive layout with animations and hover effects.
251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kampanie Google Ads - Project-Pro | Marketing w wersji PRO</title>
|
|
<meta name="description" content="Profesjonalne prowadzenie kampanii Google Ads. Skuteczna reklama w wyszukiwarce, Google Zakupy, YouTube, Display Network. Oferta od Project-Pro Rzeszów.">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav class="nav">
|
|
<div class="nav__inner">
|
|
<div class="nav__logo"><img src="https://www.project-pro.pl/upload/filemanager/Project-Design/logos/project-pro/logo-color.svg" alt="Project-Pro"></div>
|
|
<ul class="nav__links">
|
|
<li><a href="#dlaczego">Dlaczego Google Ads?</a></li>
|
|
<li><a href="#kanaly">Kanały reklamy</a></li>
|
|
<li><a href="#cennik">Cennik</a></li>
|
|
<li><a href="#kontakt" class="nav__cta">Kontakt</a></li>
|
|
</ul>
|
|
<div class="nav__hamburger">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero__inner">
|
|
<div class="hero__text">
|
|
<p class="hero__subtitle">Project-Pro • marketing w wersji PRO</p>
|
|
<h1>Kampanie Google Ads</h1>
|
|
<p>Docieraj do klientów dokładnie wtedy, gdy szukają Twoich produktów lub usług. Skuteczna reklama w Google z natychmiastowymi efektami.</p>
|
|
<div class="hero__buttons">
|
|
<a href="#cennik" class="btn btn--white">Zobacz cennik</a>
|
|
<a href="#kontakt" class="btn btn--outline">Skontaktuj się</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero__visual">
|
|
<div class="hero__icon-grid">
|
|
<div class="hero__icon-card">
|
|
<div class="icon">🎯</div>
|
|
<span>Trafność</span>
|
|
</div>
|
|
<div class="hero__icon-card">
|
|
<div class="icon">📍</div>
|
|
<span>Lokalizacja</span>
|
|
</div>
|
|
<div class="hero__icon-card">
|
|
<div class="icon">📈</div>
|
|
<span>Mierzalność</span>
|
|
</div>
|
|
<div class="hero__icon-card">
|
|
<div class="icon">⚡</div>
|
|
<span>Skuteczność</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DLACZEGO GOOGLE ADS -->
|
|
<section id="dlaczego" class="section">
|
|
<div class="section__inner">
|
|
<div class="section__header fade-in">
|
|
<h2>Dlaczego Google Ads?</h2>
|
|
<p>Reklama w Google to jeden z najskuteczniejszych sposobów na pozyskanie nowych klientów.</p>
|
|
</div>
|
|
<div class="why-grid">
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">🎯</div>
|
|
<h3>Trafność</h3>
|
|
<p>Ty podejmujesz decyzję komu, gdzie i kiedy wyświetli się Twoja reklama. Pełna kontrola nad kampanią.</p>
|
|
</div>
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">📍</div>
|
|
<h3>Lokalizacja</h3>
|
|
<p>Targetowanie geolokalizacyjne pozwala wyświetlać reklamy Google Ads wyłącznie klientom z danej okolicy.</p>
|
|
</div>
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">📈</div>
|
|
<h3>Mierzalność</h3>
|
|
<p>Dzięki statystykom możesz badać skuteczność swoich działań i zachowania klientów.</p>
|
|
</div>
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">⚡</div>
|
|
<h3>Skuteczność</h3>
|
|
<p>Włączenie kampanii powoduje natychmiastowe osiąganie założonych celów.</p>
|
|
</div>
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">💰</div>
|
|
<h3>Budżet dzienny</h3>
|
|
<p>Sam ustalasz dzienny budżet reklamowy. Masz pełną kontrolę nad wydatkami na kampanię.</p>
|
|
</div>
|
|
<div class="why-card fade-in">
|
|
<div class="why-card__icon">🚀</div>
|
|
<h3>Szybkie efekty</h3>
|
|
<p>Reklama zaczyna działać natychmiast po uruchomieniu kampanii — bez czekania na efekty pozycjonowania.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- KANALY REKLAMY -->
|
|
<section id="kanaly" class="section section--alt">
|
|
<div class="section__inner">
|
|
<div class="section__header fade-in">
|
|
<h2>Kanały reklamy</h2>
|
|
<p>Wykorzystujemy pełen potencjał ekosystemu Google, dobierając kanały do Twojego biznesu.</p>
|
|
</div>
|
|
<div class="channels-grid">
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">🔍</div>
|
|
<h3>Linki sponsorowane</h3>
|
|
<p>Sieć wyszukiwania / Search</p>
|
|
</div>
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">🛒</div>
|
|
<h3>Google Zakupy</h3>
|
|
<p>Sieć wyszukiwania / Shopping</p>
|
|
</div>
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">💡</div>
|
|
<h3>Discovery</h3>
|
|
<p>Sieć reklamowa / Discovery</p>
|
|
</div>
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">🔁</div>
|
|
<h3>Remarketing</h3>
|
|
<p>Ponowne dotarcie do klientów</p>
|
|
</div>
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">💻</div>
|
|
<h3>Display Network</h3>
|
|
<p>Sieć reklamowa / Display</p>
|
|
</div>
|
|
<div class="channel-card fade-in">
|
|
<div class="icon">▶️</div>
|
|
<h3>YouTube</h3>
|
|
<p>Sieć wideo / YouTube</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENNIK -->
|
|
<section id="cennik" class="section">
|
|
<div class="section__inner">
|
|
<div class="section__header fade-in">
|
|
<h2>Ile to kosztuje?</h2>
|
|
<p>Przejrzyste zasady rozliczenia. Płacisz procent od budżetu reklamowego.</p>
|
|
</div>
|
|
<div class="pricing-box fade-in">
|
|
<div class="pricing-box__header">
|
|
<h3>Prowadzenie kampanii Google Ads</h3>
|
|
<div class="pricing-box__price">10% <small>budżetu</small></div>
|
|
<div class="pricing-box__min-badge">min. 800 zł netto / miesiąc</div>
|
|
</div>
|
|
<div class="pricing-box__calculator">
|
|
<h4>Oblicz koszt prowadzenia kampanii</h4>
|
|
<label for="budgetSlider">Miesięczny budżet reklamowy: <strong id="budgetValue">3 000 zł</strong></label>
|
|
<input type="range" id="budgetSlider" min="2000" max="20000" step="500" value="3000">
|
|
<div class="calculator__result">
|
|
<div class="calculator__result-item">
|
|
<span>Budżet reklamowy</span>
|
|
<strong id="calcBudget">3 000 zł</strong>
|
|
</div>
|
|
<div class="calculator__result-item">
|
|
<span>Koszt prowadzenia (10%)</span>
|
|
<strong id="calcFee">800 zł</strong>
|
|
</div>
|
|
<div class="calculator__result-item calculator__result-item--total">
|
|
<span>Razem miesięcznie</span>
|
|
<strong id="calcTotal">3 800 zł</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-box__body">
|
|
<ul class="pricing-box__features">
|
|
<li>Określenie strategii kampanii</li>
|
|
<li>Dobór priorytetowych kampanii</li>
|
|
<li>Sieć wyszukiwania / Search</li>
|
|
<li>Sieć wyszukiwania / Google Zakupy</li>
|
|
<li>Sieć reklamowa / Display</li>
|
|
<li>Sieć reklamowa / Discovery</li>
|
|
<li>Sieć wideo / YouTube</li>
|
|
<li>Harmonogram wyświetleń</li>
|
|
<li>Dobór słów kluczowych</li>
|
|
<li>Stworzenie tekstów reklam</li>
|
|
<li>Stworzenie rozszerzeń reklamy</li>
|
|
<li>Raport wyników kampanii</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- KONTAKT -->
|
|
<section id="kontakt" class="section section--alt">
|
|
<div class="section__inner">
|
|
<div class="section__header fade-in">
|
|
<h2>Skontaktuj się z nami</h2>
|
|
<p>Porozmawiajmy o Twojej kampanii Google Ads.</p>
|
|
</div>
|
|
<div class="contact-cards fade-in">
|
|
<a href="tel:+48530755774" class="contact-card">
|
|
<div class="contact-card__icon">📞</div>
|
|
<strong>Telefon</strong>
|
|
<span>530 755 774</span>
|
|
</a>
|
|
<a href="mailto:biuro@project-pro.pl" class="contact-card">
|
|
<div class="contact-card__icon">✉</div>
|
|
<strong>Email</strong>
|
|
<span>biuro@project-pro.pl</span>
|
|
</a>
|
|
<div class="contact-card">
|
|
<div class="contact-card__icon">🏠</div>
|
|
<strong>Adres</strong>
|
|
<span>ul. Krakowska 156/104<br>35-506 Rzeszów</span>
|
|
</div>
|
|
<a href="https://www.project-pro.pl" target="_blank" class="contact-card">
|
|
<div class="contact-card__icon">🌐</div>
|
|
<strong>Strona www</strong>
|
|
<span>project-pro.pl</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="footer__inner">
|
|
<div class="footer__logo"><img src="https://www.project-pro.pl/upload/filemanager/Project-Design/logos/project-pro/logo-color.svg" alt="Project-Pro" class="footer__logo-img"></div>
|
|
<ul class="footer__links">
|
|
<li><a href="https://www.project-pro.pl">Strona główna</a></li>
|
|
<li><a href="tel:+48530755774">530 755 774</a></li>
|
|
<li><a href="mailto:biuro@project-pro.pl">biuro@project-pro.pl</a></li>
|
|
</ul>
|
|
<div class="footer__copy">
|
|
© Project-Pro | ul. Krakowska 156/104, 35-506 Rzeszów | NIP: PL 5170167517
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|