Custom properties bijgewerkt & footer

SamaraFellaDina · Nov 28, 2023 · 7a8383c · 7a8383c
1 parent eb8b740
commit 7a8383c
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -34,5 +34,54 @@ <h1><img src="assets\icons\Heart Filled.svg">Alle bewaarde huizen</h1>
         </div>
     </main>
 
+    <footer>
+        <div class="shortcut-footer">
+            <div>
+                <h3>Snel naar</h3>
+                <ul>
+                    <li><a href="https://www.funda.nl/producten-en-diensten/verkoop-je-huis-op-funda/">Verkoop je huis op funda</a></li>
+                    <li><a href="https://www.funda.nl/mijn-huis-toevoegen/">Check je woningwaarde</a></li>
+                    <li><a href="https://www.funda.nl/makelaar-zoeken/">Zoek een NVM-makelaar</a></li>
+                    <li><a href="https://www.funda.nl/funda-index/funda-index/">Volg de woningmarkt: funda indez</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3>Snel naar</h3>
+                <ul>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>            <div>
+                <h3>Snel naar</h3>
+                <ul>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>            <div>
+                <h3>Snel naar</h3>
+                <ul>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="socials">
+            <ul>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+
+            </ul>
+        </div>
+    </footer>
+
 </body>
 </html>
diff --git a/styles/styles.css b/styles/styles.css
@@ -15,6 +15,11 @@
     --secundairy-color-3:#F8C463;
     --secundairy-color-4:#66BA96;
 
+    --grayscale-color-1:#EDEDED;
+    --grayscale-color-2:#CCCCCC;
+    --grayscale-color-3:#666666;
+    --grayscale-color-4:#333333;
+
     --background-color-1:#EDEDED;
     --background-color-2:#333333;
 
@@ -117,3 +122,12 @@ of kan je dingen voor en na invoegen aan het element. */
 /* Heading door @samarafelladina */
 
 
+
+
+
+
+
+/* Footer */
+footer {
+    background-color: var(--grayscale-color-2);
+}