質問編集履歴

1

html cssを追記いたします。

2019/06/16 11:01

投稿

gomakasu423
gomakasu423

スコア31

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,149 @@
25
25
  ![![イメージ説明](3ec2983022352ee1bb2f58e356c2c72d.png)](30afc5e2d503aef7a849a4a080d31c4f.png)
26
26
 
27
27
  ![イメージ説明](596623cfc20334d6c0621769650090eb.png)
28
+
29
+
30
+
31
+
32
+
33
+ ```css
34
+
35
+ .top-page-wrapper{
36
+
37
+ background: url("./img/カフェ風景画像.png") no-repeat center center / cover;
38
+
39
+ z-index: -11;
40
+
41
+ }
42
+
43
+ .top-page-wrapper-inner{
44
+
45
+ max-width: 940px;
46
+
47
+ margin: 0 auto;
48
+
49
+ width: 100%;
50
+
51
+ padding-top: 135px;
52
+
53
+ padding-bottom: 131px;
54
+
55
+
56
+
57
+
58
+
59
+ }
60
+
61
+ .top-page-logo-wrap{
62
+
63
+ width:468px;
64
+
65
+ height: 455px;
66
+
67
+ max-width: 100%;
68
+
69
+ margin: 0 auto;
70
+
71
+ padding: 131px 0 135px 0;
72
+
73
+ border-radius: 50%;
74
+
75
+ background-color: #fff;
76
+
77
+ border: solid 20px #42210B;
78
+
79
+ position: relative;
80
+
81
+ z-index: 2;
82
+
83
+
84
+
85
+ }
86
+
87
+ .top-page-logo-wrap img{
88
+
89
+ width: 291px;
90
+
91
+ height: 240px;
92
+
93
+ margin: 0 auto;
94
+
95
+ position: absolute;
96
+
97
+ top: 56px;
98
+
99
+ left: 16%;
100
+
101
+ z-index: 1;
102
+
103
+ /* border-radius: 50%; */
104
+
105
+ }
106
+
107
+ .Shadow{
108
+
109
+ height: 94px;
110
+
111
+ width: 468px;
112
+
113
+ position: absolute;
114
+
115
+ top: 590px;
116
+
117
+ left: 383px;
118
+
119
+ background-color: #42210B;
120
+
121
+ z-index: 0;
122
+
123
+ border-radius: 60%;
124
+
125
+ }
126
+
127
+
128
+
129
+ ```
130
+
131
+
132
+
133
+ ```HTML
134
+
135
+ <div class="top-page-wrapper">
136
+
137
+ <div class="top-page-wrapper-inner">
138
+
139
+ <div class="top-page-logo-wrap">
140
+
141
+ <div class="top-page-log">
142
+
143
+ <img src="./img/ノマド家ロゴ.png" alt="">
144
+
145
+ </div>
146
+
147
+ </div>
148
+
149
+ <div class="Shadow"></div>
150
+
151
+ </div>
152
+
153
+ <div class="Nomod-Declaration">
154
+
155
+ <div class="Nomod-Declaration-inner">
156
+
157
+ <p class="fs-L">Cafe of the nomad, by the nomad, for the nomad.<br>
158
+
159
+ ノマドの、ノマドによる、ノマドのためのカフェ。
160
+
161
+ </p>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+ </div>
168
+
169
+
170
+
171
+
172
+
173
+ ```