Table of Contents
Sample Web Design Project with Unify
This document includes a sample project for web designing using Unify Template created by HTMLStream.
This document is intended for the bSup development team. If you are interested in Website solutions, please contact us through the Website Design Services page.
Tasks
Task 1 - Fix Image Covering Text
Task 1.1: The image below the banner in this page is covering the text behind it. Please fix it. The banner is copied from this unify page. You can compare the code of the service page with the code of the unify page to detect the problem on the service page.
Task 1.2: Also, when the window is shrunk, a gap between the banner and the image below is displayed. Please remove the gap
Task 2 - Make Boxes Equal Height In Desktop
Make the height of the boxes, displayed in the screenshot below, equal. The boxes belong to the calculator page. Apply this change only for @media (min-width: 992px).
Task 3 - Move Image to the Bottom of Div In Desktop
Move the image, displayed in the screenshot below, to the bottom of div (20px above the bottom). The image belongs to the calculator page. Apply this change only for @media (min-width: 992px).
Task 4 - Make Contact Button Larger
Make the contact button, as displayed in the screenshot below, larger. The image belongs to the home page.
Task 5 - Create a Page with Unify
Design a page based on the Unify template based on the content given to you. In your page,
- Put the bsuperior logo.
- In the menu, include just the home.
- Use the default footer of the Unify template
To create a page based on the Unify template, please refer to the Website Design section of this page.
Task 6 - Design Images
Design custom images for your page designed in Step 5.
Requirements
Before doing the tasks,
- Please familiarise yourself with the Unify Template V2.6.2 and its CSS Structure by reviewing its CSS libraries,
We require you to,
- Complete the project based on the Unify Template V2.6.2.
- To follow a similar style as the Unify template. I.e. use Unify classes for example to
- Adjust the margin
- Set size or width
- Set font color or size
- Change a button size
- etc.
For more information, please refer to the Unify Template FAQ.
Useful Links
- Related Google Docs (permission is required)
- Website design services (coming soon).