質問編集履歴
2
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
29
|
|
|
30
|
-
|
|
31
30
|
<body>
|
|
32
31
|
<div class="overlay" id="js__overlay"></div>
|
|
33
32
|
|
|
@@ -66,13 +65,37 @@
|
|
|
66
65
|
<p class="top-sub-head-bottom">DIGSMILE INC.</p>
|
|
67
66
|
</section>
|
|
68
67
|
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<section class="about-wrapper">
|
|
72
|
+
<div class="about-contents-wrapper">
|
|
73
|
+
<div class="container">
|
|
74
|
+
<div class="about-contents">
|
|
75
|
+
<div class="about-items">
|
|
76
|
+
<p class="section-title about-title">ABOUT US</p>
|
|
77
|
+
<p class="about-text">DIGSMILEは、デザインで人を笑顔にする会社。<br>
|
|
78
|
+
なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。<br>
|
|
79
|
+
<span class="dp-md">DIGSMILEの社名にはそんな想いが込められています。</span></p>
|
|
80
|
+
<a href="#" class="btn about-btn">READ MORE</a>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</section>
|
|
86
|
+
|
|
87
|
+
|
|
69
88
|
</main>
|
|
70
89
|
</div>
|
|
71
90
|
|
|
72
91
|
|
|
73
92
|
</body>
|
|
93
|
+
</html>
|
|
74
94
|
|
|
75
95
|
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
76
99
|
```
|
|
77
100
|
|
|
78
101
|
|
|
@@ -263,8 +286,157 @@
|
|
|
263
286
|
}
|
|
264
287
|
}
|
|
265
288
|
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
/／ドロワー以外のSASS
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
$breakpoints: (
|
|
296
|
+
"sm": "screen and (min-width: 576px)",
|
|
297
|
+
"md": "screen and (min-width: 768px)",
|
|
298
|
+
"lg": "screen and (min-width: 992px)",
|
|
299
|
+
"xl": "screen and (min-width: 1200px)"
|
|
300
|
+
) !default;
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
@mixin mq($breakpoint: md) {
|
|
304
|
+
@media #{map-get($breakpoints, $breakpoint)} {
|
|
305
|
+
@content;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
.container {
|
|
314
|
+
width: 92%;
|
|
315
|
+
margin: 0 auto;
|
|
316
|
+
max-width: 980px;
|
|
317
|
+
@include mq("md") {
|
|
318
|
+
width: 89%;
|
|
319
|
+
|
|
320
|
+
}
|
|
321
|
+
@include mq('lg') {
|
|
322
|
+
width: 95%;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
// index.html トップページ
|
|
334
|
+
.top-wrapper {
|
|
335
|
+
background:linear-gradient(90deg,#fff 0%,#fff 24.5%,$bg-color 24.5%,$bg-color 100%);
|
|
336
|
+
color: #FFFFFF;
|
|
337
|
+
height: 668px;
|
|
338
|
+
position: relative;
|
|
339
|
+
z-index: 0;
|
|
340
|
+
margin-bottom: 78px;
|
|
341
|
+
@include mq('md') {
|
|
342
|
+
height: 1024px;
|
|
343
|
+
background:linear-gradient(90deg,#fff 0%,#fff 27%,$bg-color 27%,$bg-color 100%);
|
|
344
|
+
}
|
|
345
|
+
@include mq('lg') {
|
|
346
|
+
height: 740px;
|
|
347
|
+
background:linear-gradient(90deg,#fff 0%,#fff 46%,$bg-color 46%,$bg-color 100%);
|
|
348
|
+
}
|
|
349
|
+
&:before {
|
|
350
|
+
content: "";
|
|
351
|
+
position: absolute;
|
|
352
|
+
background-image: url(../img/the-honest-company-uM-WXMr-3@2x.png);
|
|
353
|
+
width: 76.5%;
|
|
354
|
+
height: 87%;
|
|
355
|
+
object-fit: cover;
|
|
356
|
+
background-position: 54.5% 0%;
|
|
357
|
+
background-size: 450%;
|
|
358
|
+
background-repeat: no-repeat;
|
|
359
|
+
z-index: -2;
|
|
360
|
+
@include mq('md') {
|
|
361
|
+
height: 87%;
|
|
362
|
+
width: 78%;
|
|
363
|
+
background-position: 55% 0;
|
|
364
|
+
background-size: 330%;
|
|
365
|
+
}
|
|
366
|
+
@include mq('lg') {
|
|
367
|
+
background-size: 123%;
|
|
368
|
+
background-position: 80% 5%;
|
|
369
|
+
width: 76.5%;
|
|
370
|
+
height: 86.5%;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
}
|
|
266
374
|
|
|
375
|
+
&:after{
|
|
376
|
+
content: "";
|
|
377
|
+
position: absolute;
|
|
378
|
+
background-color: rgba($color: #000000, $alpha: 0.35);
|
|
379
|
+
width: 76.5%;
|
|
380
|
+
height: 87%;
|
|
381
|
+
background-position: 55% 0%;
|
|
382
|
+
top: 0;
|
|
383
|
+
z-index: -2;
|
|
384
|
+
@include mq('md') {
|
|
385
|
+
width: 78%;
|
|
386
|
+
height: 87%;
|
|
387
|
+
background-position: 45% 44%;
|
|
388
|
+
|
|
389
|
+
}
|
|
390
|
+
@include mq('lg') {
|
|
391
|
+
width: 76.5%;
|
|
392
|
+
height: 86.5%;
|
|
393
|
+
background-position: 30% 45%;
|
|
394
|
+
}
|
|
395
|
+
}
|
|
267
396
|
|
|
397
|
+
.top-text-logo {
|
|
398
|
+
|
|
399
|
+
position: relative;
|
|
400
|
+
|
|
401
|
+
&:after {
|
|
402
|
+
content: "DESIGN FOR SMILE.";
|
|
403
|
+
display: block;
|
|
404
|
+
position: absolute;
|
|
405
|
+
top:234px;
|
|
406
|
+
right: -50px;
|
|
407
|
+
width: 300px;
|
|
408
|
+
color: #fff;
|
|
409
|
+
font-size: 56px;
|
|
410
|
+
font-family: 'Montserrat', sans-serif;
|
|
411
|
+
font-weight: bold;
|
|
412
|
+
letter-spacing: 3.3px;
|
|
413
|
+
line-height: 53px;
|
|
414
|
+
@include mq('md') {
|
|
415
|
+
top: 390px;
|
|
416
|
+
right: -17px;
|
|
417
|
+
}
|
|
418
|
+
@include mq('lg') {
|
|
419
|
+
font-size: 72px;
|
|
420
|
+
top: 225px;
|
|
421
|
+
right: 150px;
|
|
422
|
+
line-height: 82px;
|
|
423
|
+
letter-spacing: 0.9px;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
@include mq('md') {
|
|
427
|
+
padding-top: 30px;
|
|
428
|
+
}
|
|
429
|
+
@include mq('lg') {
|
|
430
|
+
padding-top: 0px;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
}
|
|
434
|
+
|
|
268
435
|
|
|
269
436
|
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
|
|
440
|
+
|
|
441
|
+
|
|
270
442
|
```
|
1
htmlを修正いたしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -30,9 +30,11 @@
|
|
|
30
30
|
|
|
31
31
|
<body>
|
|
32
32
|
<div class="overlay" id="js__overlay"></div>
|
|
33
|
+
|
|
33
34
|
<nav class="side-menu">
|
|
35
|
+
|
|
34
36
|
<div class="side-menu-img">
|
|
35
|
-
<img src="/img/logo-d.png" alt="">
|
|
37
|
+
<img src="/img//logo-d.png" alt="">
|
|
36
38
|
</div>
|
|
37
39
|
<ul>
|
|
38
40
|
<li><a href="#">ABOUT US</a></li>
|
|
@@ -45,7 +47,25 @@
|
|
|
45
47
|
|
|
46
48
|
<div class="wrapper">
|
|
47
49
|
<main class="contents">
|
|
50
|
+
<section class="top-wrapper">
|
|
51
|
+
<div class="side-menu-btn" id="js__sideMenuBtn">
|
|
52
|
+
<div class="side-menu-btn-icon">
|
|
53
|
+
<span class="navbar_toggle_icon"></span>
|
|
54
|
+
<span class="navbar_toggle_icon"></span>
|
|
55
|
+
<span class="navbar_toggle_icon"></span>
|
|
48
|
-
|
|
56
|
+
</div>
|
|
57
|
+
<span class="navbar_toggle_text">MENU</span>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="container top-text-logo">
|
|
60
|
+
<div class="top-logo">
|
|
61
|
+
<img src="/img/site-logo-1@2x.png" alt="">
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<p class="top-sub-head-top">デザインで人を笑顔にする会社</p>
|
|
66
|
+
<p class="top-sub-head-bottom">DIGSMILE INC.</p>
|
|
67
|
+
</section>
|
|
68
|
+
|
|
49
69
|
</main>
|
|
50
70
|
</div>
|
|
51
71
|
|