====== Sample Web Design Project with Unify ======

This document includes a sample project for web designing using Unify Template created by [[https://htmlstream.com/|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 [[https://bsuperiorsystem.com/test-pages/image-above-title.php|this page]] is covering the text behind it. Please fix it. The banner is copied from [[https://htmlstream.com/preview/unify-v2.6.2/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-22.html|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.

{{ :website-team:projects:sample-project-for-web-design-with-unify-template:about-page_image-covering-text.png | Image covering text }}

**Task 1.2**: Also, when the window is shrunk, a gap between the banner and the image below is displayed. Please remove the gap

{{ :website-team:projects:sample-project-for-web-design-with-unify-template:about-page_gap.png | Gap between the banner and the image below }}


==== 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 [[https://bsuperiorsystem.com/test-pages/calc.php|calculator page]]. Apply this change only for @media (min-width: 992px).

{{ :website-team:projects:sample-project-for-web-design-with-unify-template:commission-page_make-boxes-equal-height.png | Make boxes equal height }}

==== 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 [[https://bsuperiorsystem.com/test-pages/calc.php|calculator page]]. Apply this change only for @media (min-width: 992px).

{{ :website-team:projects:sample-project-for-web-design-with-unify-template:commission-page_move-image-down.png | Move Image Down }}

==== Task 4 - Make Contact Button Larger ====

Make the contact button, as displayed in the screenshot below, larger. The image belongs to the [[https://bsuperiorsystem.com/test-pages/home.php|home page]].

{{ :website-team:projects:sample-project-for-web-design-with-unify-template:bsuite365-index-page_make-contact-button-larger.png | Make contact button larger }}

==== 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 [[https://bsuperiorsystem.com/custom/images/logo/bsuperior-system-ltd-logo.png|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 [[https://bsup.team/doku.php?id=website-team:projects:web-page-development-based-on-unify-template|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 [[https://htmlstream.com/preview/unify-v2.6.2/|Unify Template V2.6.2]] and its CSS Structure by reviewing its CSS libraries,
    * [[https://htmlstream.com/preview/unify-v2.6.2/assets/css/unify-core.css|unify-core.css]]
    * [[https://htmlstream.com/preview/unify-v2.6.2/assets/css/unify-components.css|unify-components.css]]
    * [[https://htmlstream.com/preview/unify-v2.6.2/assets/css/unify-globals.css|Unify-globals.css]]

We require you to,

  * Complete the project based on the [[https://htmlstream.com/preview/unify-v2.6.2/|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 [[https://bsup.team/doku.php?id=website-team:faq:unify-template-faq|Unify Template FAQ]].


----

===== Useful Links =====

  * [[https://docs.google.com/document/d/1R58yXJ-CjszAf7Y-QhKBMKlqeg-LUe06qbd0R8Hlbt0/|Related Google Docs]] (permission is required)
  * Website design services (coming soon).