ShareProgramming

りんごりら

りんごりら
＠ringorira

78 View

シンプルな商品ページ

フロントエンド
2024年08月21日に投稿 
                <body>

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="https://picsum.photos/200" alt="Random Name" width="255" height="255">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="https://picsum.photos/210" alt="Random Name" width="255" height="255">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="https://picsum.photos/220" alt="Random Name" width="255" height="255">
    </div>
  </div>
</div>

</body>

bootstrapを使用して簡単な商品一覧を作成しました。 汎用的に使用できるようにしてあり、ページに表示する画像の数や、説明文を入れらるようしています。

簡単なポートフォリオ等で使用していただくと良いかと思います

コメント

コメントはまだありません...