https://lmikkers.github.io/funda/
Funda is een vastgoedplatform voor consumenten en ondernemers. Via Funda kun je huizen kopen, verkopen en huren.
Opdrachtomschrijving
Het maken (nabouwen) van een detailpagina en verbeteren waar nodig is in hardcode vanille html, css en javascript. En ervoor zorgen dat de code mobile first wordt gebouwd.
Je kunt de website op Telefoon, Tablet en desktop openen op deze link: https://lmikkers.github.io/funda/ https://lmikkers.github.io/funda/
- HTML
- CSS
- Responsive
Structuur: <header> <main> <footer>
Onderverdeeld in: <nav> <section> <article> <div>
De CSS heb ik gelinkt in de <head>
Ik heb de veel voorkomende styles genoteerd in de root, zodat ik dit overal makkelijk kan gebruiken
:root {
--mainFont: 'Proxima Nova', sans-serif;
--mainHeaderFontWeight: 600;
--mainFontWeight: 400;
--secondFontWeight: 350;
--thirdFontWeight: 300;
--mainFontSize: 20px;
--secondFontSize: 16px;
--mainColor: #F7A100;
--mainFontColor: #333333;
--secondFontColor: #999999;
--thirdFontColor: #0071B3;
--hoverOrangeColor: #de9000;
--borderLight: #ededed;
--borderDark: #CCCCCC;
}Om te zorgen dat de website goed functioneert op meerdere devices heb ik gebruikt gemaakt van @media only screen and (min-width: ...px)
- Buurt blokje
- Kaart blokje
- Reis blokje
- Responsive nav-bar
- Responsive footer
- Responsive sections
- Responsive main-image
- Kenmerken tabel
- Kenmerken tabel op mobiel in/uit klappen
- Belangrijkste kenmerken
- Uitklapbare beschrijving
- Ing sectie
- Vergelijkbaar in de buurt sectie
- Sidebar
- Menu subitems
- Mobiele dropdown