Programming a responsive website from Adobe XD to HTML5, CSS3, Bootstrap5, JS

We have created a redesign for our company website with Adobe XD. Now we are looking for a freelancer to program it professionally in clean and valid HTML3, CSS3, Bootstrap5 and JavaScript. We don't want to use a content management system. We will make small changes to the content ourselves and outsource larger ones as a follow-up order.


Very important are
---
• Responsive Websites
Optimized for all display sizes (desktop, tablet, smartphone, etc.)

• Support of all major browsers (Edge, Chrome, Firefox, Safari, Opera, ...)

• Search engine optimization of the source code and page concept
For a good ranking on Google, Bing, ...

• Embed logo & icons in SVG format

• Cookie banner (e.g. www.vier.ai)
Functional cookies, statistical cookies, marketing cookies

• Media law compliant


Number of pages
---
The new homepage has 4 main pages
• Home page
• CSN Conferencing (Product 1)
• CSN Online Consulting (Product 2)
• Why CSN

and the following additional pages
• Contact form with captcha spam protection
• Imprint
• Privacy policy
• Terms and conditions


Adobe-XD links (design and content)
---
Home, CSN Conferencing, CSN Online Consulting, Why CSN:
https://xd.adobe.com/view/6e01a64d-9376-4c13-85d2-fa5ca7e0dde2-3b52/

Imprint, AGB, Privacy policy, Contact:
https://xd.adobe.com/view/8bdd8867-9a6a-4432-a278-7afa97755bd1-de8e/

Navigation (example after clicking on the CSN Conferencing menu item):
https://xd.adobe.com/view/6da5f6b0-fe0a-4743-89fd-6866f15de49d-38f6/

Preview mobile view:
https://xd.adobe.com/view/2ad518af-edf9-4502-b7fa-f306ef7ad2c5-7f86


Technologies
---
The homepage should be programmed in clean and valid HTML5, CSS3 and JavaScript.


Frameworks
---
Frontend-CSS-Framework: Bootstrap 5 (local installation)
JavaScript-Webframework (only if required): Vue.js


Fonts
---
Adobe Azo Sans – local integration via a font directory


Picture material
---
Adobe Stock standard license. The images are already licensed, but need to be edit-ed for use (see Adobe XD links)


Special features
---
• 2 languages (German/English)
• Parts of the header are fixed on the page (logo, menu). "kostenlos testen" and Login are scrolled out
• Submenu: When you click on the 3 main pages " CSN Conferencing, CSN Online-Beratung und Warum CSN ", the new page is loaded immediately. If the mouse is still on the menu item, a submenu will be displayed.
• The 4 main pages each have 4 rotating banner images and messages. Change every 5 seconds or manually
• Search function
• Interactive elements
- Page „Online-Beratung, Unsere Highlights im Überblick“: When the mouse is over a feature highlight, it turns around and provides a text explanation (for an example, see Broadcast). If the mouse is not over the highlights, then a tile of the highlights is uncovered by random principle, remains for 5 seconds and then closes again.
- Page "CSN Conferencing, Branchen": Expandable boxes (see Finance / Banks)


Milestones & Handover
---
Each milestone and the complete work should be submitted as a ZIP archive for local testing.

Start in the German language. In Milestone 3, all 8 pages must be ready in English as well.

• Milestone 1 – 250 US$
Homepage, product page “CSN Conferencing”, Search function, Cookie Banner

• Milestone 2 – 250 US$
Product page “CSN Online Consultation”, “Why CSN”

• Milestone 3 – 250 US$
Contact form, imprint, privacy policy, terms and conditions, all pages in german and english


Start time, duration & your technology stack
---
If you are interested in the project, please tell us when you could start and how long you need for each milestone.

Can the website be implemented in pure and clean HTML5, CSS3, Bootstrap5 and JavaScript? Or do you need to use 3rd party libraries or JavaScript framework like vue.js? Please provide detailed information.