Homepage content

index.html

@@ -19,6 +19,41 @@
     </nav>
 
     <!-- Content -->
+    <main>
+        <section class="hero">
+            <img src="/images/hero-image.png" alt="Hero image. AI-Generated." class="section-image">
+            <h1>Інновації, що змінюють майбутнє</h1>
+            <p>
+                Ми поєднуємо технології, досвід та креативність, щоб створювати рішення, 
+                які допомагають бізнесу зростати та залишатися конкурентоспроможним у світі, 
+                що постійно змінюється.
+            </p>
+        </section>
 
+        <section class="features">
+            <div class="feature">
+                <h2>Надійність</h2>
+                <p>Наші продукти відповідають найвищим стандартам якості та безпеки.</p>
+            </div>
+            <div class="feature">
+                <h2>Інновації</h2>
+                <p>Ми впроваджуємо сучасні технології, щоб завжди бути на крок попереду.</p>
+            </div>
+            <div class="feature">
+                <h2>Партнерство</h2>
+                <p>Ми будуємо довготривалі відносини з клієнтами на основі довіри та співпраці.</p>
+            </div>
+        </section>
+
+        <section class="about-preview">
+            <h2>Хто ми?</h2>
+            <p>
+                Наша команда складається з фахівців, які мають багаторічний досвід у сфері 
+                ІТ, бізнес-аналітики та дизайну. Ми прагнемо зробити ваш бізнес 
+                успішним у цифрову епоху.
+            </p>
+            <a href="/pages/about.html" class="link-more">Детальніше про нас →</a>
+        </section>
+    </main>
 </body>
 </html>

style.css

@@ -7,6 +7,7 @@
     --primary: #9290C3;
     --secondary: #535C91;
     --highlight: #1B1A55;
+    --click-me: pink;
 }
 
 body {
@@ -16,11 +17,21 @@ body {
     font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 
+/* Common */
+
+a {
+    color: var(--click-me);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+a:hover {
+    text-decoration:underline;
+}
+
 /* Navbar */
 
 nav {
-    /* display: flex; */
-    /* flex-direction: row; */
     border-radius: 1rem;
     background-color: var(--highlight);
     margin: 1rem;
@@ -36,7 +47,7 @@ nav {
 .nav-links > a {
     border-radius: 0.75rem;
     padding: 0.25rem 0.5rem;
-    color: var(--primarxy);
+    color: var(--primary);
     text-decoration: none;
     font-size: large;
 }
@@ -56,3 +67,18 @@ nav {
 .nav-logo > img {
     height: 2.5rem;
 }
+
+/* Content */
+
+main {
+    max-width: 50rem;
+    margin: 0 auto;
+    padding: 0.5rem 1rem;
+}
+
+.section-image {
+    width: 100%;
+    height: 10rem;
+    border-radius: 0.75rem;
+    object-fit: cover;
+}