rebuilding site Mon Sep 9 10:58:25 AM UTC 2024

DAXGRID · Sep 9, 2024 · f84c1b2 · f84c1b2
1 parent 6e577b2
commit f84c1b2
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 4 deletions.
diff --git a/en/index.html b/en/index.html
@@ -198,5 +198,28 @@ <h2>Call to action title</h2>
       </div>
     </section>
     <!-- End call to action section -->
+
+    <!-- Start footer -->
+    <footer>
+      <div class="footer-container">
+        <div class="footer-links">
+          <div class="footer-links-container">
+            <a href="/en"><img src="./resources/logo.svg" alt="company-logo" /></a>
+          </div>
+        </div>
+        <div class="footer-splitter"></div>
+        <div class="contact">
+          <div class="contact-container">
+            <h3>Kontakt informationer:</h3>
+            <div class="contact-container-text-body">
+              <p>Email: [email protected]</p>
+              <p>Telefon: 555555555</p>
+              <p>CVR: 36684283</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <!-- End footer -->
   </body>
 </html>
diff --git a/en/styles.css b/en/styles.css
@@ -235,9 +235,9 @@ body {
 
 .features-section-body {
     display: flex;
-    max-width: 60%;
+    max-width: 85%;
     flex-wrap: wrap;
-    gap: 150px;
+    gap: 50px;
 }
 
 .features-primary-block {
@@ -509,6 +509,60 @@ body {
 
 /* End call to action section */
 
+/* Start footer */
+.footer-container {
+    background-color: var(--black-primary);
+    padding: 50px 30px;
+    border-radius: 45px 45px 0px 0px;
+    gap: 30px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.contact {
+    color: var(--white-primary);
+    display: flex;
+    justify-content: center;
+    flex-basis: 100%;
+}
+
+.contact-container {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 10px;
+}
+
+.contact-container h3 {
+    flex-basis: 100%;
+    padding-bottom: 10px;
+}
+
+.contact-container-text-body {
+    flex-basis: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.contact-container-text-body p {
+    line-height: 1.0;
+}
+
+.footer-splitter {
+    border-bottom: 1px solid var(--white-primary);
+    flex-basis: 100%;
+}
+
+.footer-links {
+    display: flex;
+    flex-basis: 100%;
+}
+
+.footer-links-container {
+}
+
+/* End footer */
+
 @media (max-width: 1200px) {
     h1 {
         font-size: 24px;
@@ -629,4 +683,17 @@ body {
         padding: 50px 30px;
         height: auto;
     }
+
+    .contact-container {
+        text-align: start;
+    }
+
+    .contact-container-text-body {
+        flex-wrap: wrap;
+        gap: 20px;
+    }
+
+    .contact-container-text-body p {
+        flex-basis: 100%;
+    }
 }
diff --git a/index.html b/index.html
@@ -198,5 +198,28 @@ <h2>Call to action title</h2>
       </div>
     </section>
     <!-- End call to action section -->
+
+    <!-- Start footer -->
+    <footer>
+      <div class="footer-container">
+        <div class="footer-links">
+          <div class="footer-links-container">
+            <a href="/"><img src="./resources/logo.svg" alt="company-logo" /></a>
+          </div>
+        </div>
+        <div class="footer-splitter"></div>
+        <div class="contact">
+          <div class="contact-container">
+            <h3>Contact informations:</h3>
+            <div class="contact-container-text-body">
+              <p>Email: [email protected]</p>
+              <p>Phone: 555555555</p>
+              <p>CVR: 36684283</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <!-- End footer -->
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -235,9 +235,9 @@ body {
 
 .features-section-body {
     display: flex;
-    max-width: 60%;
+    max-width: 85%;
     flex-wrap: wrap;
-    gap: 150px;
+    gap: 50px;
 }
 
 .features-primary-block {
@@ -509,6 +509,60 @@ body {
 
 /* End call to action section */
 
+/* Start footer */
+.footer-container {
+    background-color: var(--black-primary);
+    padding: 50px 30px;
+    border-radius: 45px 45px 0px 0px;
+    gap: 30px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.contact {
+    color: var(--white-primary);
+    display: flex;
+    justify-content: center;
+    flex-basis: 100%;
+}
+
+.contact-container {
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 10px;
+}
+
+.contact-container h3 {
+    flex-basis: 100%;
+    padding-bottom: 10px;
+}
+
+.contact-container-text-body {
+    flex-basis: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.contact-container-text-body p {
+    line-height: 1.0;
+}
+
+.footer-splitter {
+    border-bottom: 1px solid var(--white-primary);
+    flex-basis: 100%;
+}
+
+.footer-links {
+    display: flex;
+    flex-basis: 100%;
+}
+
+.footer-links-container {
+}
+
+/* End footer */
+
 @media (max-width: 1200px) {
     h1 {
         font-size: 24px;
@@ -629,4 +683,17 @@ body {
         padding: 50px 30px;
         height: auto;
     }
+
+    .contact-container {
+        text-align: start;
+    }
+
+    .contact-container-text-body {
+        flex-wrap: wrap;
+        gap: 20px;
+    }
+
+    .contact-container-text-body p {
+        flex-basis: 100%;
+    }
 }