２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。

このはです。

２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。

１DAY～４DAY　架空のパン屋さんのサイト制作に挑戦しました。
「時間が思う様に取れず　グダグダになりました💦」
最終日の課題提出に完成出来ませんでした。

☕「お問合せホーム」のスタイリングがかなり難しかったです。
どうにか仕上げました😺

最後まで仕上げたかっので続けて作りました😺

☕未完成のヒーローエリアとキャッチコピー
後からWEBフォント【Googlefont】を取り入れてみました♪

before

after

☕「おしらせ」の部分に『new』をアニメーションで追加しました😺

#２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。
かなり難しかった上に時間がかかりました。
間に合わなかった所を手直ししました😉 pic.twitter.com/a8MskCPvVO
— このは (@konoha_2_) June 27, 2023

コードは改善する所だらけで、特にもっと整理して、まとめて短くしたいです🐱🐱

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <!-- Google　font 開成徳民 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="header__logo">
    <div class="icon__bi-list">
      <a href="#">
        <i class="bi bi-list"></i>
      </a>
    </div>

    <a href="#">
      <h1 class="h1__img">
        <img
          src="https://user-images.githubusercontent.com/102784267/233595856-c124accc-571b-4490-ae97-090d07d8f737.png"
          width="156" alt="給食パン屋">
      </h1>
    </a>

    <nav class="header__nav">
      <ul class="nav__ul">
        <li><a href="" class="nav__li-a">パンのお話</a></li>
        <li><a href="" class="nav__li-a">いろいろ</a></li>
        <li><a href="" class="nav__li-a">お取り寄せ</a></li>
      </ul>
    </nav>
  </header>

  <section class="content">
    <!-- Hero -->
    <div class="section__hero"></div>
    <div class="section__catch section__catch-b">
      <p>米本さんプロデュース</p>
      <p>給食ぱん屋</p>
      <p>小学校の思い出のあの味を再現！<br>懐かしい味は思わず『ほっこり♪』</p>
    </div>
  </section>

  <div class="container">
    <!-- 商品紹介 実装 -->
    <div>
      <h2>
        <span class="section__sale-h2">おすすめ給食ぱん</span>
      </h2>
    </div>

    <section class="wrap__product">
      <div class="product product-1">
        <div class="container__product-1">
          <a href="#" class="bread__img">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601083-5b2e3ea7-4594-437b-9b41-787fe7e4a138.png"
              width="450" alt="コッペパン">
          </a>

          <a href="#" class="bread__img-mini">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601083-5b2e3ea7-4594-437b-9b41-787fe7e4a138.png"
              width="350" alt="コッペパン">
          </a>
        </div>
        <div class="container__price">
          <p class="p__point">コッペパン</p>
          <small class="small__price">税込価格　180円</small>
          <p>ツヤのあるふわふわのコッペパン。<br>そのままでもやさしい甘みが自慢です。<br>もちろん、ジャムをつけてもおいしくお召し上がりいただけます（レジ横でジャムも販売しています</p>
        </div>
      </div>

      <!--   product-2 -->
      <div class="product product-2">
        <div class="container__product-2">

          <a href="#" class="bread__img">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601091-95134e25-1c2f-4310-a3e2-22b2de8a2311.png"
              width="450" alt="ツイストパン">
          </a>
          <a href="#" class="bread__img-mini">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601091-95134e25-1c2f-4310-a3e2-22b2de8a2311.png"
              width="350" alt="ツイストパン">
          </a>
        </div>
        <div class="container__price">
          <p class="p__point2">ツイストパン</p>
          <small class="small__price">税込価格　170円</small>
          <p>モチモチとした食感が味わえます。卵とバターの風味を強く感じられるところが当店のこだわりポイント。オーブントースターで1分ほど焼いてからお召し上がりいただくのがおすすめです。</p>
        </div>
      </div>

      <!-- product-3 -->
      <div class="product product-3">
        <div class="container__product-3">

          <a href="#" class="bread__img">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601076-1d532f0e-b089-48f6-a4f9-6f0a8838736e.png"
              width="450" alt="まるパン">
          </a>
          <a href="#" class="bread__img-mini">
            <img
              src="https://user-images.githubusercontent.com/102784267/233601076-1d532f0e-b089-48f6-a4f9-6f0a8838736e.png"
              width="350" alt="まるパン">
          </a>
        </div>
        <div class="container__price">
          <p class="p__point3">まるパン</p>
          <small class="small__price">税込価格　160円</small>
          <p>あっさりとして素朴な味わいのシンプルなパンです。お好みでバターをつけたり、半分に割ってハンバーグやミネストローネと一緒に食べても最高です！</p>
        </div>
      </div>
    </section>
  </div>

  <section>
    <div class="container">
      <!-- お知らせ  -->
      <div>
        <h2>
          <span class="section__sale-h2">今後のお知らせ</span>
        </h2>
      </div>
      <ul class="news__list-ul">
        <li class="li__list li__new">
          <article>
            <time class="date">2023.06.22</time>
            <span class="ico__news">おしらせ</span>
            <span class="text__news"><a href="#" class="text__news-a">６月３０日は
                『給食ぱん屋』特別企画としてお客様より新作パンの募集を予定しています、ご参加お待ちしています♪</a></span>
          </article>
        </li>

        <li class="li__list">
          <article>
            <time class="date">2023.06.15</time>
            <span class="ico__news">おしらせ</span>
            <span class="text__news"><a href="#" class="text__news-a">６月１５日は 『親子でパンを作ろうよ～！』企画を考えています</a></span>
          </article>
        </li>

        <li class="li__list">
          <article>
            <time class="date">2023.05.31</time>
            <span class="ico__news">おしらせ</span>
            <span class="text__news"><a href="#" class="text__news-a">５月３１日は 『昔懐かしい』と言えば『玉子パン』給食ぱんに押しています！</a></span>
          </article>
        </li>
      </ul>
    </div>
  </section>

  <section>
    <div class="container">
      <!-- 店舗情報 -->
      <div>
        <h2>
          <span class="section__sale-h2">店舗情報</span>
        </h2>
      </div>

      <!-- 情報 -->
      <div class="dl__info">
        <dl>
          <dt>店舗名【屋号】</dt>
          <dd>給食ぱん屋</dd>

          <dt>住所</dt>
          <dd>東京都二五六区2-5-6</dd>

          <dt>TEL</dt>
          <dd>03-○○○ー●●●●</dd>

          <dt>営業時間</dt>
          <dd>9:00~7:00</dd>

          <dt>駐車場</dt>
          <dd>5台</dd>
        </dl>
      </div>

      <!-- atlas -->
      <aside>
        <p class="aside__p"> インフォメーション<span class="access__span">information</span></p>
        <div class="aside__atlas"></div>
      </aside>
    </div>
  </section>

  <section>
    <div class="container">
      <!--お問合せホーム-->
      <div>
        <h2>
          <span class="section__sale-h2">お問合せ</span>
        </h2>
      </div>
      <!--   
フォーム -->
      <form class="form__label">
        <div>
          <label>
            <div class="te">
              <span class="required__text2">お名前</span>
              <span class="required__text">必須</span>
            </div>
            <input type="text">
          </label>
        </div>

        <div>
          <label>
            <div class="te">
              <span class="required__text2">メールアドレス</span>
              <span class="required__text">必須</span>
            </div>
            <input type="email">
          </label>
        </div>

        <div>
          <label>
            <div class="te">
              <span class="required__text2"> 種別</span>
              <span class="required__tex"></span>
            </div>
            <select class="select__option">
              <option>-- お問合せ種目を選択してください --</option>
              <option>商品の発送について</option>
              <option>商品の賞味期限について</option>
              <option>商品の冷凍便</option>
              <option>商品の常温便</option>
              <option>その他お問合せ</option>
            </select>
          </label>
        </div>

        <div>
          <label>
            <div class="te">
              <span class="required__text2">内容 </span>
              <span class="required__tex"></span>
            </div>
            <textarea class="textarea__label"></textarea>
          </label>
        </div>
        <div class="btn">
          <button class="form__btn">送信</button>
        </div>
      </form>
    </div>
  </section>

  <!-- フッター -->
  <!-- (c) 256times.com を必ず含めてください -->
  <footer class="footer__icon">

    <div class="icon__sns">

      <a href="#" class="icon__twitter">
        <i class="bi bi-twitter"></i>
        <span class="text text1">Twitter</span>
      </a>

      <a href="#" class="icon__instagram">
        <i class="bi bi-instagram"></i>
        <span class="text text2">Instagram</span>
      </a>

      <a href="#" class="icon__facebook">
        <i class="bi bi-facebook"></i>
        <span class="text text3">Facebook</span>
      </a>

      <a href="#" class="icon__line">
        <i class="bi bi-line"></i>
        <span class="text text4">Line</span>
      </a>
    </div>
    <small>(c) 256times.com</small>
  </footer>

  <!-- JavaScriptの実装をする方は以下のタグを削除しないでください -->
  <script src="js/main.js"></script>
</body>
</html>

css

@charset "utf-8";

/* common */
* {
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.container {
  margin: 16px;
}

p {
  line-height: 1.6;
}

/* header */
.header__logo {
  background: hsl(191, 14%, 76%);
  height: 80px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.header__img {
  line-height: 0px;
}

.h1__img {
  display: inline-block;
}

.bi {
  color: #fff;
  display: inline-block;
  margin-right: 8px;
  font-size: 24px;
}

.header__nav {
  display: inline-block;
  margin-left: auto;
}

.nav__ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav__li-a {
  border: 2px solid #FFE51E;
  border-radius: 16px;
  color: #000;
  background: #fff;
  display: block;
  width: 100px;
  line-height: 32px;
  text-align: center;
  box-shadow: 0 3px 0 #FFD48E;

  transition: .3s;
}

li+li {
  margin-left: 8px;
}

.nav__li-a:hover {
  background: #FFFAAE;
}

.nav__li-a:active {
  color: #000;
  box-shadow: 0 1px 3px 0 #FFD48E;
  transform: translateX(-5px);
}

/* hero */
.content {
  position: relative;
}

.section__hero {
  height: 300px;
  padding: 16px;
  text-align: center;
  background-image: url(https://user-images.githubusercontent.com/102784267/233598836-5aff188d-1c15-4721-8fd3-36d671527a45.png);
  background-size: cover;
  background-position: center;
}

.section__catch {
  font-family: 'Kaisei Tokumin', serif;
  height: 300px;
  padding: 16px;
  background: transparent;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

/* product */
.section__sale-h2 {
  font-family: 'Kaisei Tokumin', serif;
  display: inline-block;
  padding: 8px;
  margin: 0 0 16px 0;
  font-size: 24px;
  background: linear-gradient(transparent 50%, #FFE51E 50%);
}

.product+.product {
  margin-top: 24px;
}

.product-1,
.product-2,
.product-3 {
  height: 600px;
  background: #fff;
  border-radius: 8px;
  border: 3px solid #FFE51E;
}

/* product-1 */
/* 画像 */
.bread__img {
  display: block;
  margin: 0 auto;
}

.bread__img-mini {
  display: none;
}

.p__point,
.p__point2,
.p__point3 {
  display: inline-block;
  position: relative;
  padding: 16px;
  font-size: 24px;
  text-align: center;
}

.p__point::before {
  content: '';
  background-image: url(https://user-images.githubusercontent.com/102784267/233593918-0c73e9bb-f8a3-4c5c-888a-48f7a60d2097.png);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  display: inline-block;
  vertical-align: baseline;
}

.product-1 {
  padding: 20px;
}


.container__product-1 {
  margin: 0 auto;
  height: 270px;
  width: 400px;
}

.container__price {
  margin: 0 auto;
  height: 200px;
  width: 300px;
  text-align: center;
}

/* 価格 */
.small__price {
  display: inline-block;
  color: #000;
}

/* product-2 */
.p__point2 {
  position: relative;
  font-size: 24px;
  text-align: center;
}

.p__point2::before {
  content: '';
  background-image: url(https://user-images.githubusercontent.com/102784267/233593896-bf3c3e55-bce6-42ba-a252-4befe3afb880.png);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  display: inline-block;
  vertical-align: baseline;
}

.product-2 {
  padding: 20px;
}

.container__product-2 {
  margin: 0 auto;
  height: 270px;
  width: 400px;
}

/* product-3 */
.p__point3 {
  position: relative;
  font-size: 24px;
  text-align: center;
}

.p__point3::before {
  content: '';
  background-image: url(https://user-images.githubusercontent.com/102784267/233593885-70f01e34-9fe8-42ff-9bcc-7be2c9f85092.png);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  display: inline-block;
  vertical-align: baseline;
}

.product-3 {
  padding: 20px;
}

.container__product-3 {
  margin: 0 auto;
  height: 270px;
  width: 400px;
}

/*  お知らせ */
.news__list-ul {
  padding: 16px;
  list-style: none;
}

.li__list {
  border-bottom: 2px solid #d8dada;
  padding: 16px;
}

.li__new {
  position: relative;
}

.li__new::after {
  position: absolute;
  content: "new";
  background: aliceblue;
  right: 0;
  top: 0;
  font-size: 24px;
  color: red;
  font-weight: bold;
  padding: 0 8px;
  vertical-align: middle;
  display: inline-block;

  animation-name: newtagu;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes newtagu {
  50% {
    transform: rotateX(360deg)
  }

  100% {
    transform: rotateX(360deg)
  }
}

.date {
  line-height: 2;
}

.ico__news {
  line-height: 2;
  border: 2px solid yellowgreen;
  border-radius: 8px;
  padding: 2px 8px;
}

.text__news-a {
  display: block;
  font-weight: bold;
  color: #000;
  line-height: 1.6;
  color: #000;
}

.text__news-a:hover {
  color: #ddd;
  opacity: 0.8;
}


/*  店舗情報 */

/* 情報 */
.dl__info {
  width: 400px;
  background: #fff;
}

dt {
  padding: 8px;
  font-weight: bold;
  color: #fff;
  background: #d8dada;
}

dd {
  padding: 8px;
  margin-left: 30px;
}

/* atlas */
aside {
  margin: 50px 0;
}

.aside__p {
  font-family: 'Kaisei Tokumin', serif;
  display: inline-block;
  padding: 8px;
  margin: 36px 0;
  font-size: 24px;
  background: linear-gradient(transparent 50%, #FFE51E 50%);
}

.access__span {
  font-size: 12px;
  color: red;
}

.aside__atlas {
  height: 400px;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  background-image: url(https://user-images.githubusercontent.com/102784267/233602792-de27a1e7-8d37-47f1-a8cc-6f4b5621edb5.png);
  background-size: cover;
  background-position: center;
}

/*  お問合せフォーム */
.form__label {
  margin: 0 auto;
  /*   background: pink; */
  max-width: 600px;
  width: 100%;
}

label {
  font-size: 18px;
  font-weight: bold;
}

/* 親 */
.te {
  display: flex;
  gap: 16px;
  margin-left: 17%;
  padding: 8px;
  width: 200px;
}

.required__text {
  display: block;
  color: red;
}

.required__text2 {
  display: block;
  text-align: center;
}

input[type="text"] {
  display: block;
  margin: 0 auto;
  border-radius: 3px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  color: #000;
  border: solid 1px #ccc;
  margin-bottom: 20px;
  width: 400px;
}

input[type="email"] {
  display: block;
  margin: 0 auto;
  border-radius: 3px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  color: #000;
  border: solid 1px #ccc;
  margin-bottom: 20px;
  width: 400px;
}

.select__option {
  margin: 0 auto;
  display: block;
  border-radius: 3px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  color: #000;
  border: solid 1px #ccc;
  margin-bottom: 20px;
  width: 400px;
  font-size: 16px;
}

option {
  font-size: 16px;
}

.textarea__label {
  display: block;
  margin: 0 auto;
  border-radius: 3px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  color: #000;
  border: solid 1px #ccc;
  margin-bottom: 20px;
  width: 400px;
  height: 200px;
}

/* ボタン */
.form__btn {
  all: unset;
  border: 1px solid #FFE51E;
  border-radius: 8px;
  color: #000;
  background: #fff;
  text-align: center;
  font-size: 20px;
  box-shadow: 0 3px 0 #FFD48E;
  padding: 8px;
  width: 200px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  margin-bottom: 24px;

  transition: .3s;
}

.form__btn:hover {
  background: #FFFAAE;
  opacity: 0.8;
}

.form__btn:active {
  color: #000;
  box-shadow: 0 1px 3px 0 #FFD48E;
  transform: translateX(-5px);
}

/* footer */
.text {
  display: inline-block;
}

.text {
  display: none;
}

.bi-twitter:hover {
  color: rgb(0, 169, 216);
}

.bi-instagram:hover {
  color: rgb(129, 0, 152);
}

.bi-facebook:hover {
  color: #1877f2;
}

.bi-line:hover {
  color: #42c507;
}

.icon__sns {
  background: hsl(191, 14%, 76%);
  cursor: pointer;
  text-align: right;
}

footer {
  padding: 16px;
  background: hsl(191, 14%, 76%);
}

small {
  display: block;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

@media (min-width: 800px) {
/* hero */
.section__hero {
  height: 400px;
  /* padding: 16px; */
}

.section__catch {
  height: 400px;
  font-size: 36px;

}

  /* product */
  .product+.product {
    margin-top: 0px;
  }

  .container {
    width: calc(100% - 32px);
    margin: 0 auto;
    margin-top: 24px;
    box-sizing: border-box;
    max-width: 800px;
  }

  .wrap__product {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  /* product-1 */
  /* 画像 */
  .bread__img {
    display: none;
  }

  .bread__img-mini {
    display: block;
  }

  .bread__img-mini:hover {
    opacity: .8;
  }


  .product-1,
  .product-2,
  .product-3 {
    width: calc((100% - 16px) / 2);
  }

  /*footer */
  .text {
    color: #fff;
    margin-right: 24px;
  }

  .text,
  .bi-twitter,
  .bi-instagram,
  .bi-facebook,
  .bi-line {
    display: inline-block;
  }

  .bi-list {
    display: none;
  }

  .icon__twitter:hover .bi-twitter {
    color: rgb(0, 169, 216);
  }

  .icon__twitter:hover .text1 {
    color: rgb(0, 169, 216);
  }

  .icon__instagram:hover .bi-instagram {
    color: rgb(129, 0, 152);
  }

  .icon__instagram:hover .text2 {
    color: rgb(129, 0, 152);
  }

  .icon__facebook:hover .bi-facebook {
    color: #1877f2;
  }

  .icon__facebook:hover .text3 {
    color: #1877f2;
  }

  .icon__line:hover .bi-line {
    color: #42c507;
  }

  .icon__line:hover .text4 {
    color: #42c507;
  }
}

WEB制作にチャレンジ

４８歳からWEB制作の勉強をしています。

２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。

２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。

２５６times 『フロントエンド案件修行 給食ぱん屋編』に参加しました。

２５６times　『フロントエンド案件修行給食ぱん屋編』に参加しました。