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

質問編集履歴

1

HTMLファイル追加致しました。よろしくお願いします。

2021/01/02 07:23

投稿

NISUKE
NISUKE

スコア2

title CHANGED
File without changes
body CHANGED
@@ -8,120 +8,71 @@
8
8
 
9
9
  以下コード
10
10
  ```
11
- /* CSSのリセット(消さないでください) */
12
- html, body,
13
- ul, ol, li,
14
- h1, h2, h3, h4, h5, h6, p,
15
- form, input, div {
16
- margin: 0;
17
- padding: 0;
18
- }
19
-
20
- body {
21
- font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
22
- }
23
-
24
- li {
25
- list-style: none;
26
- }
27
-
28
- /* ここからCSSを記述してください */
29
- .header {
30
- height: 90px;
31
- background-color:#26d0c9;
32
- color: #fff;
33
- }
34
-
35
-
36
- .header-logo {
37
- font-size: 36px;
38
- padding: 20px 40px;
39
- float: left;
40
- }
41
-
42
- .header-list li {
43
- float: left;
44
- padding: 33px 20px;
45
- }
46
-
47
- .main {
48
- padding: 100px 80px;
49
- }
50
-
51
- .copy-container h1 {
52
- font-size: 140px;
53
- }
54
-
55
- .copy-container h2 {
56
- font-size: 60px;
57
- }
58
-
59
- .copy-container span {
60
- color: #ff4a4a;
61
- }
62
-
63
-
64
- .contents {
65
- height: 500px;
66
- margin-top: 100px;
67
- }
68
-
69
- .section-title {
70
- font-size: 28px;
71
- border-bottom: 2px solid #dee7ec;
72
- padding-bottom: 15px;
73
- margin-bottom: 50px;
74
- }
75
-
76
- .contents-item {
77
- float: left;
78
- margin-right: 40px;
79
- }
80
-
81
- .contents-item p {
82
- font-size: 24px;
83
- margin-top: 30px;
84
- }
85
-
86
- .contact-form {
87
- padding-top: 100px;
88
- }
89
-
90
-
91
-
92
- input, textarea {
93
- width: 400px;
94
- margin-top: 10px;
95
- margin-bottom: 30px;
96
- padding: 20px;
97
- font-size: 18px;
98
- border: 1px solid #dee7ec;
99
- }
100
-
101
- .contact-submit {
102
- background-color: #dee7ec;
103
- color: #889eab;
104
- }
105
-
106
- .footer {
107
- height: 120px;
108
- padding: 40px;
109
- background-color: #2f5167;
110
- color: #fff;
111
- }
112
-
113
- .footer-list {
114
- float: right;
115
- }
116
-
117
- .footer-list li {
118
- padding-bottom: 20px;
119
- }
120
-
121
- .footer-logo {
122
- font-size: 32px;
123
- float: left;
124
- }
11
+ <!DOCTYPE html>
12
+ <html>
13
+ <head>
14
+ <meta charset="utf-8">
15
+ <title>Progate</title>
16
+ <link rel="stylesheet" href="stylesheet.css">
17
+ </head>
18
+ <body>
19
+ <!-- ここからHTMLを書き始めてください -->
20
+ <div class="header">
21
+ <div class="header-logo">Progate</div>
22
+ <div class="header-list">
23
+ <ul>
24
+ <li>プログラミングとは</li>
25
+ <li>学べるレッスン</li>
26
+ <li>お問い合わせ</li>
27
+ </ul>
28
+ </div>
29
+ </div>
30
+ <div class="main">
31
+ <div class="copy-container">
32
+ <h1>HELLO WORLD<span>.</span></h1>
33
+ <h2>プログラミングの世界へようこそ</h2>
34
+ </div>
35
+ <div class="contents">
36
+ <h3 class="section-title">学べるレッスン</h3>
37
+ <div class="contents-item">
38
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
39
+ <p>HTML & CSS</p>
40
+ </div>
41
+ <div class="contents-item">
42
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
43
+ <p>PHP</p>
44
+ </div>
45
+ <div class="contents-item">
46
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
47
+ <p>Ruby</p>
48
+ </div>
49
+ <div class="contents-item">
50
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
51
+ <p>Swift</p>
52
+ </div>
53
+ </div>
54
+ <div class="contact-form">
55
+ <h3 class="section-title">お問い合わせ</h3>
56
+ <P>メールアドレス (必須)</P>
57
+ <input>
58
+ <P>お問い合わせ内容 (必須)</P>
59
+ <textarea></textarea>
60
+ <P>※必須項目は必ずご入力ください</P>
61
+ <input class="contact-submit" type="submit" value="送信">
62
+ </div>
63
+ <div class="footer">
64
+ <div class="footer-logo">Progate</div>
65
+ <div class="footer-list">
66
+ <ul>
67
+ <li>会社概要</li>
68
+ <li>採用</li>
69
+ <li>お問い合わせ</li>
70
+ </ul>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </body>
75
+ </html>
125
76
  ```
126
77
 
127
78
  よろしくお願いいたします。