Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 249932f

Browse files
author
yeun
committed
Merge pull request #84 from spoqa/add-designer-hiring-banner
Add designer hiring banner
2 parents 5db98f2 + 5cfaf82 commit 249932f

File tree

6 files changed

+241
-97
lines changed

6 files changed

+241
-97
lines changed

‎_layouts/default.html

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<div class="header-item">
4343
<div class="spoqa-logo-wrap">
4444
<a class="spoqa-logo" href="{{ base_path }}/"><img src="{{ base_path }}/images/logo.png"></a>
45-
<a class="blog-title" href="{{ base_path }}/">Tech Blog</a>
45+
<a class="blog-title" href="{{ base_path }}/">기술 블로그</a>
4646
</div>
4747
<div class="nav">
4848
<input type="checkbox" id="toggle">
@@ -51,22 +51,32 @@
5151
<li><a class="
5252
{% if page.url == '/about.html' %}
5353
selected
54-
{% endif %} menu-about" href="{{ base_path }}/about.html">About</a></li>
54+
{% endif %} menu-about" href="{{ base_path }}/about.html">소개</a></li>
5555
<li><a class="
5656
{% if page.url != '/about.html' and page.url != '/job.html' %}
5757
selected
58-
{% endif %} menu-blog" href="{{ base_path }}/index.html">Blog</a></li>
58+
{% endif %} menu-blog" href="{{ base_path }}/index.html">블로그</a></li>
5959
<li><a class="menu-github" href="https://github.com/spoqa">GitHub</a></li>
60+
<li><a class="
61+
{% if page.url == '/job.html' %}
62+
selected
63+
{% endif %} menu-job" href="/job.html">채용정보</a></li>
6064
</ul>
6165
</div>
6266
</div>
6367
</div>
68+
<div class="hiring-banner">
69+
<div class="hiring-content">
70+
<h2 class="hiring-title">당신과 함께<br> 일하고 싶습니다.</h2>
71+
<div class="hiring-subtitle">스포카 크리에이터 팀에서 배우고 성장하면서, <br>같이 서비스와 제품을 만들어 나갈 <br>UX/UI 디자이너를 모집합니다.</div>
72+
<a target="_blank" class="btn-job" type="button" href="{{ base_path }}/job.html">채용 공고 보기</a>
73+
</div>
74+
</div>
6475
<div class="content">
6576
{{ content }}
6677
</div>
6778
<div class="push">
6879
</div>
69-
7080
<div class="footer">
7181
<div id="info">
7282
<span>© <a href="http://dodopoint.com/">Spoqa</a> Inc. All rights reserved.</span>

‎css/styles.css

Lines changed: 97 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ a.footnote:hover,
197197
}
198198
.blog-title {
199199
font-size: 15px;
200-
color: #fff;
200+
color: #b0b6c2;
201201
}
202202
.atom-img {
203203
display: inline-block;
@@ -225,12 +225,12 @@ a.footnote:hover,
225225
z-index: 2;
226226
}
227227
.toggle:hover:after {
228-
border-bottom: 3px solid #8ab0e6;
228+
border-bottom: 2px solid #8ab0e6;
229229
}
230230
.toggle:after {
231-
content: 'Menu';
231+
content: '메뉴';
232232
display: inline-block;
233-
padding: 16px 20px 12px;
233+
padding: 16px 20px 13px;
234234
background: transparent;
235235
text-align: center;
236236
font-size: 15px;
@@ -243,10 +243,10 @@ a.footnote:hover,
243243
-webkit-box-sizing: border-box;
244244
-moz-box-sizing: border-box;
245245
box-sizing: border-box;
246-
border-bottom: 3px solid transparent;
246+
border-bottom: 2px solid transparent;
247247
}
248248
#toggle:checked + .toggle:after {
249-
border-bottom: 3px solid #8ab0e6;
249+
border-bottom: 2px solid #8ab0e6;
250250
}
251251

252252
.menu {
@@ -258,18 +258,21 @@ a.footnote:hover,
258258
display: inline-block;
259259
}
260260
.menu li a {
261-
padding: 16px 20px 12px;
261+
padding: 16px 20px 13px;
262262
color: #fff;
263263
line-height: 19px;
264264
display: inline-block;
265-
border-bottom: 3px solid transparent;
265+
border-bottom: 2px solid transparent;
266266
}
267267
.menu li a:active,
268-
.menu li a:focus,
269-
.menu li a:hover,
270268
.menu li a.selected {
271269
-webkit-transition: 0.2s ease-out all;
272-
border-bottom: 3px solid #8ab0e6;
270+
border-bottom: 2px solid #8ab0e6;
271+
}
272+
.menu li a:focus,
273+
.menu li a:hover {
274+
-webkit-transition: 0.2s ease-out all;
275+
border-bottom: 2px solid #b0b6c2;
273276
}
274277
.logo-img {
275278
margin-top: 10px;
@@ -282,15 +285,6 @@ a.footnote:hover,
282285
color: white;
283286
display: inline-block;
284287
}
285-
.menu .menu-job {
286-
padding: 8px 30px;
287-
border: 1px solid #fff;
288-
border-radius: 3px;
289-
background-color: #719add;
290-
}
291-
.menu-job:hover {
292-
background-color: #5e89d6;
293-
}
294288

295289
/* post-authot-info (post-info로 수정하는게 의미상 맞을 듯) */
296290

@@ -572,16 +566,64 @@ a.footnote:hover,
572566
.footer a:hover {
573567
text-decoration: underline;
574568
}
569+
570+
/* hiring banner */
571+
572+
.hiring-banner {
573+
margin-left: auto;
574+
margin-right: auto;
575+
padding: 0 5%;
576+
height: 500px;
577+
background-size: cover;
578+
background-repeat: no-repeat;
579+
background-image: url(/images/hiring-imagex1.jpg);
580+
background-color: #333b4d;
581+
background-position: center center;
582+
-webkit-transition: 0.2s ease-out all;
583+
}
584+
.lt-ie9 .hiring-banner {
585+
background-image: url(/images/hiring-imagex1.jpg) no-repeat;
586+
background-position: center center;
587+
}
588+
.hiring-content {
589+
margin: 0 auto;
590+
padding-top: 100px;
591+
max-width: 700px;
592+
}
593+
.hiring-title {
594+
margin-bottom: 20px;
595+
font-size: 48px;
596+
font-weight: 100;
597+
line-height: 1.1em;
598+
color: white;
599+
-webkit-transition: 0.2s ease-out all;
600+
}
601+
.hiring-subtitle {
602+
color: #dce0e6;
603+
font-size: 18px;
604+
font-weight: normal;
605+
-webkit-transition: 0.2s ease-out all;
606+
}
607+
.btn-job {
608+
margin-top: 40px;
609+
padding: 14px 8%;
610+
display: inline-block;
611+
border: 1px solid #b0b6c2;
612+
border-radius: 2px;
613+
color: #fff;
614+
font-size: 18px;
615+
-webkit-transition: 0.2s ease-out all;
616+
}
617+
.btn-job:hover {
618+
color: #8ab0e6;
619+
background-color: transparent;
620+
border: 1px solid #8ab0e6;
621+
}
575622
/* responsive */
576623
@media only screen and (max-width: 650px) {
577624
body {
578625
width: 100%;
579626
}
580-
.menu .menu-job {
581-
position: absolute;
582-
right: 5%;
583-
top: 50px;
584-
}
585627
.pagination .pages li {
586628
display: none;
587629
}
@@ -593,7 +635,7 @@ a.footnote:hover,
593635
}
594636
}
595637

596-
@media only screen and (max-width: 480px) {
638+
@media only screen and (max-width: 580px) {
597639
body {
598640
width: 100%;
599641
}
@@ -621,14 +663,33 @@ a.footnote:hover,
621663
right: 0;
622664
background: rgba(7, 25, 57, 0.8);
623665
border-radius: 3px;
666+
text-align: center;
624667
}
625668
.menu li {
626669
display: block;
627670
}
628671
.menu li a {
629672
padding: 15px 0;
630673
width: 100%;
674+
}
675+
.hiring-banner {
676+
height: 430px;
677+
background-position: 70% center;
678+
}
679+
.hiring-content {
680+
padding-top: 80px;
631681
text-align: center;
682+
text-shadow: 0px 0px 5px #333b4d,
683+
0px 0px 5px #333b4d;
684+
}
685+
.hiring-title {
686+
font-size: 42px;
687+
}
688+
.hiring-subtitle br{
689+
display: none;
690+
}
691+
.btn-job {
692+
width: 70%;
632693
}
633694
.post-author-info .portrait {
634695
width: 40%;
@@ -657,11 +718,17 @@ a.footnote:hover,
657718
body {
658719
width: 100%;
659720
}
660-
.menu-job {
661-
display: none;
721+
.hiring-banner {
722+
height: 380px;
723+
}
724+
.hiring-content {
725+
padding-top: 70px;
726+
}
727+
.hiring-title {
728+
font-size: 36px;
662729
}
663-
.hiring-box {
664-
padding: 0;
730+
.btn-job {
731+
margin-top: 20px;
665732
}
666733
}
667734

‎images/hiring-imagex1.jpg

223 KB
Loading

‎images/hiring-imagex1.png

-233 KB
Binary file not shown.

‎images/hiring-imagex2.png

-557 KB
Binary file not shown.

0 commit comments

Comments
 (0)