Add product image

1 files changed, 196 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..470b094
--- /dev/null
+++ b/style.css
@@ -0,0 +1,196 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  background-color: #0f1419;
+  color: #e6e6e6;
+  line-height: 1.6;
+}
+header {
+  background: linear-gradient(135deg, #1b2633, #0f1419);
+  padding: 40px;
+}
+header h1 {
+  margin: 0;
+  font-size: 2.4em;
+}
+header p {
+  max-width: 900px;
+  color: #cfd8dc;
+}
+.gap-box {
+  background-color: #1a222b;
+  border: 1px solid #2e3b4a;
+  border-left: 4px solid #ff6b6b;
+  padding: 20px;
+  margin: 20px 0;
+  max-width: 900px;
+}
+section {
+  padding: 40px;
+  max-width: 1200px;
+  margin: auto;
+}
+h2 {
+  border-bottom: 2px solid #2e3b4a;
+  padding-bottom: 8px;
+}
+h3 {
+  color: #90caf9;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+th,
+td {
+  border: 1px solid #2e3b4a;
+  padding: 10px;
+  text-align: left;
+  vertical-align: top;
+}
+th {
+  background-color: #1b2633;
+}
+ul {
+  margin-left: 20px;
+}
+.badge {
+  display: inline-block;
+  background-color: #263238;
+  padding: 4px 10px;
+  margin: 4px 0;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+.procurement-badge {
+  background-color: #1a5276;
+  color: #fff;
+  margin-right: 8px;
+}
+.footer {
+  background-color: #0b0f14;
+  padding: 20px;
+  text-align: center;
+  font-size: 0.85em;
+  color: #9e9e9e;
+}
+.cta-box {
+  background-color: #1a222b;
+  padding: 30px;
+  margin: 40px 0;
+  border: 1px solid #2e3b4a;
+  text-align: center;
+}
+.diagram {
+  background-color: #111820;
+  padding: 20px;
+  margin: 20px 0;
+  border: 1px solid #2e3b4a;
+}
+.note {
+  background-color: #1a222b;
+  padding: 15px;
+  border-left: 4px solid #90caf9;
+  margin: 20px 0;
+}
+.warning {
+  background-color: #2d1b1b;
+  padding: 15px;
+  border-left: 4px solid #ff6b6b;
+  margin: 20px 0;
+}
+.advantages {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  margin: 30px 0;
+}
+.advantage-card {
+  background-color: #1a222b;
+  padding: 20px;
+  border-radius: 4px;
+  border-top: 3px solid #43a047;
+}
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
+
+/* Product Showcase Styles */
+.product-showcase {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 30px;
+  margin: 40px 0;
+  padding: 25px;
+  background-color: #1a222b;
+  border: 1px solid #2e3b4a;
+  border-radius: 8px;
+  align-items: start;
+}
+
+.product-image {
+  text-align: center;
+}
+
+.product-image img {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid #2e3b4a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.product-image caption {
+  display: block;
+  margin-top: 10px;
+  font-size: 0.9em;
+  color: #90caf9;
+  font-style: italic;
+}
+
+.product-features h3 {
+  margin-top: 0;
+  color: #43a047;
+  border-bottom: 2px solid #2e3b4a;
+  padding-bottom: 10px;
+}
+
+.product-features ul {
+  margin-left: 20px;
+  list-style-type: none;
+}
+
+.product-features li {
+  margin-bottom: 15px;
+  padding-left: 25px;
+  position: relative;
+  line-height: 1.5;
+}
+
+.product-features li:before {
+  content: "✓";
+  color: #43a047;
+  position: absolute;
+  left: 0;
+  font-weight: bold;
+}
+
+.product-features strong {
+  color: #90caf9;
+  font-weight: 600;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .product-showcase {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .product-image img {
+    max-width: 250px;
+  }
+}