<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Berlin - Web Development Agency</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap">
<style>
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #f9f9f9;
}
header {
background-color: #1e2a38;
color: #fff;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 1rem;
font-weight: 600;
}
.cta-button {
background-color: #9461e3;
color: #fff;
border: none;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
background-color: #e7dbf9;
}
.hero-content {
max-width: 50%;
}
.hero-content h1 {
font-size: 2.5rem;
color: #1e2a38;
}
.hero-content p {
font-size: 1.2rem;
color: #1e2a38;
}
.hero img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.pricing {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 2rem;
gap: 2rem;
}
.pricing-plan {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
overflow: hidden;
margin-bottom: 8rem;
}
.pricing-plan img {
width: 100%;
height: 200px;
object-fit: cover;
}
.pricing-plan h3 {
font-size: 1.5rem;
margin: 1rem 0;
color: #1e2a38;
}
.pricing-plan p.price {
font-size: 1.5rem;
font-weight: 600;
color: #9461e3;
}
.pricing-plan p {
font-size: 1rem;
color: #666;
padding: 0 1rem;
}
.why-choose-us {
display: flex;
justify-content: space-around;
padding: 2rem;
background-color: #fff;
}
.why-choose-us-item {
text-align: center;
width: 30%;
}
.why-choose-us-item img {
width: 80%;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.why-choose-us-item h3 {
font-size: 1.5rem;
color: #1e2a38;
margin-top: 1rem;
}
.why-choose-us-item p {
color: #666;
}
.faq {
padding: 2rem;
background-color: #f1f1f1;
}
.faq h3 {
font-size: 2rem;
color: #1e2a38;
margin-bottom: 1rem;
}
.faq div {
margin-bottom: 1rem;
}
.faq strong {
display: block;
font-size: 1.2rem;
color: #333;
}
.footer {
background-color: #1e2a38;
color: #fff;
padding: 2rem;
text-align: center;
}
.footer-cta {
margin-bottom: 1.5rem;
}
.footer-cta p {
margin: 0;
font-size: 1.2rem;
}
.footer-info p {
margin: 0.5rem 0;
}
.footer-info a {
color: #9461e3;
text-decoration: none;
}
.footer input {
padding: 0.5rem;
margin: 0.5rem;
border: none;
border-radius: 5px;
}
.footer button {
padding: 0.5rem 1rem;
background-color: #9461e3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 2rem;
border-radius: 10px;
width: 80%;
max-width: 800px;
position: relative;
}
.modal-content h2 {
margin-top: 0;
}
.modal-content p {
margin: 1rem 0;
}
.modal-content p:last-of-type {
margin-bottom: 0;
}
.close {
position: absolute;
top: 10px;
right: 20px;
font-size: 1.5rem;
cursor: pointer;
}
form input,
form textarea {
width: calc(100% - 2rem);
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
padding: 0.5rem 1rem;
background-color: #9461e3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="logo">Your Berlin</div>
<nav>
<a href="#home">Home</a>
<a href="#services" id="exploreServicesButton">Explore Services</a>
<a href="#contact" id="contactButton">Contact</a>
</nav>
<button class="cta-button" id="getStartedButton">Get Started</button>
</header>
<section class="hero">
<div class="hero-content">
<h1>Transform Your Digital Presence</h1>
<p>We create stunning, high-performing websites tailored to your business needs.</p>
<button class="cta-button" id="getStartedButton">Get Started</button>
</div>
<img src="https://image.freepik.com/free-photo/creative-web-development-graphic_1150-18562.jpg" alt="Hero Image">
</section>
<h1 style="text-align: center;">Why Choose Us?</h1>
<section class="why-choose-us">
<div class="why-choose-us-item">
<img src="https://image.freepik.com/free-photo/web-developer-working-new-project_1150-14128.jpg" alt="Why Choose Us Image 1">
<h3>Expert Team</h3>
<p>Our team consists of experienced professionals who are experts in their fields.</p>
</div>
<div class="why-choose-us-item">
<img src="https://image.freepik.com/free-photo/web-developer-working-on-a-project_1150-17984.jpg" alt="Why Choose Us Image 2">
<h3>Custom Solutions</h3>
<p>We provide tailored solutions that fit your specific business needs and goals.</p>
</div>
<div class="why-choose-us-item">
<img src="https://image.freepik.com/free-photo/businessman-working-computer_1150-18367.jpg" alt="Why Choose Us Image 3">
<h3>Top Quality</h3>
<p>Our focus is on delivering high-quality, responsive, and user-friendly websites.</p>
</div>
</section>
<h1 style="text-align: center;">Pricing Plans</h1>
<section class="pricing">
<div class="pricing-plan">
<img src="https://image.freepik.com/free-photo/technology-development-concept_1150-25774.jpg" alt="Basic Plan Image">
<h3>Basic Plan</h3>
<p class="price">$499</p>
<p>Perfect for small projects and startups. Includes a basic website with essential features.</p>
<button class="cta-button" onclick="openModal(modals.leadForm)">Get Started</button>
</div>
<div class="pricing-plan">
<img src="https://image.freepik.com/free-photo/team-working-computer_1150-19789.jpg" alt="Standard Plan Image">
<h3>Standard Plan</h3>
<p class="price">$999</p>
<p>Ideal for growing businesses. Includes additional features and customization options.</p>
<button class="cta-button" onclick="openModal(modals.leadForm)">Get Started</button>
</div>
<div class="pricing-plan">
<img src="https://image.freepik.com/free-photo/businessman-working-computer_1150-19288.jpg" alt="Premium Plan Image">
<h3>Premium Plan</h3>
<p class="price">$1999</p>
<p>Our top-tier package with advanced features and full customization for enterprises.</p>
<button class="cta-button" onclick="openModal(modals.leadForm)">Get Started</button>
</div>
</section>
<main>
<div class="faq">
<h3>Frequently Asked Questions</h3>
<div>
<strong>Q1: What services do you offer?</strong>
<p>A1: We specialize in web development, including website design, development, and maintenance. We also offer digital marketing services.</p>
</div>
<div>
<strong>Q2: How long does it take to build a website?</strong>
<p>A2: The timeline varies depending on the complexity of the project. On average, it takes 4 to 8 weeks to complete a website.</p>
</div>
<div>
<strong>Q3: Do you provide ongoing support?</strong>
<p>A3: Yes, we offer ongoing support and maintenance services to ensure your website runs smoothly.</p>
</div>
<div>
<strong>Q4: Can I update my website content myself?</strong>
<p>A4: Yes, we use user-friendly content management systems (CMS) that allow you to easily update your website content without technical knowledge.</p>
</div>
<div>
<strong>Q5: What is your pricing structure?</strong>
<p>A5: Our pricing is based on the complexity and features of the website. We offer several plans to fit different needs and budgets.</p>
</div>
<div>
<strong>Q6: How do I get started?</strong>
<p>A6: Click the "Get Started" button to fill out a lead collection form, and we will contact you to discuss your project requirements.</p>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-cta">
<p>Join Our Newsletter</p>
<input type="email" placeholder="Enter your email">
<button class="cta-button">Sign Up</button>
</div>
<div class="footer-info">
<p>
<a href="#" id="tosLink">Terms of Service</a> |
<a href="#" id="privacyLink">Privacy Policy</a>
</p>
<p>© 2024 Your Berlin. All rights reserved.</p>
</div>
</footer>
<div id="leadFormModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Lead Collection Form</h2>
<form>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="company" placeholder="Company">
<input type="tel" name="phone" placeholder="Phone">
<textarea name="question" placeholder="Your Question" rows="4"></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div id="tosModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Terms of Service</h2>
<p><strong>1. Introduction</strong></p>
<p>Welcome to Your Berlin. By using our website and services, you agree to comply with and be bound by these Terms of Service.</p>
<p><strong>2. Services</strong></p>
<p>We provide web development and related services as described on our website. We reserve the right to modify our services at any time.</p>
<p><strong>3. User Obligations</strong></p>
<p>Users are responsible for maintaining the confidentiality of their account information and for all activities under their account. You agree to use our services only for lawful purposes.</p>
<p><strong>4. Payment Terms</strong></p>
<p>All fees for our services are as specified on our website. Payment is due as outlined in the service agreement or invoice.</p>
<p><strong>5. Limitation of Liability</strong></p>
<p>We are not liable for any indirect, incidental, or consequential damages arising from the use of our services. Our total liability is limited to the amount paid for the service in question.</p>
<p><strong>6. Termination</strong></p>
<p>We reserve the right to terminate or suspend access to our services at our discretion, without notice, for conduct that we believe violates these terms or is harmful to other users.</p>
<p><strong>7. Governing Law</strong></p>
<p>These Terms of Service are governed by and construed in accordance with the laws of Germany.</p>
<p><strong>8. Changes</strong></p>
<p>We may update these Terms of Service from time to time. Any changes will be posted on this page.</p>
<p><strong>9. Contact Information</strong></p>
<p>If you have any questions about these Terms of Service, please contact us at:</p>
<p>Address: Bamberger Str. 27, 10779 Berlin, Germany</p>
</div>
</div>
<div id="privacyModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Privacy Policy</h2>
<p><strong>1. Introduction</strong></p>
<p>Your Berlin ("we," "us," "our") is committed to protecting your privacy. This Privacy Policy outlines how we collect, use, and protect your personal data.</p>
<p><strong>2. Data Collection</strong></p>
<p>We collect personal data that you provide directly, such as when you fill out forms or contact us. We may also collect data automatically through the use of cookies and similar technologies.</p>
<p><strong>3. Use of Data</strong></p>
<p>Your personal data may be used to provide and improve our services, communicate with you, and for marketing purposes. We do not share your data with third parties except as necessary to provide our services or as required by law.</p>
<p><strong>4. Data Security</strong></p>
<p>We implement appropriate security measures to protect your data from unauthorized access, disclosure, alteration, or destruction. However, no method of transmission over the internet is 100% secure.</p>
<p><strong>5. Your Rights</strong></p>
<p>You have the right to access, correct, or delete your personal information. You may also object to or restrict the processing of your information. To exercise these rights, please contact us using the information provided below.</p>
<p><strong>6. Changes to Privacy Policy</strong></p>
<p>We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated effective date. Your continued use of our website and services after any changes constitutes your acceptance of the revised policy.</p>
<p><strong>7. Contact Us</strong></p>
<p>If you have any questions or concerns about this Privacy Policy or our data practices, please contact us at:</p>
<p>Address: Bamberger Str. 27, 10779 Berlin, Germany</p>
</div>
</div>
<script>
var modals = {
leadForm: document.getElementById('leadFormModal'),
tos: document.getElementById('tosModal'),
privacy: document.getElementById('privacyModal')
};
var openModal = function(modal) {
modal.style.display = 'block';
};
var closeModal = function(modal) {
modal.style.display = 'none';
};
document.getElementById('getStartedButton').onclick = function() {
openModal(modals.leadForm);
};
document.getElementById('contactButton').onclick = function() {
openModal(modals.leadForm);
};
document.getElementById('exploreServicesButton').onclick = function() {
openModal(modals.leadForm);
};
document.getElementById('tosLink').onclick = function() {
openModal(modals.tos);
};
document.getElementById('privacyLink').onclick = function() {
openModal(modals.privacy);
};
var closeButtons = document.querySelectorAll('.close');
closeButtons.forEach(function(btn) {
btn.onclick = function() {
Object.values(modals).forEach(function(modal) {
closeModal(modal);
});
};
});
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
closeModal(modals.leadForm);
closeModal(modals.tos);
closeModal(modals.privacy);
}
};
</script>
</body>
</html>