WEB LAYOUT MODULE

CONTENTS
This module has the following files:
1. MODULE_WEB_LAYOUT.doc
2. MODULE_WEB_LAYOUT_MEDIA.zip

Introduction
You are a freelancer working in the field of Web Technologies and you have been asked to develop the
brand-new website for Indonesia’s COVID-19 data. Your client has heard that you are good at building
responsive website.

Description of project and tasks

The purpose of this website is to display the latest news about COVID-19 in Indonesia as well. A visitor can
have a list of upcoming events. The purpose of this website is to provide information and news regarding
COVID-19, from general news, socialization and urgency of conditions in Indonesia and to provide a list of
upcoming events that can be followed for people who wish to participate. The target audience for this
page is all elements of society in Indonesia. This can vary widely, therefore you will determine your
interpretation of the target audience (based on "Indonesian society").

Page Requirements
In this module you are required to make a web layout in single page website according to the W3C
consortium standards using HTML, CSS and Javascript. The web layout developed must be able to work
optimally multiplatform on a desktop, tablet or mobile environment with the following specifications:

● Desktop: 1440px
● Table 768px
● Mobile: 320px

Components

Headers
In headers, we need to have a logo for COVID-19 Indonesia.

News Section
In news section you need to make a list of news at least 3 news with components :

● News Image
● News Title
● News Author
● News Date
● News Short Description

Events Section
In events section you need to make a list of events at least 3 events with components :

● Events Title
● Events Date
● Events Short Description

Contact Section
In contact section you need to make a form for contact the owner of website with fields:

● Name
● Email
● Messages
● Button (Submit & Reset)

Footers
In footer clients want to add Copyright and 3 social media links.

● “Copyright © 2022- All rights reserved”

● 3 social media links, example : Facebook, Twitter, Instagram

Menus
The menu should stick to the top when scrolling down the page. The menu has the following items.

● Home
● News
● Events
● Contact
● Game
● Vaccination Paltform

Instructions to the Competitor

1. The media files are available in the ZIP file. You can modify the supplied files and create new
media files to ensure the correct functionality and improve the layout.
2. Save your website in a folder called "XX_module_web_layout".
3. The entry file should be ‘XX_module_web_layout /index.html’

Note : XX is competitor number.