Please build the components into well-formed HTML/CSS paying particular attention to matching the supplied web design in Mobile.png and Desktop.png as well as you see fit. Pay special attention to colour, spacing and type.
Please build one responsive web page and make your own judgement on how the components should change in-between the two illustrated breakpoints. Do not use any third-party libraries, frameworks or themes for this work. There is no requirement for JavaScript interaction, HTML and CSS will suffice.
Please supply this as a single HTML page with associated files (e.g. CSS, images). We will test this by viewing the web page via a URL on http://localhost to ensure the web fonts load.
It is expected this test will take around 3-4 hours to complete.
See the Design layout folder.
- Mobile.png
- Mobile-320-grid.png (showing the underlying grid)
- Desktop.png
- Desktop-1200-grid.png (showing the underlying grid)
Please use the following TypeKit code for web fonts, this is intended to work on any of the following URLs: test.dev, localhost, and 127.0.0.1
<script src="//use.typekit.net/plb1jth.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
Example CSS:
font-family: "ff-tisa-web-pro", serif;
Font sizes as defined in the original Photoshop design files. Use whatever CSS font sizing you believe is most appropriate in the browser.
- Telephone number: 22px
- Hero image title: 37px, link to craftsmen.html
- Hero image sub-title: 23px
- Navigation title: 20px, link navigation to nav.html
- Telephone number: 26px
- Hero image title: 49px, link to craftsmen.html
- Hero image sub-title: 34px
- Navigation title: 24px, link navigation to nav.html
- Navigation sub-title: 22px
You will find the image of the craftsman inside the assets folder.