Google Sites design kit
Malaysia Celebrates!
Every block your Year 5 ESL site needs, ready to paste into Google Sites. Preview each one at computer, tablet and phone size, then copy it in one click.
- AmaliaListening & Speaking
- AyuniReading
- DhaneyaWriting
What is inside
- Pages
- 5
- Blocks
- 51
- Images
- 0
Six celebrations on the cube
- Hari Raya
- Deepavali
- Chinese New Year
- Christmas
- Pesta Kaamatan
- Hari Malaysia
Four steps
How to paste a block
Every block is one embed box. Paste one block per box, top to bottom, in the order each kit page shows.
Open the page
Open your Google Sites editor and go to the page the block belongs to, for example Reading.
Insert an embed
Click Insert, then Embed, then choose the Embed code tab.
Paste and insert
Press Copy code on a block in this kit, paste it into the box, then click Next and Insert.
Size the box
Drag the box to full width and to the height shown on the block. The design fills the box.
Page links use Google Sites buttons
Links inside an embed box cannot open a page in the same tab, so the skill page buttons and the menu stay as normal Google Sites blocks.
Phones shrink every box
Google Sites keeps the shape of each box on a phone, so a wide box gets short. Every block fills its box and scrolls inside when it needs to. Check Preview on a phone and drag a box taller if it feels cramped.
Editing text
Click a pasted block, press its pencil icon and change only the text between EDIT START and EDIT END. Yellow highlights show every [PLACEHOLDER] still waiting for your words.
Hero at the very top
Hover over the Google Sites page header and set Header type to Title only, so the animated hero is the first thing pupils see.
Page by page
Your five pages, block by block
Each kit page lists its blocks in paste order with a live preview, a one-line paste note and a Copy button.
- 7 blocks
Homepage
Amalia, Ayuni and Dhaneya
Title, members, unit introduction, the turning cube, the skills table and the way into each skill page.
0 of 7 pastedOpen kit
- 12 blocks
Listening & Speaking
Amalia
Amalia's skill page: Part i explanation and justification, then the Part ii activity showcase.
0 of 12 pastedOpen kit
- 12 blocks
Reading
Ayuni
Ayuni's skill page: Part i explanation and justification, then the Part ii activity showcase.
0 of 12 pastedOpen kit
- 12 blocks
Writing
Dhaneya
Dhaneya's skill page: Part i explanation and justification, then the Part ii activity showcase.
0 of 12 pastedOpen kit
- 8 blocks
Design Principles
Amalia, Ayuni and Dhaneya
A Topic 6 section, a Topic 7 section and a table linking every principle to each skill.
0 of 8 pastedOpen kit
- 7 blocks
Extra blocks
Use on any page
The background on its own, the smaller banner background, and every empty material slot as a separate block.
0 of 7 pastedOpen kit
The look
Colours, fonts and rules
Every block already uses these. They are here for anything you build in Google Sites itself, such as the theme colour.
Purple
#6C3CE9
Main buttons, links and the Homepage
Pink
#FF6FA3
Listening & Speaking accent
Orange
#FF9F1C
Writing accent
Teal
#2DD4BF
Reading accent
Yellow
#FFD23F
Stars, highlights and progress
Ink
#2A1B4D
All body text
Headings
Baloo 2
Welcome to Malaysia Celebrates!
Text
Nunito
Round, friendly letters that are easy for young readers, never smaller than 18px.
Rules every block follows
- Text size:
- 18px minimum for all reading text
- Buttons:
- 48px tall, above the 44px minimum
- Contrast:
- 4.5:1 or better for every text colour
- Motion:
- Stops for reduced motion, plus a pause button on every animated block
- Cards:
- Tilt in 3D under the mouse, stay flat on touch screens
Your base code
Built on your background, not instead of it
The animated background in every hero and banner starts from the code you shared.
Kept
Your eight pieces, their colours, shapes, positions and timings.
Added
More lanterns, oil lamps and ketupat, a 14-point Jalur Gemilang star, Kaamatan paddy and gongs, Christmas baubles, falling confetti, more fireworks and twinkles.
Fixed
The ketupat and confetti never spun and the fireworks floated up instead of bursting, because one general rule outweighed them. Every rule now starts with .fx.
Lighter
Pieces now move with transforms instead of top, so the animation stays smooth on school laptops.
Fits the box
The height follows the Google Sites box, so the background still fits on phones. A fixed height is one line to change.
Calm mode
With reduced motion turned on, the pieces become a still, scattered picture. A pause button sits in the corner for everyone else.
Before you share
A last look before your lecturers visit
Run through this list on every page once your materials are in.
In Google Sites, the Preview button shows your site on a phone, a tablet and a computer. Check all three before you publish.
- Every [PLACEHOLDER] is replaced and no yellow highlights are left.
- Every dashed slot holds your material, or you removed it.
- Each page has its I can goal.
- References follow APA 7th edition, in alphabetical order.
- The skill page buttons open the right pages.
- You checked Preview on a phone and a computer.
