CodePen Embed - 出品テンプレート2

<!-- 写真スライダー&メニュー-->
<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<style>
.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }
.main1 p { line-height: 24px;font-size: 1rem; }
.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }
.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 1rem; line-height:1.2; text-align: left }
.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }
.margin-bottom_change{ padding-bottom: 10px !important }
h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }
.product_dec h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f328"; }
.pay h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f53d";font-weight: 900; }
.ship h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f48b"; font-weight: 900; }
.term h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f508"; font-weight: 900; }
.warning h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f071";font-weight: 900;  }



*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #444;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.slider {
 
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: center;
  padding-top: 100%;
}
.slider__nav {
  width: 12px;
  height: 12px;
  margin: 1rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  appearance: none;
  backface-visibility: hidden;
}
.slider__nav:checked {
  animation: check 0.5s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  transform: translateX(0%);
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  transform: translateX(-25%);
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  transform: translateX(-50%);
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  transform: translateX(-75%);
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  transition: all 1s ease-out;
  display: flex;
  flex-flow: row nowrap;
}
.slider__contents {
  height: auto;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

 img {
 height: auto;
 width: 100%;
 max-height: 600px;
 max-width: 600px;

}
.slider__image {
  font-size: 10rem;
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}



</style>


<div class="main1"><h1>Item Title</h1>

 <div class="slider">
    <input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked"/>
    <input class="slider__nav" type="radio" name="slider" title="slide2"/>
    <input class="slider__nav" type="radio" name="slider" title="slide3"/>
    <input class="slider__nav" type="radio" name="slider" title="slide4"/>
   <div class="slider__inner">
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_1.jpg?1553332267">
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_2.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_3.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_4.jpg?1553332267" >
      </div>
    </div>
</div>




<div class="product_dec">
<h2>Description</h2>
<p>こちらに商品説明を入力してください。
</p>
</div>

<div class="pay">
<h2>Payment</h2>
<p>こちらに支払い方法を入力してください。
</p>
</div>
<div class="ship">
<h2>Shipping</h2>
<p>こちらに発送方法を入力してください。
</p>
</div>
<div class="term">
<h2>Terms of Sale</h2>
<p>こちらに取引事項を入力してください。
</p>
</div>
<div class="warning">
<h2>Please Note</h2>
<p class="margin-bottom_change">輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。
</p>
</div>

</div>

  <!-- 写真スライダー&開閉メニュー-->
<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<style>
.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }
.main1 p { line-height: 24px;font-size: 1rem; }
.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }
.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 1rem; line-height:1.2; text-align: left }
.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }
.margin-bottom_change{ padding-bottom: 10px !important }
h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }
.product_dec h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f328"; }
.pay h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f53d";font-weight: 900; }
.ship h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f48b"; font-weight: 900; }
.term h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f508"; font-weight: 900; }
.warning h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f071";font-weight: 900;  }

.main1 h2:after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  color: #ffffff;
  font-weight: 900;
float: right;
 
}
.main1 h2[aria-expanded="true"]:after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  color: #ffffff;
  font-weight: 900;
  float: right;
  
}




*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #444;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.slider {
 
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: center;
  padding-top: 100%;
}
.slider__nav {
  width: 12px;
  height: 12px;
  margin: 1rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  appearance: none;
  backface-visibility: hidden;
}
.slider__nav:checked {
  animation: check 0.5s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  transform: translateX(0%);
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  transform: translateX(-25%);
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  transform: translateX(-50%);
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  transform: translateX(-75%);
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  transition: all 1s ease-out;
  display: flex;
  flex-flow: row nowrap;
}
.slider__contents {
  height: auto;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

 img {
 height: auto;
 width: 100%;
 max-height: 600px;
 max-width: 600px;

}
.slider__image {
  font-size: 10rem;
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}



</style>


<div class="main1"><h1>Item Title</h1>

 <div class="slider">
    <input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked"/>
    <input class="slider__nav" type="radio" name="slider" title="slide2"/>
    <input class="slider__nav" type="radio" name="slider" title="slide3"/>
    <input class="slider__nav" type="radio" name="slider" title="slide4"/>
   <div class="slider__inner">
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_1.jpg?1553332267">
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_2.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_3.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="slider__contents">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_4.jpg?1553332267" >
      </div>
    </div>
</div>




<div class="product_dec accordion-box">
<h2 data-toggle="collapse" href="#collapse1" aria-expanded="true">Description</h2>
<p id="collapse1" class="collapse">こちらに商品説明を入力してください。
</p>
</div>

<div class="pay">
<h2 data-toggle="collapse" href="#collapse2" aria-expanded="true">Payment</h2>
<p id="collapse2" class="collapse">こちらに支払い方法を入力してください。
</p>
</div>
<div class="ship">
<h2 data-toggle="collapse" href="#collapse3" aria-expanded="true">Shipping</h2>
<p id="collapse3" class="collapse">こちらに発送方法を入力してください。
</p>
</div>
<div class="term">
<h2 data-toggle="collapse" href="#collapse4" aria-expanded="true">Terms of Sale</h2>
<p id="collapse4" class="collapse">こちらに取引事項を入力してください。
</p>
</div>
<div class="warning">
<h2 data-toggle="collapse" href="#collapse5" aria-expanded="true">Please Note</h2>
<p id="collapse5" class="margin-bottom_change collapse">輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。
</p>
</div>


</div>

  <!-- 写真&固定メニュー-->
<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<style>
.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }
.main1 p { line-height: 24px;font-size: 1rem; }
.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }
.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 1rem; line-height:1.2; text-align: left }
.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }
.margin-bottom_change{ padding-bottom: 10px !important }
h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }
.product_dec h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f328"; }
.pay h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f53d";font-weight: 900; }
.ship h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f48b"; font-weight: 900; }
.term h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f508"; font-weight: 900; }
.warning h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f071";font-weight: 900;  }



*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #444;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}


 img {
 
 padding-bottom: 30px;

}

</style>


<div class="main1"><h1>Item Title</h1>

<div class="container-fluid">
   <div class="row" >
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="col-sm-6">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_1.jpg?1553332267">
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="col-sm-6">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_2.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="col-sm-6">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_3.jpg?1553332267" >
      </div>
   <!-- ☆☆以下のimg src="○○○○○○○○○○"の写真参照先を変更してください☆☆    -->
      <div class="col-sm-6">
        <img src="https://static.mercdn.net/item/detail/orig/photos/m28449473272_4.jpg?1553332267" >
      </div>
    </div>
</div>




<div class="product_dec">
<h2>Description</h2>
<p>こちらに商品説明を入力してください。
</p>
</div>

<div class="pay">
<h2>Payment</h2>
<p>こちらに支払い方法を入力してください。
</p>
</div>
<div class="ship">
<h2>Shipping</h2>
<p>こちらに発送方法を入力してください。
</p>
</div>
<div class="term">
<h2>Terms of Sale</h2>
<p>こちらに取引事項を入力してください。
</p>
</div>
<div class="warning">
<h2>Please Note</h2>
<p class="margin-bottom_change">輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。
</p>
</div>

</div>
This Pen is owned by Ryuki Sato on CodePen.
See more by @RYUPI on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.