top of page

Interactive pride calendar

Editor X Team


Apr 20, 2023

Interactive pride calendar

This striking calendar incorporates a Repeater and gradient backgrounds.

Design: Eliran Vahdi, Tech design: Eliran Vahdi

Learn how to recreate this design in 12 steps.

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

image of step 1

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.

image of step 2

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.

image of step 4

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.

image of step 5

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

image of step 6

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.

image of step 7

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.

image of step 8

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.

image of step 9

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%

image of step 10

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

image of step 11

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.

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page