tarif.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarif</title>
</head>
<body style="background-color:burlywood;">
    <!-- Header-Start -->
    <header>
        <h2 style="color:brown;"><em>...Çikolata Küpleri...</em></h2>
        <p><em><strong>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem aspernatur accusamus ratione, itaque ab similique voluptatibus perferendis perspiciatis quia distinctio.</strong></em></p>
        <p><strong>Tarif:</strong>Lorem, ipsum dolor.</p>

    </header>
    <!-- Header-End -->

    <!-- Nav-Start -->
    <nav>
        <center><p><ins style="color: brown;">Kaç Kişilik:</ins><ins>4 Kişilik</ins>
        <ins style="color:brown;">Hazırlanma Süresi: </ins><ins>30 Dakika</ins>
        <ins style="color: brown;">Pişirme Süresi: </ins><ins>10 Dakika</ins></p>
        <img src="https://picsum.photos/200/300" alt="Çikolata Küpleri"></center>
    </nav>
    <!-- Nav-End -->
    <!-- Section-Start -->
    <section>
        <!-- Article-Start -->
        <article>
            <p style="color: azure; background-color:brown ;">
                Lorem ipsum dolor sit amet.
            </p>
            <ul>
                <li>Lorem, ipsum dolor.</li>
                <li>Lorem ipsum dolor sit.</li>
                <li>Lorem, ipsum.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </article>
        <article>
            <p style="color: azure; background-color: brown;">Lorem ipsum dolor sit amet.</p>
            <ol>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Tempora at quam blanditiis voluptate?</li>
                <li>Laborum necessitatibus neque explicabo perspiciatis.</li>
                <li>Nemo consequatur natus quam! Accusantium.</li>
                <li>Commodi beatae facere qui rerum.</li>
                <li>Voluptatibus, molestias! Harum, eos commodi?</li>
                <li>Ducimus distinctio amet itaque quia!</li>
            </ol>
        </article>
        <!-- Article-End -->
    </section>
    <!-- Section-End -->
    <!-- Footer-Start -->
    <footer style="font-family: 'Times New Roman', Times, serif; text-align:end; font-size: larger;": ;">
        <p>Afiyet Olsun!</p>
        <a href="#"><em>Videoya ulaçmak için tıklayınız.</em></a>
    </footer>
    <!-- Footer-End -->
</body>
</html>