暂无描述
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

service-13.html 8.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  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>Smart Home Automation</title>
  7. <!-- Favicons -->
  8. <link href="assets/img/favicon.png" rel="icon">
  9. <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  10. <!-- Fonts -->
  11. <link href="https://fonts.googleapis.com" rel="preconnect">
  12. <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  13. <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  14. <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  15. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  16. <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  17. <link href="assets/css/main.css" rel="stylesheet">
  18. <style>
  19. body {
  20. background-color: #ffffff;
  21. color: #333333;
  22. font-family: 'Arial', sans-serif;
  23. }
  24. .hero-section {
  25. background: linear-gradient(to right, #0056b3, #007bff);
  26. color: #ffffff;
  27. padding: 60px 20px;
  28. text-align: center;
  29. border-bottom: 4px solid #0056b3;
  30. }
  31. .hero-section h1 {
  32. font-size: 2.8rem;
  33. font-weight: bold;
  34. }
  35. .hero-section p {
  36. font-size: 1.2rem;
  37. margin-top: 20px;
  38. }
  39. .section-title {
  40. color: #0056b3;
  41. font-size: 2rem;
  42. font-weight: bold;
  43. margin-top: 40px;
  44. text-align: center;
  45. }
  46. .divider {
  47. width: 80px;
  48. height: 4px;
  49. background-color: #0056b3;
  50. margin: 15px auto 30px;
  51. border-radius: 2px;
  52. }
  53. .feature-list {
  54. list-style: none;
  55. padding: 0;
  56. font-size: 1rem;
  57. }
  58. .feature-list li {
  59. display: flex;
  60. align-items: center;
  61. gap: 10px;
  62. margin-bottom: 10px;
  63. }
  64. .feature-list li::before {
  65. content: '➔';
  66. font-size: 1.2rem;
  67. color: #0056b3;
  68. }
  69. .image-box img {
  70. max-width: 100%;
  71. border-radius: 10px;
  72. }
  73. .feature-card {
  74. background-color: #f8f9fa;
  75. padding: 20px;
  76. border-radius: 8px;
  77. text-align: center;
  78. transition: all 0.3s ease;
  79. border: 1px solid #eaeaea;
  80. }
  81. .feature-card:hover {
  82. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  83. transform: translateY(-5px);
  84. }
  85. .cta-section {
  86. background-color: #f8f9fa;
  87. padding: 40px 20px;
  88. text-align: center;
  89. }
  90. .cta-section h2 {
  91. color: #0056b3;
  92. font-size: 2rem;
  93. font-weight: bold;
  94. }
  95. .cta-section p {
  96. font-size: 1.1rem;
  97. color: #666666;
  98. margin-bottom: 20px;
  99. }
  100. .btn-primary {
  101. background-color: #0056b3;
  102. border-color: #0056b3;
  103. font-size: 1.2rem;
  104. padding: 12px 30px;
  105. border-radius: 50px;
  106. transition: all 0.3s ease;
  107. }
  108. .btn-primary:hover {
  109. background-color: #004092;
  110. border-color: #004092;
  111. }
  112. </style>
  113. </head>
  114. <body>
  115. <header id="header" class="header d-flex align-items-center fixed-top">
  116. </header>
  117. <!-- Hero Section -->
  118. <div class="hero-section">
  119. <h1>Smart Home Living</h1>
  120. <p>Experience intelligent, efficient, and secure living with ADM’s cutting-edge smart home automation solutions.</p>
  121. </div>
  122. <!-- Essence Section -->
  123. <div class="container py-5">
  124. <h2 class="section-title">The Essence of Home Automation</h2>
  125. <div class="divider"></div>
  126. <p>Our advanced smart home solutions integrate IoT technologies to create a seamless living experience. Control your home environment with ease and efficiency.</p>
  127. <div class="row g-4">
  128. <div class="col-md-3">
  129. <div class="feature-card">
  130. <h4>Smart Lighting</h4>
  131. <p>Adjusts based on your preferences and occupancy for energy efficiency.</p>
  132. </div>
  133. </div>
  134. <div class="col-md-3">
  135. <div class="feature-card">
  136. <h4>Climate Control</h4>
  137. <p>Smart thermostats and HVAC systems to ensure optimal comfort.</p>
  138. </div>
  139. </div>
  140. <div class="col-md-3">
  141. <div class="feature-card">
  142. <h4>Security Systems</h4>
  143. <p>Advanced surveillance and access control for complete peace of mind.</p>
  144. </div>
  145. </div>
  146. <div class="col-md-3">
  147. <div class="feature-card">
  148. <h4>Entertainment</h4>
  149. <p>Integrated audio and visual systems for immersive experiences.</p>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <!-- Smart Home Integration Section -->
  155. <div class="container py-5">
  156. <h2 class="section-title">Convenience with Smart Home Integration</h2>
  157. <div class="divider"></div>
  158. <p>Our systems simplify your daily routines by integrating various household devices into a single, cohesive ecosystem.</p>
  159. <ul class="feature-list">
  160. <li>Unified control via smartphone, tablet, or voice commands.</li>
  161. <li>Customizable scenes for personalized home automation setups.</li>
  162. <li>Remote access to monitor and control your home from anywhere.</li>
  163. <li>Voice assistant integration with Alexa, Google Assistant, and Siri.</li>
  164. </ul>
  165. </div>
  166. <!-- Security Section -->
  167. <div class="container py-5">
  168. <h2 class="section-title">Uncompromised Security with Intelligent Surveillance</h2>
  169. <div class="divider"></div>
  170. <div class="row align-items-center">
  171. <div class="col-md-6">
  172. <ul class="feature-list">
  173. <li>Surveillance cameras with night vision and motion detection.</li>
  174. <li>Access control through smart locks and video doorbells.</li>
  175. <li>Intrusion detection systems with immediate alerts.</li>
  176. <li>Emergency response integration for quick assistance.</li>
  177. </ul>
  178. </div>
  179. <div class="col-md-6 text-center">
  180. <div class="image-box">
  181. <img src="security-system.png" alt="Security System">
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. <!-- Entertainment Section -->
  187. <div class="container py-5">
  188. <h2 class="section-title">Immersive Entertainment with Integrated Systems</h2>
  189. <div class="divider"></div>
  190. <p>Our smart home automation solutions transform your living spaces into hubs of entertainment.</p>
  191. <ul class="feature-list">
  192. <li>Multi-room audio for synchronized music throughout your home.</li>
  193. <li>Home theater systems with surround sound and high-definition projectors.</li>
  194. <li>Smart TVs with integrated streaming and gaming interfaces.</li>
  195. <li>Voice control for seamless entertainment management.</li>
  196. </ul>
  197. </div>
  198. <!-- Call to Action Section -->
  199. <div class="cta-section">
  200. <h2>Transform Your Home Today</h2>
  201. <p>Discover how ADM’s smart home automation solutions can revolutionize your living experience. Contact us now!</p>
  202. <button class="btn btn-primary">Get Started</button>
  203. </div>
  204. <footer id="footer" class="footer">
  205. </footer>
  206. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  207. <!-- header and footer js files -->
  208. <script src="assets/js/navbar.js"></script>
  209. <script src="assets/js/footer.js"></script>
  210. </body>
  211. </html>