≪!DOCTYPE html≫
            ≪html lang="fa" dir="rtl"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫شمع کیان≪/title≫
                ≪link rel="stylesheet" href="./styles/style.css"≫
                ≪link rel="stylesheet" href="./styles/normalize.css"≫
                ≪link rel="shortcut icon" href="./images/icon.png" type="image/x-icon"≫
                ≪style≫
                    @font-face {
                        font-family: vazir;
                        src: url(../fonts/Vazirmatn-VariableFont_wght.ttf);
                    }

                    :root {
                    --Purple: #270257;
                    --Yellow: #feb100;
                    --Black: #000000;
                    --White: #ffffff;
                    --Nav-button: rgba(255, 255, 255, 0.05);
                    --Nav-hover: rgba(255, 255, 255, 0.1);
                    }

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

                    .header{
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        height: 100vh;
                        align-items: center;
                        justify-content: space-between;
                        background: url(../images/banner.jpg);
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                    .nav{
                        margin: 5px;
                        display: flex;
                        justify-content: flex-start;
                        width: 100%;
                        height: 7vh;
                    }

                    .nav-item{   
                        text-decoration: none;
                        margin: 5px;
                        padding: 5px;
                        border-radius: 5px;
                        background-color: var(--Nav-button);
                        color: var(--White);
                        transition: 0.2s ease-in-out;
                    }

                    .nav-item:hover{
                        transform: translateY(0.2rem);
                        background-color: var(--Nav-hover);
                    }

                    .logo{
                        width: 200px;
                        position: absolute;
                        top: 20px;
                        left: 20px;
                    }

                    .button{
                        font-size: 2rem;
                        border-radius: 10px;
                        text-align: center;
                        width: 30%;
                        height: 9vh;
                        margin-bottom: 10px;
                        color: var(--Yellow);
                        background-color: var(--Purple);
                        padding: 10px;
                        text-decoration: none;
                        transition: 0.2s ease-in-out;
                    }

                    .button:hover{
                        background-color: var(--Yellow);
                        color: var(--Purple);
                        transform: translateY(0.2rem);
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪header class="header"≫
                    ≪nav class="nav"≫
                        ≪a class="nav-item" href=""≫لیست محصولات≪/a≫
                        ≪a class="nav-item" href=""≫درباره ما≪/a≫
                        ≪a class="nav-item" href=""≫نظرات≪/a≫
                        ≪a class="nav-item" href="#footer"≫تماس با ما≪/a≫
                    ≪/nav≫
                    ≪img class="logo" src="./images/logo.png" alt="Logo"≫
                    ≪a class="button" href=""≫سفارش طراحی شمع≪/a≫
                ≪/header≫
                ≪main≫≪/main≫
                ≪footer id="footer"≫پا صفحه≪/footer≫
            ≪/body≫
            ≪/html≫