Dit is een responsive webpagina van Lifely over "Getting started with Artificial Intelegence" waarin klanten kunnen lezen wat AI design sprint is.
Deze website gaat over het product "AI design sprint" dat Lifely aanbied. Op de website kun je meer informatie lezen over wat een "AI design sprint" inhoud. Ook kun je een afspraak maken met Lifely over AI. De website is gemaakt in de huisstijl van Lifely en is volledig responsive.
📸 Laptop:
📸 Mobile:
Wil je zelf nog even rond kijken hoe het nou allemaal werkt dan kun je hier de link vinden 🌐: Getting started with Artificial Intelegence
Bij het bouwen van deze website heb ik gebruik gemaakt van HTML, CSS en JavaScript. Mijn HTML is voledig semantisch opgebouwd, het bestaat uit een head en body. In de head zit al de metadata, en in de body de inhoud van de website.
De body heb ik onderverdeeld in header, main & footer. In de header staat de topbar en navigatie, in de main staat alle belangrijke informatie en in de footer staat een navigatie, tagline en credentials.
Met CSS heb ik mijn website vorm gegeven. In de :root heb ik custom properties aangemaakt met de kleuren van de huisstijl, de font en margins & paddings. Deze properties gebruik ik door mijn hele CSS.
Ik heb gebruik gemaakt van media queries om de site responsive te maken, ik heb hiervoor 3 breakpoints aangehouden. Als je meer details hierover wilt hebben kun je dit hier lezen.
Met JavaScript heb ik de website interactief gemaakt. Zo heb ik een hamburger menu gemaakt die in en uit klapt. Met classList.toggle wordt er een class op de header gezet, die een ander soort opmaak heeft in CSS waardoor het menu dus in/uit klapt. Ik heb dit verder uitgelegd in mijn Wiki.
Ik heb nog veel meer dingen gebouwd dus als je wil weten hoe ik dat heb gedaan kun je dat in mijn Wiki lezen.
This project is licensed under the terms of the MIT license.