ユーザーインターフェイスを設計して、次のページを作成します。
商品の写真、商品名、値段、詳細説明、および「お気に入りに追加」ボタンを含む、「お気に入りリスト」ページ
<html>
    <head>
        <title>お気に入りリスト</title>
    </head>
    <body>
        <h1>お気に入りリスト</h1>

        <div id="product-list">
            <div class="product">
            <img src="images/product1.jpg">
                <div class="name">商品A</div>
                <div class="price">3000円</div>
                <div class="description">商品Aの説明文が入ります。。。</div>
                <button id="product1-add-btn">お気に入りに追加</button>
            </div>

            <div class="product">
                <img src="images/product2.jpg">
                <div class="name">商品B</div>
                <div class="price">2000円</div>
                <div class="description">商品Bの説明文が入ります。。。</div>
                <button id="product2-add-btn">お気に入りに追加</button>
            </div>

            <div class="product">
                <img src="images/product3.jpg">
                <div class="name">商品C</div>
                <div class="price">3000円</div>
                <div class="description">商品Cの説明文が入ります。。。</div>
                <button id="product3-add-btn">お気に入りに追加</button>
            </div>
        </div>
    </body>
</html>