Frontend Test Task

Hello,

we want you to create a simple landing page with the given design (see design.pdf). All the needed images can be found in the images folder. Further styling details can be found below. To display the form, simply use the given images. Red text in square brackets indicate the size of an area and should be omitted. Yellow boxes are image placeholders. The image name and its dimension can be found inside the yellow box. All the sizes are pixel values in the order of width x height. If you have any questions, don't hesitate to ask.

Good luck! :)

Requirements

• Target browsers (Chrome, Firefox, Safari, Edge, Chrome mobile, Safari mobile)
• Use modern HTML and CSS to create the landing page (no frameworks)
• The page should have an adaptive layout that changes at a screen width of 600 pixels
  • Check the schematic mobile view
• Use the images to display the form (form_desktop and form_mobile)
• Use the given assets and chose the appropriate format and size
• Note: The teaser image is larger than the teaser area's size!
  • Display the image like the design shows without resizing it
• Make sure everything is performance optimized (feel free to resize and optimize assets as well)

Bonus

• The blue link "Sign up for your risk-free trial »" should be clickable
  • Implement a simple overlay using plain javascript
  • It should have a size of 480x320
  • It should be centered vertically and horizontally
  • It should show an iframe with a url of your choice
  • It should be closeable with a dedicated close-button
  • The overlay doesn't need to adapt to different screen sizes
  • Optional: Make it look nice

Text Contents

• Page Title
  • The future of modern hearing systems
• Header
  • 1-786-574-5820
  • Free consultation
  • Mon - Sat: 8:00am - 8:00pm
• H1
  • These hearing aids will change your life!
• H2
  • The future of modern hearing systems is here
• USP List
  • Most discreet design
  • Best speech understanding
  • Smartphone connectivity
• Main text
  • Signia has unveiled its new Nx hearing system — and it is revolutionizing the hearing aid industry! After 50 years of research and development, German engineers have found a way to pack cutting-edge technology in a device so small, it disappears behind or inside your ear. The old hearing aids of the past were highly visible and only made sounds louder. These new hearing systems are mini computers that can pick up voices and reduce background noise automatically. The new Nx technology uses a unique algorithm that is clinically proven to deliver better than normal hearing. This allows you to understand your family and friends clearly, even in crowded restaurants. And with the touchControl App, you can control settings and personalize your preferences directly from your smartphone. We at hear.com want you to be one of the first to experience this amazing technology. Sign up here to learn more about our locations, pricing and financing options — 100% FREE of charge and without any obligations.
  • Sign up for your risk-free trial »
• Misc.
  • Our guarantess
  • Privacy Policy
  • Imprint

Spaces / Margins

• green areas: 45px
• orange areas: 30px

Colors

• Text: #3A3A3A
• Blue CTA link / border: #265DA6
• Light blue background: #DFE3EC
• Grey small text / border: #808080
• Light grey background: #EEEEEE
• Orange text: #F07700

Font

• Face: Open Sans
• H1: 48px
• H2: 42px
• List: 28px
• Text: 18px
• CTA Link: 20px