≪!DOCTYPE html≫
            ≪html lang="fa" dir="rtl"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1≫0"≫
                ≪title≫Candle≪/title≫
                ≪link rel="stylesheet" href="≫/styles/style≫css"≫
                ≪style≫
                    @font-face {
                    font-family: 'vazir';
                    src: url(≫≫/fonts/Vazirmatn-VariableFont_wght≫ttf);
                    }

                    body{
                        background-color: yellow;
                        font-family: vazir,Arial, Helvetica, sans-serif;
                    }

                    .menu-items{
                        width: 100%;
                        display: grid;
                        grid-template-columns: 20% 20% 20% 20%;
                        justify-content: space-evenly;
                        align-content: space-between;
                    }

                    .menu-item{
                        margin: 2rem 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-content: space-between;
                        transition: 0.2s ease-in-out;
                    }

                    .menu-item:hover{
                        transform: scale(1.02);
                    }

                    .menu-item-image{
                        border-radius: 5px;
                        margin-bottom: -3rem;
                    }

                    .menu-item-text{
                        background-color: white;
                        color: purple;
                        border-radius: 5px;
                        text-align: center;
                    }

                    @media only screen and (max-width : 992px) {
                        .menu-items{
                            grid-template-columns: 40% 40%;
                        }
                    }

                    @media only screen and (max-width : 600px) {
                        .menu-items{
                            grid-template-columns: 90% ;
                        }   
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div class="menu-items"≫
                    ≪figure class="menu-item"≫
                        ≪img class="menu-item-image" src="≫/images/heart≫png" alt=""≫
                        ≪figcaption class="menu-item-text"≫
                            ≪h2≫شمع قلب≪/h2≫
                            ≪p≫لورم متن ساختگی≪/p≫
                        ≪/figcaption≫
                    ≪/figure≫
                    ≪figure class="menu-item"≫
                        ≪img class="menu-item-image" src="≫/images/heart≫png" alt=""≫
                        ≪figcaption class="menu-item-text"≫
                            ≪h2≫شمع قلب≪/h2≫
                            ≪p≫لورم متن ساختگی≪/p≫
                        ≪/figcaption≫
                    ≪/figure≫
                    ≪figure class="menu-item"≫
                        ≪img class="menu-item-image" src="≫/images/heart≫png" alt=""≫
                        ≪figcaption class="menu-item-text"≫
                            ≪h2≫شمع قلب≪/h2≫
                            ≪p≫لورم متن ساختگی≪/p≫
                        ≪/figcaption≫
                    ≪/figure≫
                    ≪figure class="menu-item"≫
                        ≪img class="menu-item-image" src="≫/images/heart≫png" alt=""≫
                        ≪figcaption class="menu-item-text"≫
                            ≪h2≫شمع قلب≪/h2≫
                            ≪p≫لورم متن ساختگی≪/p≫
                        ≪/figcaption≫
                    ≪/figure≫
                ≪/div≫
            ≪/body≫
            ≪/html≫