質問編集履歴

1

HTML、CSS追記

2018/01/06 06:05

投稿

DaikiSuto
DaikiSuto

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,84 @@
10
10
 
11
11
  コード
12
12
 
13
+ HTML
14
+
15
+ <div id="languege" class="languages-section">
16
+
17
+ <div class="container">
18
+
19
+ <div class="sectiobn-title">
20
+
21
+ <h3>学習する言語</h3>
22
+
23
+ </div>
24
+
25
+ <div class="languages-box-wrapper">
26
+
27
+ <div class="languages-box">
28
+
29
+ <div class="icon">
30
+
31
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
32
+
33
+ </div>
34
+
35
+ <h4>HTML & CSS</h4>
36
+
37
+ <p>WEBページの<br>見た目を作る言語</p>
38
+
39
+ </div>
40
+
41
+ <div class="language-box">
42
+
43
+ <div class="icon">
44
+
45
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
46
+
47
+ </div>
48
+
49
+ <h4>jQuery</h4>
50
+
51
+ <p>効果やアニメーションを実装できる<br>Javascriptライブラリ</p>
52
+
53
+ </div>
54
+
55
+ <div class="language-box">
56
+
57
+ <div class="icon">
58
+
59
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
60
+
61
+ </div>
62
+
63
+ <h4>Javascript</h4>
64
+
65
+ <p>動的なWEBサイト構築に用いる<br>プログラミング言語</p>
66
+
67
+ </div>
68
+
69
+ <div class="language-box">
70
+
71
+ <div class="icon">
72
+
73
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
74
+
75
+ </div>
76
+
77
+ <h4>Git</h4>
78
+
79
+ <p>ソースコードのバージョン管理、<br>共同開発を可能にするツール</p>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+ CSS
90
+
13
91
  .languages-box-wrapper {
14
92
 
15
93
  width:60%;
@@ -36,7 +114,367 @@
36
114
 
37
115
  ```
38
116
 
39
-
117
+ html, body,
118
+
119
+ ul, ol, li,
120
+
121
+ h1, h2, h3, h4, h5, h6, p,
122
+
123
+ form, input, div {
124
+
125
+ margin: 0;
126
+
127
+ padding: 0;
128
+
129
+ }
130
+
131
+
132
+
133
+ body {
134
+
135
+ font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
136
+
137
+ font-weight: 400;
138
+
139
+ -webkit-font-smoothing: antialiased;
140
+
141
+ font-size: 14px;
142
+
143
+ color: #888;
144
+
145
+ }
146
+
147
+
148
+
149
+ li {
150
+
151
+ list-style: none;
152
+
153
+ }
154
+
155
+
156
+
157
+ a {
158
+
159
+ text-decoration: none;
160
+
161
+ color: #323a45;
162
+
163
+ transition: all .3s;
164
+
165
+ }
166
+
167
+
168
+
169
+ a:hover {
170
+
171
+ color: #0dc0c0;
172
+
173
+ text-decoration: none;
174
+
175
+ }
176
+
177
+
178
+
179
+ h2, h3, h4, h5, h6 {
180
+
181
+ margin-top: 10px;
182
+
183
+ margin-bottom: 10px;
184
+
185
+ font-weight: 400;
186
+
187
+ }
188
+
189
+
190
+
191
+ h4, h5 {
192
+
193
+ color: #444;
194
+
195
+ font-size: 18px;
196
+
197
+ }
198
+
199
+
200
+
201
+ .container {
202
+
203
+ width: 100%;
204
+
205
+ margin-right: auto;
206
+
207
+ margin-left: auto;
208
+
209
+ }
210
+
211
+
212
+
213
+ .section-title {
214
+
215
+ color: #555;
216
+
217
+ padding-top: 70px;
218
+
219
+ text-align: center;
220
+
221
+ }
222
+
223
+
224
+
225
+ .section-title h3 {
226
+
227
+ font-size: 32px;
228
+
229
+ font-weight: 300;
230
+
231
+ }
232
+
233
+
234
+
235
+ .gray-section {
236
+
237
+ background: #f4f4f4;
238
+
239
+ }
240
+
241
+
242
+
243
+ header {
244
+
245
+ height:50px;
246
+
247
+ position: fixed;
248
+
249
+ top: 0;
250
+
251
+ left:0;
252
+
253
+ right:0;
254
+
255
+ background-color:#fff;
256
+
257
+ line-height:60px;
258
+
259
+ border-bottom:1px solid #eee;
260
+
261
+ z-index: 10px;
262
+
263
+ }
264
+
265
+
266
+
267
+ .header-title {
268
+
269
+ float:left;
270
+
271
+ }
272
+
273
+
274
+
275
+ .header-logo {
276
+
277
+ color:#777;
278
+
279
+ font-weight:700;
280
+
281
+ font-size:22px;
282
+
283
+ font-family: 'Dosis', sans-serif;
284
+
285
+ }
286
+
287
+
288
+
289
+ .header-menu-right {
290
+
291
+ float:right;
292
+
293
+ }
294
+
295
+
296
+
297
+ .header-menu-right li {
298
+
299
+ float:left;
300
+
301
+ }
302
+
303
+
304
+
305
+ .header-menu-right a {
306
+
307
+ font-weight:700px;
308
+
309
+ padding-left:20px;
310
+
311
+ }
312
+
313
+ .header-menu-right a:hover {
314
+
315
+ color:#0dc0c0;
316
+
317
+ transition:color .3s;
318
+
319
+ }
320
+
321
+
322
+
323
+ .top-section {
324
+
325
+ margin:0 auto;
326
+
327
+ text-align:center;
328
+
329
+ color:#fff;
330
+
331
+ background-image:url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg);
332
+
333
+ background-size:cover;
334
+
335
+ }
336
+
337
+ .inner-bg {
338
+
339
+ padding-top:210px;
340
+
341
+ padding-bottom:120px;
342
+
343
+ background-color:rgba(0, 0, 0, 0.6);
344
+
345
+ }
346
+
347
+
348
+
349
+ .top-description {
350
+
351
+ margin-bottom:20px;
352
+
353
+ }
354
+
355
+
356
+
357
+ .top-description h2 {
358
+
359
+ font-size:40px;
360
+
361
+ margin-bottom:30px;
362
+
363
+ font-weight:400;
364
+
365
+ }
366
+
367
+ .top-description p {
368
+
369
+ color:rgba(255, 255, 255, 0.8);
370
+
371
+ font-size:18px;
372
+
373
+ }
374
+
375
+
376
+
377
+ .btn {
378
+
379
+ display:inline-block;
380
+
381
+ padding:10px 20px;
382
+
383
+ margin:20px;
384
+
385
+ font-weight:600;
386
+
387
+ font-size:18px;
388
+
389
+ cursor:pointer;
390
+
391
+ transition:all .3s;
392
+
393
+ }
394
+
395
+ .btn:hover {
396
+
397
+ color:#fff;
398
+
399
+ }
400
+
401
+
402
+
403
+ .btn-top-white {
404
+
405
+ background:rgba(250,250,250,0.06);
406
+
407
+ border:1px solid rgba(250,250,250,0.15);
408
+
409
+ color:rgba(250,250,250,0.9);
410
+
411
+ }
412
+
413
+ .btn-top-white:hover {
414
+
415
+ border:1px solid rgba(250,250,250,0.8)
416
+
417
+ }
418
+
419
+ .languages-section {
420
+
421
+ padding-bottom: 80px;
422
+
423
+ text-align: center;
424
+
425
+ }
426
+
427
+
428
+
429
+ .languages-box-wrapper {
430
+
431
+ width:60%;
432
+
433
+ height: 500px;
434
+
435
+ margin: 0 auto;
436
+
437
+ }
438
+
439
+
440
+
441
+ .languages-box {
442
+
443
+ float: left;
444
+
445
+ vertical-align: top;
446
+
447
+ width: 50%;
448
+
449
+ padding-top: 40px;
450
+
451
+ }
452
+
453
+
454
+
455
+ .languages-box .icon {
456
+
457
+ margin-bottom: 20px;
458
+
459
+ }
460
+
461
+
462
+
463
+ .features-section-top {
464
+
465
+ text-align:center;
466
+
467
+ height:376px;
468
+
469
+ }
470
+
471
+
472
+
473
+ .features-section-bottom {
474
+
475
+ padding-top:120px;
476
+
477
+ }
40
478
 
41
479
  ###試したこと
42
480