-
Notifications
You must be signed in to change notification settings - Fork 0
/
imageType01.html
137 lines (124 loc) · 3.82 KB
/
imageType01.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
<!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>이미지유형 01</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.Nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* 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;
margin-bottom: 20px;
text-align: center;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
margin-bottom: 70px;
text-align: center;
}
/* imageType01 */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
}
.image.img1 {
background: url(img/img_bg_01.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(img/img_bg_02.jpg) no-repeat center / cover;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
color: #fff;
}
.image__desc {
font-size: 18px;
margin-bottom: 10px;
color: #000;
line-height: 1.4;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
padding: 10px 20px;
background-color: #da7740;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 300;
display: inline-block;
}
.image__btn.yellow {
background-color: #DAAD40;
}
</style>
</head>
<body>
<section id="imageType01" class="image__wrap Nexon section">
<h2>반려견 기르기</h2>
<p>반려견을 기르는 분들을 위한 사이트 입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">강아지 산책</h3>
<p class="image__desc">반려견 산책시의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 강아지 산책시에는 목줄을 반드시 착용하시기 바랍니다.</p>
<a class="image__btn" href="#" title="자세히 보기" >자세히보기</a>
</article>
<article class="image img2">
<h3 class="image__title">강아지 산책</h3>
<p class="image__desc">반려견 산책시의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 강아지 산책시에는 목줄을 반드시 착용하시기 바랍니다.</p>
<a class="image__btn yellow" href="#" title="자세히 보기" >자세히보기</a>
</article>
</div>
</section>
</body>
</html>