質問編集履歴
1
SCSSを記載していましたがコンパイル後のCSSを記載してます。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</html>
|
|
64
64
|
|
|
65
65
|
```
|
|
66
|
-
```
|
|
66
|
+
```CSS
|
|
67
67
|
/* <====== 全体共通 ======> */
|
|
68
68
|
|
|
69
69
|
* {
|
|
@@ -106,14 +106,8 @@
|
|
|
106
106
|
font-family: "Caveat", cursive;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
/* <====== 変数 ======> */
|
|
110
109
|
|
|
111
|
-
$main-bg-color: rgba(102, 89, 89, 0.281);
|
|
112
|
-
$main-color-w: rgb(255, 255, 255);
|
|
113
|
-
$main-color-b: rgb(0, 0, 0);
|
|
114
|
-
|
|
115
110
|
/* <====== works ======> */
|
|
116
|
-
|
|
117
111
|
h2#works {
|
|
118
112
|
padding-top: 12rem;
|
|
119
113
|
margin-top: -8rem;
|
|
@@ -122,42 +116,54 @@
|
|
|
122
116
|
.works-inner {
|
|
123
117
|
width: 100%;
|
|
124
118
|
height: 45rem;
|
|
119
|
+
-webkit-box-orient: vertical;
|
|
120
|
+
-webkit-box-direction: normal;
|
|
121
|
+
-ms-flex-direction: column;
|
|
125
|
-
|
|
122
|
+
flex-direction: column;
|
|
123
|
+
}
|
|
126
124
|
|
|
127
|
-
|
|
125
|
+
.works-inner .works-inner-items {
|
|
128
|
-
|
|
126
|
+
width: 90%;
|
|
129
|
-
|
|
127
|
+
height: 40rem;
|
|
130
|
-
|
|
128
|
+
margin-top: 8rem;
|
|
131
|
-
|
|
129
|
+
position: relative;
|
|
132
|
-
|
|
130
|
+
z-index: -1;
|
|
131
|
+
-webkit-box-orient: vertical;
|
|
132
|
+
-webkit-box-direction: normal;
|
|
133
|
+
-ms-flex-direction: column;
|
|
133
|
-
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
}
|
|
134
136
|
|
|
135
|
-
|
|
137
|
+
.works-inner .works-inner-items::after {
|
|
136
|
-
|
|
138
|
+
width: 100%;
|
|
137
|
-
|
|
139
|
+
height: 40rem;
|
|
138
|
-
|
|
140
|
+
content: "";
|
|
139
|
-
|
|
141
|
+
position: absolute;
|
|
140
|
-
|
|
142
|
+
left: 0rem;
|
|
141
|
-
|
|
143
|
+
top: 1rem;
|
|
144
|
+
-webkit-transform: skewY(-5deg);
|
|
142
|
-
|
|
145
|
+
transform: skewY(-5deg);
|
|
146
|
+
-webkit-transform-origin: bottom left;
|
|
143
|
-
|
|
147
|
+
transform-origin: bottom left;
|
|
144
|
-
|
|
148
|
+
z-index: -1;
|
|
145
|
-
|
|
149
|
+
background: black;
|
|
146
|
-
|
|
150
|
+
}
|
|
147
151
|
|
|
148
|
-
|
|
152
|
+
.works-inner .works-inner-items .work-font {
|
|
149
|
-
|
|
153
|
+
font-size: 1.5rem;
|
|
150
|
-
|
|
154
|
+
color: white;
|
|
151
|
-
|
|
155
|
+
}
|
|
152
156
|
|
|
153
|
-
|
|
157
|
+
.works-inner .works-inner-items .work-font a {
|
|
154
|
-
|
|
158
|
+
position: relative;
|
|
155
|
-
|
|
159
|
+
z-index: 10000;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
160
|
}
|
|
160
161
|
|
|
162
|
+
.works-inner .works-inner-items .work-font .work-arrow {
|
|
163
|
+
color: white;
|
|
164
|
+
padding: 1rem;
|
|
165
|
+
}
|
|
166
|
+
|
|
161
167
|
.work-hover:hover {
|
|
162
168
|
cursor: pointer;
|
|
163
169
|
}
|