Interactive pride calendar

1. Apply a 3x3 grid to a blank section.

2. From the Inspector panel, under Display, set column 1 and column 3 to 5%. Set column 2 to 1fr. Then set row 1 and row 3 to 5vw, and row 2 to min/max. Set the min to 50px and the max to max content.

3. Select the section, and set the minimum height to none.

4. Under the design tab of the Inspector panel, go to the color picker, select the middle gradient icon and choose linear from the drop down. Create a rainbow gradient.

5. Add white containers to the left, right, top and bottom grid cells and stretch them so that only the middle cell is left exposed.

6. From the Quick Add tab, drag a repeater into the middle grid cell.

7. From the floating action menu, choose the grid cells display type. Go to the Inspector panel, set the gaps to 0, the column min width to 350px and the row min height 0px.

8. From the floating action bar, add more items until you have 12 items in total. Then change the item background opacity to 0%. You will see this change reflected across all items in the repeater.

9. From the Add panel, under Decorative, drag a shape into one of the items. Make sure the Scale proportionally option is checked in the Inspector panel. Set the width to 100% and set all margins to 0. With the shape selected, click the settings icon from the floating action bar and toggle off the Keep original proportions option. Choose a different shape for each item and color them white.

10. Drag a basic circle shape into an item and set the color to black. Dock it to the right and bottom, then set the margin to 17% for both. Set the width to 6%

11. Add a title to one of the items. Design it, then change the title in each item to a different month.

12. For a more engaging web experience, select an item and go to the interactions tab in the Inspector panel to add a hover interaction effect. This effect will automatically apply to all items in the Repeater. Preview the final design.