Blexxx/deepsite-project
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Our Services - OrangeWork</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <style>10 .service-card:hover {11 transform: translateY(-5px);12 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);13 }14 </style>15</head>16<body class="font-sans antialiased bg-gray-50">17 <!-- Navigation -->18 <nav class="bg-white shadow-md py-4 px-6 fixed w-full z-10">19 <div class="max-w-6xl mx-auto flex justify-between items-center">20 <div class="flex items-center">21 <a href="index.html" class="text-2xl font-bold text-orange-500">Orange<span class="text-gray-800">Work</span></a>22 </div>23 <div class="hidden md:flex space-x-8">24 <a href="index.html" class="nav-link text-gray-600 font-medium">Home</a>25 <a href="services.html" class="nav-link text-orange-500 font-medium">Services</a>26 <a href="#" class="nav-link text-gray-600 font-medium">Projects</a>27 <a href="#" class="nav-link text-gray-600 font-medium">About</a>28 <a href="#" class="nav-link text-gray-600 font-medium">Contact</a>29 </div>30 <button class="md:hidden text-gray-800">31 <i class="fas fa-bars text-xl"></i>32 </button>33 </div>34 </nav>35 36 <!-- Services Header -->37 <section class="pt-32 pb-20 px-6 bg-white">38 <div class="max-w-6xl mx-auto text-center">39 <h1 class="text-4xl font-bold mb-6">Our Services</h1>40 <p class="text-xl text-gray-600 max-w-3xl mx-auto">We offer comprehensive digital solutions tailored to your business needs.</p>41 </div>42 </section>43 44 <!-- Services Grid -->45 <section class="py-16 px-6">46 <div class="max-w-6xl mx-auto">47 <div class="grid md:grid-cols-2 gap-12">48 <!-- Service 1 -->49 <div class="bg-white p-8 rounded-lg shadow-md service-card transition duration-300">50 <div class="flex items-center mb-6">51 <div class="bg-orange-100 p-3 rounded-full mr-4">52 <i class="fas fa-code text-orange-500 text-2xl"></i>53 </div>54 <h3 class="text-2xl font-bold">Web Development</h3>55 </div>56 <p class="text-gray-600 mb-6">We create responsive, high-performance websites that deliver exceptional user experiences across all devices.</p>57 <ul class="space-y-2 text-gray-600">58 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> Custom website design</li>59 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> E-commerce solutions</li>60 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> CMS integration</li>61 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> API development</li>62 </ul>63 </div>64 65 <!-- Service 2 -->66 <div class="bg-white p-8 rounded-lg shadow-md service-card transition duration-300">67 <div class="flex items-center mb-6">68 <div class="bg-orange-100 p-3 rounded-full mr-4">69 <i class="fas fa-mobile-alt text-orange-500 text-2xl"></i>70 </div>71 <h3 class="text-2xl font-bold">Mobile App Development</h3>72 </div>73 <p class="text-gray-600 mb-6">We build native and cross-platform mobile applications that engage users and drive business growth.</p>74 <ul class="space-y-2 text-gray-600">75 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> iOS & Android apps</li>76 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> React Native development</li>77 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> UI/UX design</li>78 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> App store optimization</li>79 </ul>80 </div>81 82 <!-- Service 3 -->83 <div class="bg-white p-8 rounded-lg shadow-md service-card transition duration-300">84 <div class="flex items-center mb-6">85 <div class="bg-orange-100 p-3 rounded-full mr-4">86 <i class="fas fa-chart-line text-orange-500 text-2xl"></i>87 </div>88 <h3 class="text-2xl font-bold">Digital Marketing</h3>89 </div>90 <p class="text-gray-600 mb-6">We develop data-driven marketing strategies to increase your online visibility and customer engagement.</p>91 <ul class="space-y-2 text-gray-600">92 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> SEO optimization</li>93 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> Social media marketing</li>94 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> Content strategy</li>95 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> PPC advertising</li>96 </ul>97 </div>98 99 <!-- Service 4 -->100 <div class="bg-white p-8 rounded-lg shadow-md service-card transition duration-300">101 <div class="flex items-center mb-6">102 <div class="bg-orange-100 p-3 rounded-full mr-4">103 <i class="fas fa-server text-orange-500 text-2xl"></i>104 </div>105 <h3 class="text-2xl font-bold">Cloud Solutions</h3>106 </div>107 <p class="text-gray-600 mb-6">We provide scalable cloud infrastructure and services to support your business growth.</p>108 <ul class="space-y-2 text-gray-600">109 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> Cloud migration</li>110 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> AWS/Azure solutions</li>111 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> Database management</li>112 <li class="flex items-center"><i class="fas fa-check text-orange-500 mr-2"></i> DevOps services</li>113 </ul>114 </div>115 </div>116 </div>117 </section>118 119 <!-- CTA Section -->120 <section class="py-20 px-6 bg-orange-500 text-white">121 <div class="max-w-6xl mx-auto text-center">122 <h2 class="text-3xl font-bold mb-6">Ready to start your project?</h2>123 <p class="text-xl mb-8 max-w-3xl mx-auto">Let's discuss how we can help you achieve your business goals with our digital solutions.</p>124 <a href="#" class="bg-white text-orange-500 font-bold px-8 py-3 rounded-md hover:bg-gray-100 transition inline-block">Get in Touch</a>125 </div>126 </section>127 128 <!-- Footer -->129 <footer class="bg-gray-800 text-white py-12 px-6">130 <div class="max-w-6xl mx-auto">131 <div class="grid md:grid-cols-4 gap-8">132 <div>133 <h3 class="text-xl font-bold mb-4">OrangeWork</h3>134 <p class="text-gray-400">Innovative digital solutions for modern businesses.</p>135 </div>136 <div>137 <h4 class="font-bold mb-4">Quick Links</h4>138 <ul class="space-y-2">139 <li><a href="index.html" class="text-gray-400 hover:text-orange-500 transition">Home</a></li>140 <li><a href="services.html" class="text-gray-400 hover:text-orange-500 transition">Services</a></li>141 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Projects</a></li>142 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">About Us</a></li>143 </ul>144 </div>145 <div>146 <h4 class="font-bold mb-4">Contact</h4>147 <ul class="space-y-2 text-gray-400">148 <li>info@orangework.de</li>149 <li>+49 123 456 789</li>150 <li>Berlin, Germany</li>151 </ul>152 </div>153 <div>154 <h4 class="font-bold mb-4">Follow Us</h4>155 <div class="flex space-x-4">156 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-facebook-f"></i></a>157 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-twitter"></i></a>158 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-linkedin-in"></i></a>159 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-instagram"></i></a>160 </div>161 </div>162 </div>163 <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">164 <p>© 2023 OrangeWork. All rights reserved.</p>165 </div>166 </div>167 </footer>168 169 <script>170 // Mobile menu toggle would go here171 document.addEventListener('DOMContentLoaded', function() {172 // Any initialization scripts173 });174 </script>175</body>176</html>