top of page

2022 CALENDAR

DECEMBER

JANUARY

There is grey circle tilted towards the right. The circle has a black outline going all the way round. There is the slogan of the Pride campaign and at the bottom a thin strip of the rainbow flag.

JANUARY

FEBRUARY

MARCH

APRIL

MAY

JUNE

JULY

AUGUST

SEPTEMBER

OCTOBER

NOVEMBER

DECEMBER

PRIDE MONTH.

PRIDE ALWAYS.

LET'S RECREATE THIS CALENDAR WITH 12 STEPS

1.

Add a new section and apply a grid of 3 columns and 3 rows.

2.

Set the left and right columns to 5% and the middle column to 1FR, set the top and bottom rows to 5VW and set the middle row to min\max, min- 50PX, max content.

The editor is open and there is a grid being edited over the Calendar. The top bar is also visible.

3.

Set the section min H to none.

4.

Change the section background to a linear color and choose a rainbow color palette.

The Calendar is open on the editor and there is a grid over it. The grid is colored with the gradient of orange, yellow and green. The inspector panel is also open.

5.

Add white containers and stretch it on the left, right, bottom and top grid cells, leaving only the middle cell exposed.

On the editor, on the Pride Calendar there is a white middle section and a yellow strip in the middle of the section.

6.

Add a repeater and place it in the middle grid cell.

7.

Choose grid cells as your display type, set the gaps to 0, column min width 350px, row min height 0px

8.

Add more items to get to 12 items and change to item background opacity to 0%

9.

Drag a shape to one of the items, Make sure the scale proportionally option is turned on and change the width to 100%, set all margin settings to 0. Go to the vector art setting and turn off “keep original proportions”. Change all the vector art shapes to a different cut out shape and color it white.

Alt text: On the editor, vector art is being added to the page as calendar months. The Inspector panel is also open.

10.

Add a circle's basic shape and color it black. Dock it from left and bottom with a 17% margin on both. Set its size to 6%

11.

Add a title to one of the items. Design the title and then change each item to a different month.

On the editor, the Inspector panel is also open and the months of the year are being edited for each of the boxes that will form the calendar.

12.

Give the items a cool hover interaction effect.

THANK YOU!

bottom of page