-
Notifications
You must be signed in to change notification settings - Fork 0
/
04_CRM.html
196 lines (196 loc) · 6.93 KB
/
04_CRM.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:title" content="KangHyeonSeok Portfolio" />
<meta property="og:image" content="img/og_img.png" />
<meta property="og:description" content="웹표준과 웹 접근성을 사랑하는 강현석의 포트폴리오" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="img/hs_favicon.ico" />
<title>Project HS</title>
</head>
<body>
<div id="wrap">
<header id="header">
<h1>
<a href="/index.html" title="HS portfolio"> <span>H</span><span>S</span> </a>
</h1>
<ul class="gnb">
<li>
<a href="/aboutme.html" title="About">
<span>About me</span>
</a>
</li>
<li>
<a href="/project.html" title="Career description">
<span>Project</span>
</a>
</li>
<li>
<a href="https://nikeman0806.github.io/" title="blog" target="_blank">
Blog
</a>
</li>
</ul>
</header>
<div id="project_container">
<!-- <div class="project_visual">
<h2>
Splash CRM
</h2>
</div> -->
<div class="project_summary">
<div class="summary_tit">
<h3>Splash CRM 사이트</h3>
</div>
<ul class="summary_info">
<li>
<h4>Technology</h4>
<p>
React, HTML, SCSS
</p>
</li>
<li>
<h4>DATE</h4>
<p>
2018.12 ~
</p>
</li>
<li>
<h4>ROLE</h4>
<p>
HTML, SCSS
</p>
</li>
</ul>
<p class="summary_txt">
- 서울디자인페스티벌에서 splash 서비스를 사용한 업체에게 통계를 내어주는
서비스입니다.<br />
- 서울디자인페스티벌 주체측, splash 서비스를 사용한 업체에게 통계를
제공하였습니다.<br />
- 프론트앤드 개발자와 협업 및 디자인 작업<br />
- 통계사이트에 맞게 시안성이 좋게 ui/ux를 개선<br />
- 반응형 제작<br />
- flex를 사용하여 제작<br />
</p>
<!-- <div class="project_view_btn">
<a
href="http://sdf.splashpay.net:3003/"
title="CRM 사이트 바로가기"
target="_blank"
>
<span>사이트 바로가기</span>
<i>
<img src="img/icon_site_color.png" alt="사이트 바로가기" />
<img src="img/icon_site.png" alt="사이트 바로가기" />
</i>
</a>
</div> -->
</div>
<div class="project_detail_wrap">
<h3 class="blind">프로젝트 상세 설명</h3>
<div class="detail_visual">
<p class="detail_visual_img">
<img src="img/imac_crm.png" alt="CRM 아이맥 이미지" />
</p>
</div>
<div class="detail_responsive">
<div class="detail_responsive_txt">
<h4>사용자 환경에 맞춰 최적화되는 반응형웹</h4>
<p>
다양한 디바이스와 해상도에 맞게 최적화되는 반응형웹으로 개발하여<br />
여러 환경의 사용자에게 동일한 사용자경험을 제공하며, 사이트의 유지관리 효율성을
높였고 <br />
검색엔진에 친화적이게 제작되었습니다.
</p>
</div>
<p class="detail_responsive_img">
<img src="img/responsive_crm.png" alt="CRM 반응형 이미지" />
</p>
</div>
<ul class="detail_explain_wrap">
<li>
<div class="explain_img"></div>
<div class="explain_txt">
<h4>
보기 쉬운 ux/ui
</h4>
<p>
<span>- 그래프가 한눈에 들어오기 위해 작업하였습니다.</span>
</p>
</div>
</li>
<li>
<div class="explain_img"></div>
<div class="explain_txt">
<h4>
flex box의 사용
</h4>
<p>
<span
>- float대신 그래프의 유연성을 가중시키기 위해 flex를 사용하였습니다.</span
>
<span>- 추후 그래프의 추가를 고려하여 flex로 구현하였습니다.</span>
</p>
</div>
</li>
</ul>
</div>
<div class="project_nav_wrap">
<div class="project_nav prev">
<a href="./03_tal-ket.html" title="prev project">
<p class="project_nav_bg"></p>
<p class="project_nav_img">
<img src="img/main_tal-ket.jpg" alt="talket" />
</p>
<div class="project_nav_detail">
<h3>PREV PROJECT</h3>
<h4>Tal-ket PROJECT</h4>
<i>
<img src="img/icon_arrow_left.png" alt="화살표 icon" />
</i>
</div>
</a>
</div>
<div class="project_nav next">
<a href="./05_ticketing.html" title="prev project">
<p class="project_nav_bg"></p>
<p class="project_nav_img">
<img src="img/main_sdf.jpg" alt="sdf" />
</p>
<div class="project_nav_detail">
<h3>NEXT PROJECT</h3>
<h4>SDF PROJECT</h4>
<i>
<img src="img/icon_arrow_right.png" alt="화살표 icon" />
</i>
</div>
</a>
</div>
<div class="project_list_btn">
<a href="./project.html" title="project list">
<span class="line line01"></span>
<span class="line line02"></span>
<span class="line line03"></span>
</a>
</div>
</div>
</div>
<footer>
<p class="copy">
<small>
Copyright © 2019 Kang Hyeon Seok. All rights reserved.
</small>
</p>
</footer>
</div>
</body>
</html>