Untitled

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="cookingblog.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">
    <title>Document</title>
</head>
<body>
    <header>
        <a class="header_food" href="#">Food</a>
        <nav>
            <ul class="header" role="list">
                <li><a class="header_list" href="#">About</a></li>
                <li><a class="header_list" href="#">Recipes</a></li>
                <li><a class="header_list" href="#">Cuisines</a></li>
                <li><a class="header_list" href="#">Tips</a></li>
            </ul>
        </nav>
        <button class="header_btn login_btn">Log In</button>
        <button class="header_btn"><i class="fa-solid fa-magnifying-glass"></i></button>
    </header>

    <article class="blue_fruit">
        <img class="craving" src="./Media/craving.jpg" alt="">
        <div class="blue_content">
            <h1 class="blue_content_h">What are you craving?</h1>
            <div class="position_relative">
                <i class="fa-solid fa-magnifying-glass"></i><input type="text" placeholder="">
            </div>
        </div>
    </article>

    <main>
        <img class="main_image" src="./Media/background.jpg" alt="">
        <article class="main_article">
        <section class="pic_content">
            <div class="picture">
                <img class="picture_cocktail" src="./Media/cocktails.jpg" alt="pic">
            </div>

            <div class="content">
                <h3 class="content_h3">Party favorites<h3>
                <p class="content_p">The best cocktails and how to make them</p>

                <button class="content_btn">View recipes</button>
            </div>

        </section>

        <section class="pic_content reverse">
            <div class="picture">
                <img class="picture_cocktail" src="./Media/cookies.jpg" alt="pic">
            </div>

            <div class="content">
                <h3 class="content_h3">A Royal-Icing Tutorial:<h3>
                <p class="content_p">Decorate Christmas Cookies Like a Boss</p>
                <!-- <button class="content_btn">View recipes</button> -->
            </div>

        </section>

        <section class="cookie">
            <div class="cookie_btn_1">
                <button>Cookie Toolbox</button>
            </div>

            <div class="cookie_card">
                <div class="card_image">
                    <div class="cookie_picture">
                        <img class="current_cookie_pic" src="./Media/cutters.jpg" alt="cutters">
                    </div>
                    <p class="cookie_content">Cookie cutters</p>
                </div>

                <div class="card_image">
                    <div class="cookie_picture">
                        <img class="current_cookie_pic" src="./Media/sheets.jpg" alt="cutters">
                    </div>
                    <p class="cookie_content">Baking sheets</p>
                </div>

                <div class="card_image">
                    <div class="cookie_picture">
                        <img class="current_cookie_pic" src="./Media/bowls.jpg" alt="cutters">
                    </div>
                    <p class="cookie_content">Batter bowls</p>
                </div>

                <div class="card_image">
                    <div class="cookie_picture">
                        <img class="current_cookie_pic" src="./Media/rolling_pin.jpg" alt="cutters">
                    </div>
                    <p class="cookie_content">Rolling pin</p>
                </div>
            </div>

            <div class="cookie_btn_2">
                <button>Shop Now!</button>
            </div>

        </section>

        <section class="footer">
            <ul class="footer_list_1" role="list">
                <li><a href="#">About</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>

            <ul class="footer_list_2" role="list">
                <li><a href="#">FAQ</a></li>
                <li><a href="#">My Orders</a></li>
                <li><a href="#">Favorites</a></li>
                <li><a href="#">Contacts</a></li>

            </ul>

            <ul class="footer_list_3" role="list">
                <li><a href="#">2019</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Privacy</a></li>

            </ul>
        </section>
        </article>
    </main>

</body>
</html>