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

このはです。

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

1週間かかりましたが、今できるコーディングで納得いく出来になりました。

☕「特に画像」上下中央に揃えをあれこれ、試して仕上げました😺

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

before ☕画像が寄ってかなりバランスが悪いです😹

after ☕かなり時間がかかりましたが、画像を上下中央にできました😺

# ２５６times課題を手直しした動画です
画像上下中央に出来ました😃 pic.twitter.com/3yuQLZfoC5
— このは (@konoha_2_) July 1, 2023

コードもまとめきるところはまとめてみました🐱🐱

HTML

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

<head>
  <meta charset="utf-8">
  <title>２５６times</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="200" alt="コッペパン">
        </a>
     </div>
       <div class="container__price">
         <p class="p__point">コッペパン</p> 
      <small class="small__price">税込価格　180円</small>
        <p>ツヤのあるふわふわのコッペパン。<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="200" alt="ツイストパン">
        </a>
     </div>
       <div class="container__price">
         <p class="p__point2">ツイストパン</p> 
      <small class="small__price">税込価格　170円</small>
        <p>モチモチとした食感が味わえます。<br>卵とバターの風味を強く感じられるところが当店のこだわりポイント。</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="200" alt="まるパン">
        </a>
     </div>
       <div class="container__price">
         <p class="p__point3">まるパン</p> 
      <small class="small__price">税込価格　160円</small>
        <p>あっさりとして素朴な味わいの<br>シンプルなパンです。</p>
    </div>
      </div> 
  
  <!-- </section> 
    </div>  -->
  
  <!-- 商品追加 -->
  <!--   product-4 -->
   <div class="product product-4">
      <div class="container__product-4">
        
        <a href="#" class="bread__img">
  
            <img width="140" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4239/86e52803443e67bdc9563f0f5ce68584a0afe1e4.png" alt="ジャム">
        </a>
  
  
          <a href="#" class="bread__img-mini">
            <img width="80" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4239/86e52803443e67bdc9563f0f5ce68584a0afe1e4.png" alt="ジャム">
        </a>
     </div>
       <div class="container__price">
         <p class="p__point4">ジャム各種</p> 
      <small class="small__price">税込価格　200円</small>
        <p>ジャム各種。給食でお馴染みの味、<br>マーマレードなど取り揃えています。</p>
    </div>
      </div> 
  
  
  <!--   product-5 -->
  <div class="product product-5">
    <div class="container__product-5">
      
      <a href="#" class="bread__img">
          <img width="160" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4236/ebaeab0cdf378b372171a1fc69504f49a8b9ca36.png" alt="ジャム大瓶">
      </a>
  
  
        <a href="#" class="bread__img-mini">
          <img width="90" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4236/ebaeab0cdf378b372171a1fc69504f49a8b9ca36.png" alt="ジャム大瓶">
      </a>
   </div>
     <div class="container__price">
       <p class="p__point5">ジャム大瓶</p> 
    <small class="small__price">税込価格　350円</small>
      <p>ご家族やご友人とお楽しみください♪</p>
  </div>
    </div> 
  
  
  <!--   product-6 -->
  <div class="product product-6">
    <div class="container__product-6">
      
      <a href="#" class="bread__img">
          <img width="150" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4240/70ee9a50d3ab2c4524af0df8e0fa7c204514d487.png" alt="おしゃれ紙袋">
      </a>
  
        <a href="#" class="bread__img-mini">
          <img width="80" src="https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4240/70ee9a50d3ab2c4524af0df8e0fa7c204514d487.png" alt="おしゃれ紙袋">
      </a>
   </div>
     <div class="container__price">
       <p class="p__point6">おしゃれ紙袋</p> 
    <small class="small__price">税込価格　30円</small>
      <p>おしゃれな紙袋各種</p>
  </div>
    </div> 
  
  
      <!-- wrap__productの閉じタグ -->
    </section> 
    <!-- containerの閉じdiv -->
  </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>
  </body>
</html>

css

@charset "utf-8";


/* 自由に記述してかまいません */
/* common */

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

.container {
  margin: 16px; 
/*   border: 3px solid skyblue;   */
}

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;
 /*     background: #2a7abc; */
    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,
.product-4,
.product-5,
.product-6 {
  height: 600px; 
  background: #fff;
  border-radius: 8px;
  border: 3px solid #FFE51E;
}

/* product-1 */
/* 画像 */
.bread__img {
   /* background: #ddff8f;  */
  display: block;
height: 268px;

  display: flex;
   align-items: center;
   justify-content: center;
}

.bread__img-mini {
    display: none;
}

  .p__point,
 .p__point2,
 .p__point3,
 .p__point4,
 .p__point5,
 .p__point6 {
  position: relative;
  font-size: 18px;
  text-align: center;
  padding: 10px;
  /* border: 3px solid #651eff;
 background: #F335FF;    */
 }

.p__point::before {
  content: '';
  background-image: url(https://user-images.githubusercontent.com/102784267/233593918-0c73e9bb-f8a3-4c5c-888a-48f7a60d2097.png);
  width: 20px;
  height: 20px;

  background-size: cover; 
  background-position: center;  
   margin-right: 16px;
  vertical-align: -10%;
  /* border: 3px solid #FFE51E; */
  display: inline-block; 
}

/* 画像の上余白 */
 .product-1,
 .product-2,
 .product-3,
 .product-4,
 .product-5,
 .product-6 {
  padding: 20px;
} 


.container__product-1,
.container__product-2,
.container__product-3,
.container__product-4,
.container__product-5,
.container__product-6 {
    /* border: 3px solid tomato;  */
  margin: 0 auto;
  height: 270px; 
  width: 400px; 
}

.container__price {
      /* border: 3px solid #6FFFA2; */
  margin: 0 auto;
  height: 250px; 
  width: 300px;
  text-align: center;
}

/* 価格 */
.small__price {
   /* border: 3px solid #d7ff36;  */
  display: inline-block;
  color: #000;
}

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

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

  .p__point4::before {
    content: '';
    background-image: url(https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4238/5dfec969928f0bb7955eef65ff4242277deb26f0.png);
    width: 30px;
    height: 30px;
    background-size: cover; 
    background-position: center;  
    display: inline-block;
     margin-right: 16px;
    vertical-align: -10%;
  }

  .p__point5::before {
    content: '';
    background-image: url(https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4238/5dfec969928f0bb7955eef65ff4242277deb26f0.png);
    width: 30px;
    height: 30px;
    background-size: cover; 
    background-position: center;  
    display: inline-block;
     margin-right: 16px;
    vertical-align: -10%;
  }
  
  .p__point6::before {
    content: '';
    background-image: url(https://256times-upload-files.s3.ap-northeast-1.amazonaws.com/production/101/4242/c702d068d0351b8ccdaa86f2e97ced5407e11f89.png);
    width: 20px;
    height: 30px;
    background-size: cover; 
    background-position: center;  
    display: inline-block;
     margin-right: 16px;
    vertical-align: -10%;
  }
  
/*  お知らせ */
.news__list-ul {
/*   border: 3px solid tomato;  */
  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; 
  /* background: transparent; */
  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; */

animation: newtagu 1.5s infinite;
}



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



.date {
/*   border: 3px solid skyblue; */
  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;
 /*   border: 3px solid gold;  */
   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;
/*   background: tomato; */
}

.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: 24px;
  background: hsl(191, 14%, 76%);  
}

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




@media (min-width: 800px) {
  /* product */
.product + .product {
  margin-top: 0px;
} 

.container {
  /* border: 3px solid #4cf0fc; */
  width: calc(100% - 32px);
  margin: 0 auto;
  margin-top: 24px;
  box-sizing: border-box; 
  max-width: 800px;
}

.wrap__product {
  /* border: 3px solid #0040ff; */
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* product */
.product-1,
.product-2,
.product-3,
.product-4,
.product-5,
.product-6 {
  height: 500px; 
  background: #fff;
  border-radius: 8px;
  border: 3px solid #FFE51E;
}

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

.bread__img-mini {
  display: block;
    /* background: #ddff8f;  */
    height: 150px;

   display: flex;
   align-items: center;
   justify-content: center;
}

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

/* 商品 */
.p__point,
.p__point2,
.p__point3,
.p__point4,
.p__point5,
.p__point6 {
 position: relative;
 font-size: 18px;
 text-align: center;
 padding: 16px;
 /* border: 3px solid #651eff;
background: #F335FF; */
}

.p__point::before {
 content: '';
 background-image: url(https://user-images.githubusercontent.com/102784267/233593918-0c73e9bb-f8a3-4c5c-888a-48f7a60d2097.png);
 width: 20px;
 height: 20px;

 background-size: cover; 
 background-position: center;  
  margin-right: 16px;
 vertical-align: -10%;
 /* border: 3px solid #FFE51E; */
 display: inline-block; 
}

.product-1,
.product-2,
.product-3,
.product-4,
.product-5,
.product-6 {
 padding: 20px;
} 


.container__product-1,
.container__product-2,
.container__product-3,
.container__product-4,
.container__product-5,
.container__product-6 {
   /* border: 3px solid tomato;  */
 margin: 0 auto;
 height: 150px; 
 width: 200px; 
}

.container__price {
     /* border: 3px solid #6FFFA2; */
 margin: 0 auto;
 height: 300px; 
 width: 200px;
 text-align: center;
}

/* 価格 */
.small__price {
  padding: 8px;
  /* border: 3px solid #d7ff36;  */
 display: inline-block;
 color: #000;
}

/* 商品 */



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







  
  /*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　『フロントエンド案件修行給食ぱん屋編』手直ししまいました。