teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

ソースコード追加しました。

2021/12/08 08:19

投稿

Kimuki
Kimuki

スコア1

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,13 @@
6
6
 
7
7
  ### 該当のソースコード
8
8
 
9
+ <div class="product-wrapper">
10
+ <div class="container">
11
+ <div class="heading">
12
+ <h2>Products</h2>
13
+ </div>
14
+ <div class="products">
9
- <div class="product">
15
+ <div class="product">
10
16
  <div class ="product-icon">
11
17
  <a href="#"><img src="product-image.gif"></a>
12
18
  </div>
@@ -15,8 +21,91 @@
15
21
  <a href="#"><p class="product-price">¥1,800-</p></a>
16
22
  </div>
17
23
  </div>
24
+ <div class="product">
25
+ <div class ="product-icon">
26
+ <a href="#"><img src="product-image2.gif"></a>
27
+ </div>
28
+ <div class="product-text">
29
+ <a href="#"><p class="product-name">キャンドルホルダー</p></a>
30
+ <a href="#"><p class="product-price">¥1,200-</p></a>
31
+ </div>
32
+ </div>
33
+ <div class="product">
34
+ <div class ="product-icon">
35
+ <a href="#"><img src="product-image3.gif"></a>
36
+ </div>
37
+ <div class="product-text">
38
+ <a href="#"><p class="product-name">ブックエンド</p></a>
39
+ <a href="#"><p class="product-price">¥1,900-</p></a>
40
+ </div>
41
+ </div>
42
+ <div class="product">
43
+ <div class ="product-icon">
44
+ <a href="#"><img src="product-image4.gif"></a>
45
+ </div>
46
+ <div class="product-text">
47
+ <a href="#"><p class="product-name">ポット(植木鉢)</p></a>
48
+ <a href="#"><p class="product-price">¥800-</p></a>
49
+ </div>
50
+ </div>
51
+ <div class="product">
52
+ <div class ="product-icon">
53
+ <a href="#"><img src="product-image5.gif"></a>
54
+ </div>
55
+ <div class="product-text">
56
+ <a href="#"><p class="product-name">キャンドルホルダー</p></a>
57
+ <a href="#"><p class="product-price">¥800-</p></a>
58
+ </div>
59
+ </div>
60
+ <div class="product">
61
+ <div class ="product-icon">
62
+ <a href="#"><img src="product-image6.gif"></a>
63
+ </div>
64
+ <div class="product-text">
65
+ <a href="#"><p class="product-name">ポット(植木鉢)</p></a>
66
+ <a href="#"><p class="product-price">¥1,000-</p></a>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <div class="btn onlineshop">
71
+ <a href="#">Online Shop</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ .product-wrapper {
77
+ padding: 90px 0;
78
+ }
79
+
18
- .product {
80
+ .products {
81
+ padding: 0 20px;
82
+ text-align: center;
83
+ }
84
+
85
+
86
+
87
+ .product-icon img{
88
+ width: 49%;
89
+ border: solid 0.1px #707070;
90
+ border-radius: 50%;
91
+ }
92
+
93
+ .product-text {
94
+ font-size: 18px;
95
+ }
96
+
97
+ .product-name {
98
+ font-weight: bold;
99
+ margin-bottom: -10px;
100
+ margin-top: 40px;
101
+ }
102
+
103
+ .onlineshop {
104
+ text-align: center;
105
+ font-weight: bold;
106
+ text-decoration: underline;
107
+ border-bottom : 5px solid rgba(229,228,227,0.55);
108
+ padding: 30px 0 100px 0;
19
- margin: 0 -110px;
109
+ margin: 0 -15px;
20
- display: inline-block;
21
- padding-bottom: 60px;
110
+ font-size: 25px;
22
111
  }