From 660d69e86e2150263462a8f6606b2300b8733828 Mon Sep 17 00:00:00 2001 From: SamaraFellaDina Date: Tue, 28 Nov 2023 11:24:43 +0100 Subject: [PATCH] heel veel --- assets/icons/House.svg | 7 +++ assets/icons/Menu.svg | 13 +++++ assets/icons/User.svg | 7 +++ assets/logo/02-funda-Blue.svg | 31 +++++++++++ index.html | 26 ++++++++- scripts/scripts.js | 0 styles/styles.css | 102 ++++++++++++++++++++++++++++++++-- 7 files changed, 178 insertions(+), 8 deletions(-) create mode 100644 assets/icons/House.svg create mode 100644 assets/icons/Menu.svg create mode 100644 assets/icons/User.svg create mode 100644 assets/logo/02-funda-Blue.svg create mode 100644 scripts/scripts.js diff --git a/assets/icons/House.svg b/assets/icons/House.svg new file mode 100644 index 00000000..340b347a --- /dev/null +++ b/assets/icons/House.svg @@ -0,0 +1,7 @@ + + + House + + + + \ No newline at end of file diff --git a/assets/icons/Menu.svg b/assets/icons/Menu.svg new file mode 100644 index 00000000..7048c37e --- /dev/null +++ b/assets/icons/Menu.svg @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/assets/icons/User.svg b/assets/icons/User.svg new file mode 100644 index 00000000..ce12a613 --- /dev/null +++ b/assets/icons/User.svg @@ -0,0 +1,7 @@ + + + Avatar / User + + + + \ No newline at end of file diff --git a/assets/logo/02-funda-Blue.svg b/assets/logo/02-funda-Blue.svg new file mode 100644 index 00000000..3edea9aa --- /dev/null +++ b/assets/logo/02-funda-Blue.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index d5923463..adfdc39b 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,31 @@ Saved Houses - + + - +
+ + logo funda + + + +
\ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js new file mode 100644 index 00000000..e69de29b diff --git a/styles/styles.css b/styles/styles.css index 3c3b566b..bd76b43b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -15,15 +15,105 @@ --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; --content-radius: 3px; - --regular-text: 16px; + --regular-text: 1em; --fonts:"ProximaNova", sans-serif; + +} + +* { + font-family: var(--fonts); +} + +body { + background-color: var(--background-color-1); + color: var(--primairy-color-2); + margin: 0; + padding: 0; + + font-size: var(--regular-text); + +} + +/* Heading door @samarafelladina */ +/* organismen */ +header { + padding: .8em; + font-size: .8em; + display: flex; +} + +button { + appearance: auto; + border-style: none; +} + +ul { + list-style: none; +} + +.header { + display: flex; + background-color: var(--secundairy-color-1); + align-items: center; + gap: .8em; +} + +.logo-funda { + width: auto; + height: 2em; + cursor: pointer; +} + +.hamburger{ + flex-direction: column-reverse; +} + +.nav-list-right, .nav-list-left { + display: flex; + gap: 1em; + margin-block-start: 0; + margin-block-end: 0; +} + +.nav-list-right a { + flex-direction: column; +} + +.hamburger, .nav-list-right a, .nav-list-left { + height: auto; + width: auto; + background: none; + color: var(--primairy-color-2); + + text-align: center; + cursor: pointer; + font-size: .8em; + display: flex; + justify-content: center; +} + +.hamburger img, .nav-list-right img { + height: 2em; + width: auto; + align-self: center; + border-spacing: 1em; +} + +.header a:link, .header a:visited, .header a:active{ + color: var(--primairy-color-2); + text-decoration: none; } + + +/* Wat is een Pseudo (::) element? Dit is een element wat een +deel van een element gebruikt, bijvoorbeeld de eerste letter, +of kan je dingen voor en na invoegen aan het element. */ + + +/* Heading door @samarafelladina */ + +