index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <meta
      name="description"
      content="Built with JavaScript and API. Made it responsive and added some new features to make it even more user-friendly."
    />
    <meta property="og:title" content="Forkify Recipe App | Alamin" />
    <meta
      property="og:description"
      content="Built with JavaScript and API. Made it responsive and added some new features to make it even more user-friendly."
    />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/CodeWithAlamin/Forkify-Recipe-App/main/src/img/forkify-alamin-screenshot.png"
    />
    <meta property="og:url" content="https://forkify-alamin.netlify.app/" />
    <meta name="author" content="Alamin | codpapa360" />
    <meta
      name="keywords"
      content="forkify, jonasschmedtman, jonas schmedtman, alamin, CodeWithAlamin, recipe, cooking, food, meal, cuisine, ingredients, dish, kitchen, culinary, nutrition, healthy, diet, baking, vegetarian, vegan, gluten-free, dairy-free, desserts"
    />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Forkify Recipe App | Alamin" />
    <meta name="twitter:site" content="@https://forkify-alamin.netlify.app/" />
    <meta
      name="twitter:description"
      content="Built with JavaScript and API. Made it responsive and added some new features to make it even more user-friendly."
    />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/CodeWithAlamin/Forkify-Recipe-App/main/src/img/forkify-alamin-screenshot.png"
    />
    <meta name="twitter:image:alt" content="Forkify recipe app screenshot" />

    <link
      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700"
      rel="stylesheet"
    />
    <link rel="shortcut icon" href="src/img/favicon.png" type="image/x-icon" />

    <link rel="stylesheet" href="src/sass/main.scss" />
    <script type="module" defer src="src/js/controller.js"></script>

    <title>forkify // Search over 1,000,000 recipes</title>
  </head>

  <body>
    <div class="container">
      <header class="header">
        <img src="src/img/logo.png" alt="Logo" class="header__logo" />

        <form class="search">
          <input
            type="text"
            class="search__field"
            placeholder="Search over 1,000,000 recipes..."
          />
          <button class="btn search__btn">
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-search"></use>
            </svg>
            <span>Search</span>
          </button>
        </form>

        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__item">
              <button class="nav__btn nav__btn--add-recipe">
                <svg class="nav__icon">
                  <use href="src/img/icons.svg#icon-edit"></use>
                </svg>
                <span>Add recipe</span>
              </button>
            </li>
            <li class="nav__item">
              <button class="nav__btn nav__btn--bookmarks">
                <svg class="nav__icon">
                  <use href="src/img/icons.svg#icon-bookmark"></use>
                </svg>
                <span>Bookmarks</span>
              </button>
              <div class="bookmarks">
                <ul class="bookmarks__list">
                  <div class="message">
                    <div>
                      <svg>
                        <use href="src/img/icons.svg#icon-smile"></use>
                      </svg>
                    </div>
                    <p>
                      No bookmarks yet. Find a nice recipe and bookmark it :)
                    </p>
                  </div>

                  <!-- <li class="preview">
                    <a class="preview__link" href="#23456">
                      <figure class="preview__fig">
                        <img src="src/img/test-1.jpg" alt="Test" />
                      </figure>
                      <div class="preview__data">
                        <h4 class="preview__name">
                          Pasta with Tomato Cream ...
                        </h4>
                        <p class="preview__publisher">The Pioneer Woman</p>
                      </div>
                    </a>
                  </li> -->
                </ul>
              </div>
            </li>
          </ul>
        </nav>
      </header>

      <div class="search-results">
        <ul class="results">
          <div class="message">
            <div>
              <svg>
                <use href="src/img/icons.svg#icon-smile"></use>
              </svg>
            </div>
            <p>Search your favorite recipe :)</p>
          </div>
          <!-- 
          <li class="preview">
            <a class="preview__link preview__link--active" href="#23456">
              <figure class="preview__fig">
                <img src="src/img/test-1.jpg" alt="Test" />
              </figure>
              <div class="preview__data">
                <h4 class="preview__title">Pasta with Tomato Cream ...</h4>
                <p class="preview__publisher">The Pioneer Woman</p>
                <div class="preview__user-generated">
                  <svg>
                    <use href="src/img/icons.svg#icon-user"></use>
                  </svg>
                </div>
              </div>
            </a>
          </li>
           -->
        </ul>

        <div class="pagination">
          <!-- <button class="btn--inline pagination__btn--prev">
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-left"></use>
            </svg>
            <span>Page 1</span>
          </button>
          <button class="btn--inline pagination__btn--next">
            <span>Page 3</span>
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-right"></use>
            </svg>
          </button> -->
        </div>

        <p class="copyright">
          &copy;
          <a
            class="twitter-link"
            target="_blank"
            href="https://twitter.com/CodeWithAlamin"
            >Alamin</a
          >
          and
          <a
            class="twitter-link"
            target="_blank"
            href="https://twitter.com/jonasschmedtman"
            >Jonas Schmedtmann</a
          >. Use for learning or your portfolio. Don't use to teach.
        </p>
      </div>

      <div class="recipe">
        <div class="message">
          <div>
            <svg>
              <use href="src/img/icons.svg#icon-smile"></use>
            </svg>
          </div>
          <p>Start by searching for a recipe or an ingredient. Have fun!</p>
        </div>

        <!-- <div class="spinner">
          <svg>
            <use href="src/img/icons.svg#icon-loader"></use>
          </svg>
        </div> -->

        <!-- <div class="error">
            <div>
              <svg>
                <use href="src/img/icons.svg#icon-alert-triangle"></use>
              </svg>
            </div>
            <p>No recipes found for your query. Please try again!</p>
          </div> -->

        <!--
        <figure class="recipe__fig">
          <img src="src/img/test-1.jpg" alt="Tomato" class="recipe__img" />
          <h1 class="recipe__title">
            <span>Pasta with tomato cream sauce</span>
          </h1>
        </figure>

        <div class="recipe__details">
          <div class="recipe__info">
            <svg class="recipe__info-icon">
              <use href="src/img/icons.svg#icon-clock"></use>
            </svg>
            <span class="recipe__info-data recipe__info-data--minutes">45</span>
            <span class="recipe__info-text">minutes</span>
          </div>
          <div class="recipe__info">
            <svg class="recipe__info-icon">
              <use href="src/img/icons.svg#icon-users"></use>
            </svg>
            <span class="recipe__info-data recipe__info-data--people">4</span>
            <span class="recipe__info-text">servings</span>

            <div class="recipe__info-buttons">
              <button class="btn--tiny btn--increase-servings">
                <svg>
                  <use href="src/img/icons.svg#icon-minus-circle"></use>
                </svg>
              </button>
              <button class="btn--tiny btn--increase-servings">
                <svg>
                  <use href="src/img/icons.svg#icon-plus-circle"></use>
                </svg>
              </button>
            </div>
          </div>

          <div class="recipe__user-generated">
            <svg>
              <use href="src/img/icons.svg#icon-user"></use>
            </svg>
          </div>
          <button class="btn--round">
            <svg class="">
              <use href="src/img/icons.svg#icon-bookmark-fill"></use>
            </svg>
          </button>
        </div>

        <div class="recipe__ingredients">
          <h2 class="heading--2">Recipe ingredients</h2>
          <ul class="recipe__ingredient-list">
            <li class="recipe__ingredient">
              <svg class="recipe__icon">
                <use href="src/img/icons.svg#icon-check"></use>
              </svg>
              <div class="recipe__quantity">1000</div>
              <div class="recipe__description">
                <span class="recipe__unit">g</span>
                pasta
              </div>
            </li>

            <li class="recipe__ingredient">
              <svg class="recipe__icon">
                <use href="src/img/icons.svg#icon-check"></use>
              </svg>
              <div class="recipe__quantity">0.5</div>
              <div class="recipe__description">
                <span class="recipe__unit">cup</span>
                ricotta cheese
              </div>
            </li>
          </ul>
        </div>

        <div class="recipe__directions">
          <h2 class="heading--2">How to cook it</h2>
          <p class="recipe__directions-text">
            This recipe was carefully designed and tested by
            <span class="recipe__publisher">The Pioneer Woman</span>. Please check out
            directions at their website.
          </p>
          <a
            class="btn--small recipe__btn"
            href="http://thepioneerwoman.com/cooking/pasta-with-tomato-cream-sauce/"
            target="_blank"
          >
            <span>Directions</span>
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-right"></use>
            </svg>
          </a>
        </div>
        -->
      </div>
    </div>

    <div class="overlay hidden"></div>
    <div class="add-recipe-window hidden">
      <button class="btn--close-modal">&times;</button>
      <form class="upload">
        <div class="upload__column">
          <h3 class="upload__heading">Recipe data</h3>
          <label>Title</label>
          <input
            placeholder="Example: Veggie Pizza"
            required
            name="title"
            type="text"
          />
          <label>URL</label>
          <input
            placeholder="Source URL"
            required
            name="sourceUrl"
            type="text"
          />
          <label>Image URL</label>
          <input
            placeholder="Image sourse URL"
            required
            name="image"
            type="text"
          />
          <label>Publisher</label>
          <input
            placeholder="Publisher's name"
            required
            name="publisher"
            type="text"
          />
          <label>Prep time</label>
          <input
            placeholder="Example: 30 (in minutes)"
            required
            name="cookingTime"
            type="number"
          />
          <label>Servings</label>
          <input
            placeholder="Example: 4"
            required
            name="servings"
            type="number"
          />
        </div>

        <div class="upload__column">
          <h3 class="upload__heading">Ingredients</h3>
          <label>Ingredient 1</label>
          <input
            type="text"
            required
            name="ingredient-1"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
          <label>Ingredient 2</label>
          <input
            type="text"
            name="ingredient-2"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
          <label>Ingredient 3</label>
          <input
            type="text"
            name="ingredient-3"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
          <label>Ingredient 4</label>
          <input
            type="text"
            name="ingredient-4"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
          <label>Ingredient 5</label>
          <input
            type="text"
            name="ingredient-5"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
          <label>Ingredient 6</label>
          <input
            type="text"
            name="ingredient-6"
            placeholder="Format: 'Quantity,Unit,Description'"
          />
        </div>

        <button class="btn upload__btn">
          <svg>
            <use href="src/img/icons.svg#icon-upload-cloud"></use>
          </svg>
          <span>Upload</span>
        </button>
      </form>
    </div>
  </body>
</html>