質問編集履歴

4

コードの修正をしました。

2019/04/24 00:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,60 @@
38
38
 
39
39
  </header>
40
40
 
41
+ <div class="container">
42
+
43
+ <div class="first-section">
44
+
45
+ <p class="top-text">プログラミングで<br>人生の安定を手に入れよう</p>
46
+
47
+ <img src="iSARA_img/isaralogo.png" alt="iSARA">
48
+
49
+ <p class="bottom-text">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
50
+
51
+ </div>
52
+
53
+
54
+
55
+ <div class="second-section">
56
+
57
+ <p class="one">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</p>
58
+
59
+ <p class="two">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p>
60
+
61
+ <a href="" class="three">お問い合わせ&資料請求はこちら</a>
62
+
63
+ <p class="four">第4期生:2018年12月3日 ~ 2018年12月22日 *締め切りました</p>
64
+
65
+ <p class="five">第5期生:2019年4月8日 ~ 2019年4月27日 *締め切りました</p>
66
+
67
+ <p class="six">第6期生:資料請求受付中です</p>
68
+
69
+ <div class="SNS_button">
70
+
71
+ <div class="twitter-button">
72
+
73
+ <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">
74
+
75
+ Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
76
+
77
+ </div>
78
+
79
+ <div class="facebook-button">
80
+
81
+ <div id="fb-root"></div>
82
+
83
+ <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>
84
+
85
+ <div class="fb-like" data-href="https://isara.life/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
86
+
87
+ </div>
88
+
89
+ </div>
90
+
91
+ </div>
92
+
93
+
94
+
41
95
  ```
42
96
 
43
97
 
@@ -64,13 +118,15 @@
64
118
 
65
119
  opacity: 1;
66
120
 
121
+ width: 100%;
122
+
67
123
  }
68
124
 
69
125
 
70
126
 
71
127
  header .container {
72
128
 
73
- height: 75px;
129
+ height: 100px;
74
130
 
75
131
  }
76
132
 
@@ -146,6 +202,196 @@
146
202
 
147
203
  }
148
204
 
205
+
206
+
207
+ .first-section {
208
+
209
+ position: relative;
210
+
211
+ top: 100px;
212
+
213
+ }
214
+
215
+
216
+
217
+ .first-section .top-text {
218
+
219
+ text-align: center;
220
+
221
+ font-weight: bold;
222
+
223
+ font-size: 35px;
224
+
225
+ line-height: 130%;
226
+
227
+ }
228
+
229
+
230
+
231
+ .first-section img {
232
+
233
+ display: block;
234
+
235
+ margin: 0 auto;
236
+
237
+ width: 315px;
238
+
239
+ height: 100px;
240
+
241
+ }
242
+
243
+
244
+
245
+ .first-section .bottom-text {
246
+
247
+ text-align: center;
248
+
249
+ font-weight: bold;
250
+
251
+ font-size: 20px;
252
+
253
+ position: relative;
254
+
255
+ top: 30px;
256
+
257
+ }
258
+
259
+
260
+
261
+ .second-section {
262
+
263
+ position: relative;
264
+
265
+ text-align: center;
266
+
267
+ top: 200px;
268
+
269
+ background-color: #EBB94D;
270
+
271
+ padding: 35px;
272
+
273
+ }
274
+
275
+
276
+
277
+ .second-section .one,
278
+
279
+ .second-section .four,
280
+
281
+ .second-section .five,
282
+
283
+ .second-section .six {
284
+
285
+ color: white;
286
+
287
+ }
288
+
289
+
290
+
291
+ .second-section p {
292
+
293
+ margin: 0 auto;
294
+
295
+ font-size: 20px;
296
+
297
+ font-weight: bold;
298
+
299
+ text-align: center;
300
+
301
+ }
302
+
303
+
304
+
305
+ .second-section .three {
306
+
307
+ display: inline-block;
308
+
309
+ font-size: 30px;
310
+
311
+ font-weight: bold;
312
+
313
+ text-decoration: none;
314
+
315
+ margin: 50px auto;
316
+
317
+ background-color: #D84940;
318
+
319
+ padding: 35px 290px;
320
+
321
+ border-radius: 55px;
322
+
323
+ color: white;
324
+
325
+ }
326
+
327
+
328
+
329
+ .second-section .two {
330
+
331
+ background-color: white;
332
+
333
+ color: #D84940;
334
+
335
+ width: 41%;
336
+
337
+ border-radius: 6px;
338
+
339
+ margin-top: 20px;
340
+
341
+ }
342
+
343
+
344
+
345
+ .second-section .one {
346
+
347
+ line-height: 35px;
348
+
349
+ }
350
+
351
+
352
+
353
+ .second-section .four,
354
+
355
+ .second-section .five,
356
+
357
+ .second-section .six {
358
+
359
+ letter-spacing: 3px;
360
+
361
+ font-size: 20px;
362
+
363
+ line-height: 60px;
364
+
365
+ }
366
+
367
+
368
+
369
+ .second-section .twitter-button,
370
+
371
+ .second-section .twitter-button {
372
+
373
+ float: left;
374
+
375
+ margin-right: 5px;
376
+
377
+ }
378
+
379
+
380
+
381
+ .third-section {
382
+
383
+ height: 590px;
384
+
385
+ }
386
+
387
+
388
+
389
+ .third-section .title {
390
+
391
+ font-size: 20px;
392
+
393
+ }
394
+
149
395
  ```
150
396
 
151
397
 

3

タイトルと本文を編集しました。

2019/04/24 00:35

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- ヘッダー透過してしまいます。どのようすれば透過しいようにできすか?
1
+ 固定位置最上部になせん。
test CHANGED
@@ -1,6 +1,6 @@
1
1
  お世話になります。
2
2
 
3
- サイト模写をしている初心者コーダーです。ヘッダーにCSSでpositionにfixedを指定して、z-indexの数値を10に設定しました。しかし、プレビューで下スクロールすると透過してしいます。どうすれば透過しいようにできるのでしょうか?
3
+ サイト模写をしている初心者コーダーです。ヘッダーにCSSでpositionにfixedを指定して、z-indexの数値を10に設定しました。しかし、固定位置が最上部なりせん。どうすれば固定位置が最上部にりますか?
4
4
 
5
5
 
6
6
 

2

スクショの修正をしました。

2019/04/22 23:01

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
 
7
- iSaraというサイトの模写をしていま![![![![イメージ](d3d44c5dd28930093ebe6bcf4308c5ae.png)](5f8a69b6a7585a79067928de77d24865.png)説明](2e46fa67090dceacc53be2d39e5766da.png)](ef69839406319e5b6df5a9afa011410a.png)す。URLは下記です。
7
+ iSaraというサイトの模写をしています。URLは下記です。
8
8
 
9
9
  https://isara.life/
10
10
 
@@ -147,3 +147,11 @@
147
147
  }
148
148
 
149
149
  ```
150
+
151
+
152
+
153
+ ![スクショ1](da2b3933216f7cfa5f88017711a892c0.png)
154
+
155
+ ![スクショ2](047ff1d39829b934b46e6869ce4d8a01.png)
156
+
157
+ ![スクショ3](0ea6c326af7cbb5a98797d6d6804893c.png)

1

現状のスクショを載せました。

2019/04/22 22:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
 
7
- iSaraというサイトの模写をしています。URLは下記です。
7
+ iSaraというサイトの模写をしていま![![![![イメージ](d3d44c5dd28930093ebe6bcf4308c5ae.png)](5f8a69b6a7585a79067928de77d24865.png)説明](2e46fa67090dceacc53be2d39e5766da.png)](ef69839406319e5b6df5a9afa011410a.png)す。URLは下記です。
8
8
 
9
9
  https://isara.life/
10
10