-
Notifications
You must be signed in to change notification settings - Fork 0
/
textType03.html
263 lines (231 loc) · 13.5 KB
/
textType03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 유형</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: 'GmarketSans';
font-weight: 500;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
em {
font-style: normal;
}
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
.section>span {
display: block;
text-align: center;
font-size: 16px;
text-decoration: underline;
margin-bottom: 16px;
}
.mb70 {
margin-bottom: 70px !important;
}
.skyBlue {
background-color: #F6F8FD;
}
/* textType */
.text__innner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__innner .text {
width: 32%;
background: #fff;
padding: 30px;
box-sizing: border-box;
border-radius: 10px;
}
.text__desc {
font-size: 18px;
line-height: 1.5;
font-weight: 300;
padding-bottom: 25px;
border-bottom: 1px solid #f4f4f4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
min-height: 189px;
}
.text__info {
padding: 25px 0 25px 63px;
border-bottom: 1px solid #f4f4f4;
margin-bottom: 30px;
}
.text__info h3 {
font-size: 26px;
margin-bottom: 5px;
position: relative;
padding-top: 1px;
}
.text__info h3::before {
content: '';
width: 54px;
height: 54px;
border-radius: 50%;
position: absolute;
left: -63px;
top: 0;
background-image: url("data:image/svg+xml,%3Csvg width='33' height='31' viewBox='0 0 33 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0802 19.4233C19.8824 20.532 18.2581 21.1549 16.5645 21.1549C14.8709 21.1549 13.2466 20.532 12.0488 19.4233M11.7742 12.2851H11.7902M21.3548 12.2851H21.3708M30.9355 15.2421C30.9355 16.9895 30.5638 18.7199 29.8416 20.3343C29.1193 21.9487 28.0608 23.4156 26.7263 24.6513C25.3919 25.8869 23.8076 26.8671 22.064 27.5358C20.3205 28.2045 18.4517 28.5487 16.5645 28.5487C14.6773 28.5487 12.8085 28.2045 11.065 27.5358C9.32141 26.8671 7.73717 25.8869 6.4027 24.6513C5.06823 23.4156 4.00968 21.9487 3.28747 20.3343C2.56526 18.7199 2.19354 16.9895 2.19354 15.2421C2.19354 11.713 3.70762 8.32837 6.4027 5.8329C9.09778 3.33743 12.7531 1.93549 16.5645 1.93549C20.3759 1.93549 24.0312 3.33743 26.7263 5.8329C29.4214 8.32837 30.9355 11.713 30.9355 15.2421Z' stroke='%234857ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-color: #dcdffb;
background-position: center;
}
.text__info h3.c1::before {
background-color: #DCDFFB;
background-image: url("data:image/svg+xml,%3Csvg width='33' height='31' viewBox='0 0 33 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0802 19.4233C19.8824 20.532 18.2581 21.1549 16.5645 21.1549C14.8709 21.1549 13.2466 20.532 12.0488 19.4233M11.7742 12.2851H11.7902M21.3548 12.2851H21.3708M30.9355 15.2421C30.9355 16.9895 30.5638 18.7199 29.8416 20.3343C29.1193 21.9487 28.0608 23.4156 26.7263 24.6513C25.3919 25.8869 23.8076 26.8671 22.064 27.5358C20.3205 28.2045 18.4517 28.5487 16.5645 28.5487C14.6773 28.5487 12.8085 28.2045 11.065 27.5358C9.32141 26.8671 7.73717 25.8869 6.4027 24.6513C5.06823 23.4156 4.00968 21.9487 3.28747 20.3343C2.56526 18.7199 2.19354 16.9895 2.19354 15.2421C2.19354 11.713 3.70762 8.32837 6.4027 5.8329C9.09778 3.33743 12.7531 1.93549 16.5645 1.93549C20.3759 1.93549 24.0312 3.33743 26.7263 5.8329C29.4214 8.32837 30.9355 11.713 30.9355 15.2421Z' stroke='%234857EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.text__info h3.c2::before {
background-color: #FFE0E0;
background-image: url("data:image/svg+xml,%3Csvg width='33' height='31' viewBox='0 0 33 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0802 19.4233C19.8824 20.532 18.2581 21.1549 16.5645 21.1549C14.8709 21.1549 13.2466 20.532 12.0488 19.4233M11.7742 12.2851H11.7902M21.3548 12.2851H21.3708M30.9355 15.2421C30.9355 16.9895 30.5638 18.7199 29.8416 20.3343C29.1193 21.9487 28.0608 23.4156 26.7263 24.6513C25.3919 25.8869 23.8076 26.8671 22.064 27.5358C20.3205 28.2045 18.4517 28.5487 16.5645 28.5487C14.6773 28.5487 12.8085 28.2045 11.065 27.5358C9.32141 26.8671 7.73717 25.8869 6.4027 24.6513C5.06823 23.4156 4.00968 21.9487 3.28747 20.3343C2.56526 18.7199 2.19354 16.9895 2.19354 15.2421C2.19354 11.713 3.70762 8.32837 6.4027 5.8329C9.09778 3.33743 12.7531 1.93549 16.5645 1.93549C20.3759 1.93549 24.0312 3.33743 26.7263 5.8329C29.4214 8.32837 30.9355 11.713 30.9355 15.2421Z' stroke='%23C66464' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.text__info h3.c3::before {
background-color: #E8FFD6;
background-image: url("data:image/svg+xml,%3Csvg width='33' height='31' viewBox='0 0 33 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0802 19.4233C19.8824 20.532 18.2581 21.1549 16.5645 21.1549C14.8709 21.1549 13.2466 20.532 12.0488 19.4233M11.7742 12.2851H11.7902M21.3548 12.2851H21.3708M30.9355 15.2421C30.9355 16.9895 30.5638 18.7199 29.8416 20.3343C29.1193 21.9487 28.0608 23.4156 26.7263 24.6513C25.3919 25.8869 23.8076 26.8671 22.064 27.5358C20.3205 28.2045 18.4517 28.5487 16.5645 28.5487C14.6773 28.5487 12.8085 28.2045 11.065 27.5358C9.32141 26.8671 7.73717 25.8869 6.4027 24.6513C5.06823 23.4156 4.00968 21.9487 3.28747 20.3343C2.56526 18.7199 2.19354 16.9895 2.19354 15.2421C2.19354 11.713 3.70762 8.32837 6.4027 5.8329C9.09778 3.33743 12.7531 1.93549 16.5645 1.93549C20.3759 1.93549 24.0312 3.33743 26.7263 5.8329C29.4214 8.32837 30.9355 11.713 30.9355 15.2421Z' stroke='%236AAF35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.text__info h3 em {
font-size: 16px;
font-weight: 300;
}
.text__info .star span {
width: 16px;
height: 15px;
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.64123 1.53722C9.39009 0.820928 8.29566 0.820928 8.04368 1.53722L6.76782 5.17232C6.71287 5.32837 6.60601 5.46433 6.46253 5.56072C6.31905 5.65711 6.14631 5.709 5.96905 5.70896H1.84162C1.02857 5.70896 0.689233 6.67334 1.34774 7.11664L4.68731 9.36273C4.83076 9.45929 4.93753 9.59542 4.9923 9.75162C5.04707 9.90781 5.04704 10.0761 4.99221 10.2322L3.71719 13.8673C3.46521 14.5836 4.35134 15.1801 5.009 14.7368L8.34858 12.4908C8.49211 12.3941 8.665 12.3421 8.84246 12.3421C9.01991 12.3421 9.1928 12.3941 9.33634 12.4908L12.6759 14.7368C13.3336 15.1801 14.2197 14.5844 13.9677 13.8673L12.6927 10.2322C12.6379 10.0761 12.6378 9.90781 12.6926 9.75162C12.7474 9.59542 12.8541 9.45929 12.9976 9.36273L16.3372 7.11664C16.9948 6.67334 16.6572 5.70896 15.8433 5.70896H11.715C11.5379 5.70883 11.3654 5.65687 11.222 5.56049C11.0787 5.46411 10.972 5.32825 10.9171 5.17232L9.64123 1.53722Z' stroke='%23F9C94E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.text__info .star span.fill {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.64123 0.537216C8.39009 -0.179072 7.29566 -0.179072 7.04368 0.537216L5.76782 4.17232C5.71287 4.32837 5.60601 4.46433 5.46253 4.56072C5.31905 4.65711 5.14631 4.709 4.96905 4.70896H0.84162C0.0285657 4.70896 -0.310767 5.67334 0.34774 6.11664L3.68731 8.36273C3.83076 8.45929 3.93753 8.59542 3.9923 8.75162C4.04707 8.90781 4.04704 9.07605 3.99221 9.23223L2.71719 12.8673C2.46521 13.5836 3.35134 14.1801 4.009 13.7368L7.34858 11.4908C7.49211 11.3941 7.665 11.3421 7.84246 11.3421C8.01991 11.3421 8.1928 11.3941 8.33634 11.4908L11.6759 13.7368C12.3336 14.1801 13.2197 13.5844 12.9677 12.8673L11.6927 9.23223C11.6379 9.07605 11.6378 8.90781 11.6926 8.75162C11.7474 8.59542 11.8541 8.45929 11.9976 8.36273L15.3372 6.11664C15.9948 5.67334 15.6572 4.70896 14.8433 4.70896H10.715C10.5379 4.70883 10.3654 4.65687 10.222 4.56049C10.0787 4.46411 9.972 4.32825 9.91709 4.17232L8.64123 0.537216Z' fill='%23F9C94E'/%3E%3C/svg%3E");
}
.text__btn {
text-align: center;
}
.text__btn a {
background: #4857ec;
color: #fff;
display: inline-block;
border-radius: 50px;
padding: 10px 30px;
}
</style>
</head>
<body>
<section id="textType" class="text__wrap gmark section skyBlue">
<h2>스터디 후기</h2>
<p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다.</p>
<div class="text__innner container">
<div class="text">
<p class="text__desc">불과 3달전만해도 여러 원인들로 인해 자존감이 밑바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속으로 울고싶다를 외쳤던 저였는데
이제는 조금이나마 이겨 낼 수
있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해있는 제가 되었으면 좋겠네요...</p>
<div class="text__info">
<h3 class="c1">이태용 <em>웹쓰 24기</em></h3>
<div class="star">
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span></span>
</div>
</div>
<div class="text__btn">
<a href="#">자세히 보기</a>
</div>
</div>
<div class="text">
<p class="text__desc">진심 학교나 학원보다 더 많이 배운거라고 생각하고, 무지하고 말안듣고 자존감바닥인 저를 팩폭도 해주시고, 버리지 않아주셔서 감사...합니다
쌤!!!!!!!!!!
회사에서 잘리지않고,,, 존버하겠습니다!!!!!!!!!!!! </p>
<div class="text__info">
<h3 class="c2">이희진 <em>웹쓰 24기</em></h3>
<div class="star">
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span></span>
</div>
</div>
<div class="text__btn">
<a href="#">자세히 보기</a>
</div>
</div>
<div class="text">
<p class="text__desc">제가 게을러서 의도치않게 자꾸 말을 안듣는 학생이 되었었지만 정말 선생님 말씀 틀린거 하나도 없었다는거 잘 알고있습니다,,, ㅎㅎ
아 그리고 마지막 하고 싶은 말은 저 새벽 5~6시에 자는 ㄹㅇ올빼미형인간인데... 쌤이랑 두달 공부했다고.....</p>
<div class="text__info">
<h3 class="c3">정승연 <em>웹쓰 24기</em></h3>
<div class="star">
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span class="fill"></span>
<span></span>
</div>
</div>
<div class="text__btn">
<a href="#">자세히 보기</a>
</div>
</div>
</div>
</section>
</body>
</html>