Ei kuvausta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

service-9.html 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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>RF Technology</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
  14. 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"
  15. rel="stylesheet">
  16. <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  17. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  18. <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  19. <link href="assets/css/main.css" rel="stylesheet">
  20. <style>
  21. body {
  22. background-color: #ffffff;
  23. color: #333333;
  24. font-family: 'Arial', sans-serif;
  25. }
  26. .header-section {
  27. text-align: center;
  28. padding: 60px 20px;
  29. background-color: #f8f9fa;
  30. }
  31. .header-section h1 {
  32. font-size: 2.5rem;
  33. color: #0056b3;
  34. font-weight: bold;
  35. }
  36. .header-section p {
  37. font-size: 1rem;
  38. color: #666666;
  39. margin-top: 20px;
  40. }
  41. .section-title {
  42. color: #0056b3;
  43. font-size: 2rem;
  44. font-weight: bold;
  45. margin-bottom: 30px;
  46. text-align: center;
  47. }
  48. .divider {
  49. width: 60px;
  50. height: 4px;
  51. background-color: #0056b3;
  52. margin: 0 auto 30px;
  53. }
  54. .feature-box {
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. padding: 20px;
  59. background-color: #f8f9fa;
  60. border-radius: 8px;
  61. transition: 0.3s;
  62. }
  63. .feature-box:hover {
  64. background-color: #e9ecef;
  65. box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  66. }
  67. .feature-box img {
  68. width: 50px;
  69. margin-bottom: 15px;
  70. }
  71. .feature-box h4 {
  72. font-size: 1.25rem;
  73. color: #333333;
  74. margin-bottom: 10px;
  75. }
  76. .feature-box p {
  77. font-size: 0.9rem;
  78. color: #666666;
  79. text-align: center;
  80. }
  81. .cta-section {
  82. text-align: center;
  83. padding: 40px 20px;
  84. }
  85. .btn-primary {
  86. background-color: #0056b3;
  87. border-color: #0056b3;
  88. padding: 12px 25px;
  89. font-size: 1.1rem;
  90. transition: all 0.3s ease-in-out;
  91. }
  92. .btn-primary:hover {
  93. background-color: #003f88;
  94. border-color: #003f88;
  95. }
  96. .image-section img {
  97. max-width: 100%;
  98. border-radius: 10px;
  99. }
  100. .list-section ul {
  101. list-style: none;
  102. padding: 0;
  103. }
  104. .list-section ul li {
  105. display: flex;
  106. align-items: flex-start;
  107. margin-bottom: 15px;
  108. }
  109. .list-section ul li .icon {
  110. color: #0056b3;
  111. margin-right: 10px;
  112. font-size: 1.2rem;
  113. }
  114. </style>
  115. </head>
  116. <body>
  117. <header id="header" class="header d-flex align-items-center fixed-top">
  118. </header>
  119. <!-- Header Section -->
  120. <div class="header-section">
  121. <h1>Introduction to RF Technology</h1>
  122. <p>Discover the core of modern wireless communication systems through RF technology, enabling seamless
  123. transmission and reception of data, voice, and multimedia.</p>
  124. </div>
  125. <!-- Key Components Section -->
  126. <div class="container py-5">
  127. <h2 class="section-title">Key Components of RF Technology</h2>
  128. <div class="divider"></div>
  129. <div class="row g-4">
  130. <div class="col-md-4">
  131. <div class="feature-box">
  132. <img src="icon-rf-chip.png" alt="RF Chip">
  133. <h4>RF Chips</h4>
  134. <p>Miniaturized circuits that power wireless communication in modern devices.</p>
  135. </div>
  136. </div>
  137. <div class="col-md-4">
  138. <div class="feature-box">
  139. <img src="icon-rf-sensor.png" alt="RF Sensor">
  140. <h4>RF Sensors</h4>
  141. <p>Devices that detect and measure physical properties using RF signals.</p>
  142. </div>
  143. </div>
  144. <div class="col-md-4">
  145. <div class="feature-box">
  146. <img src="icon-rf-scanner.png" alt="RF Scanner">
  147. <h4>RF Scanners</h4>
  148. <p>Tools designed to read RFID tags and gather information wirelessly.</p>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <!-- Applications Section -->
  154. <div class="container py-5">
  155. <h2 class="section-title">Applications of RF Technology</h2>
  156. <div class="divider"></div>
  157. <div class="row align-items-center">
  158. <div class="col-md-6 image-section">
  159. <img src="rf-applications.png" alt="Applications of RF Technology">
  160. </div>
  161. <div class="col-md-6 list-section">
  162. <ul>
  163. <li>
  164. <span class="icon">✔️</span>
  165. <span><strong>Radar Systems:</strong> Backbone for navigation, surveillance, and aviation
  166. applications.</span>
  167. </li>
  168. <li>
  169. <span class="icon">✔️</span>
  170. <span><strong>IoT Ecosystems:</strong> Seamless connectivity for smart devices and data
  171. flow.</span>
  172. </li>
  173. <li>
  174. <span class="icon">✔️</span>
  175. <span><strong>Satellite Communications:</strong> RF amplifiers and filters enable global data
  176. exchange.</span>
  177. </li>
  178. <li>
  179. <span class="icon">✔️</span>
  180. <span><strong>Industrial Applications:</strong> Enhances medical imaging and industrial
  181. automation processes.</span>
  182. </li>
  183. </ul>
  184. </div>
  185. </div>
  186. </div>
  187. <!-- Call to Action Section -->
  188. <div class="cta-section">
  189. <h2 class="section-title">Learn More About RF Technology</h2>
  190. <p>Discover the latest advancements and solutions in RF systems. Stay ahead in wireless communication
  191. technology.</p>
  192. <button class="btn btn-primary">Explore Now</button>
  193. </div>
  194. <footer id="footer" class="footer">
  195. </footer>
  196. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  197. <!-- header and footer js files -->
  198. <script src="assets/js/navbar.js"></script>
  199. <script src="assets/js/footer.js"></script>
  200. </body>
  201. </html>