네오캣짱님 안녕하세요 처음 뵙겠습니다.
트게더 초기 디자인을 맏은 네오캣짱 입니다.
커스텀 애니메이션 + 변경사항에 대한 설명을 남기도록 하겠습니다.
현재 디자인
동작 이벤트
1. 매인페이지 전환
트게더 로고 클릭시 기존 트게더 매인페이지가 아닌, 담게더 매인으로 버튼 전환
2. 즐겨찾기, 트위치, 클립, 소개
즐겨찾기, 트위치, 클립이 나와있었는데
임의로 변경하였습니다 (스트리머 이미지에 마우스 올릴시 나옴)
소개는 이미지 클릭
3. 검색창 아이콘
검색창도 hiddn 으로 변경
기타 오류/ 피드백 / 이미지 변경/추가 등은 덧글로 받도록 하겠습니다~
전체 코드
@import url('https://cdn.rawgit.com/YJSoft/Webfonts/0.1/BM_JUA.css');
/* 커스텀 애니메이션 그룹 - by neocat */
@import url(https://patrickmonster.github.io/tgd/css/streamer_img.css);
@import url(https://patrickmonster.github.io/tgd/css/logolink.css);
@import url(https://patrickmonster.github.io/tgd/css/snow.css);
@import url(https://patrickmonster.github.io/tgd/css/search_head.css);
/* 헤더 검색 버튼 -by neocat */
@import url(https://patrickmonster.github.io/tgd/css/search_head.css);
html{
background: #000;
}
body{
background-image: url('https://raw.githubusercontent.com/vegamyungwon/hanana1234/master/sakura1.png'), url('https://raw.githubusercontent.com/vegamyungwon/hanana1234/master/sakura2.png');
font-family: 'BM JUA', '배달의민족 주아', 'NanumBarunGothic', sans-serif;
height: auto !important;
color: #ff6c75;
}
/* 테두리 */
#article-list #article-list-category,
#main #main-content>div.frame,
header #header-bar>.row{
border-top: 5px solid;
border-color: #ff6c75;
border-radius: 20px;
}
.btn-success{
border-color: #ff6c75;
}
.btn.square,
.btn-default{
color: #fff;
background-color: #ff6c75;
}
.btn-primary,
#main .menu-wrapper>.header{
background: #ff6c75;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.btn-primary{
border-width: 0;
border-radius: 10px !important;
}
#main .menu-wrapper>.header>.fa{
color: #fff !important;
}
#article-list #article-list-category{
border-radius: 0;
border-width: 2px;
}
/* 잔거 제거 */
#main #main-content>div.frame,
header #header-bar>.row,
#main .menu-wrapper{
border-bottom: 0;
border-right: 0;
}
#article-list #article-list-menu>.btn.write:hover {
}
/* 광고 배경색 */
header #header-bar #header-top-notice strong.notice-badge,
header #header-bar #header-top-notice a {
background: #ff6c75;
border-radius: 10px;
color: #fff;
background: #ff6c75;
margin-left: -4px;
padding: 4px 8px;
font-weight: 900;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
header #header-bar #header-top-notice strong.notice-badge{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
header #header-bar #header-top-notice a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* 기타 아이콘 색상 */
.btn-success,
#article-list>.article-list-row>.item>.list-header>span{
background-color: #ff6c75 !important;
}
.fa,
#article-reply-area > .header h5,
span.a-badge i.fa.fa-info-circle,
#board-info #board-info-bottom a,
#article-list>.article-list-row>.item>.list-title>small.comment-count,
#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span,
#main .menu-wrapper>a>em{
color: #ff6c75;
}
/* 공지 아이콘 */
#article-option-area>#article-option-area-toggle-btn::after{
font: normal normal normal 14px/1 FontAwesome;
content: "\f0a1";
}
#article-option-area>#article-option-area-toggle-btn>.fa{
display: none;
}
#article-option-area>#article-option-area-toggle-btn{
border-radius: 50px;
}
/* 좌측 매뉴 공백 */
#main .menu-wrapper .spacer{
display: none;
}
/* 스트리머 이름 */
#board-info h1 a{
background: #ff6c75;
color: #fff;
border-radius: 50px;
padding: 3px;
}
/* 카테고리 배경색 */
#article-list #article-list-category>a,
#article-list #article-list-category{
background: #ffc0cb;
color: #ff6c75;
}
/* 리스트 아이템 */
#main .menu-wrapper>a:hover,
#article-list>.article-list-row:hover {
transform: scale(1.03); /* 크기가 커짐 */
border-radius: 10px;
transition: .20s; /* 0.2초에 걸쳐서 부드럽게 애니메이션이 진행 */
background: #ffdada;
}
#main .menu-wrapper>a:hover{
border-radius: 5px;
}
.header > .fa,
.btn.btn-success>i,
#addPollBtn>i,
.btn-primary > .fa{
color: #fff;
}
#board-info #viewers-area #viewers:before {
content: "마스터 ";
}
#board-info #viewers-area #viewers:after {
content: "명을 모시는 중";
}
.vote-btn[data-type="down"]{
display: none;
}
/* ===============검색버튼================ */
/* 검색버튼 색상 */
header #right-search-form>#right-search-btn{
color: #ff6c75;
}
/* 기존 테두리/ 아이콘 색상 */
header #right-search-form>#right-search-btn>i{
border: 3px solid #ff6c75;
background: #fff;
}
/* 버튼 올렸을때에 인풋 테두리 */
header #right-search-form:hover > input[type='text']{
border: 3px solid #ff6c75;
}
/* 버튼 올렸을 때에 버튼 */
header #right-search-form:hover>#right-search-btn>i{
background: #ff6c75;
color: #fff;
}
/* 스트리머 이미지 */
#board-info #board-info-profile-img{
border: 3px solid #ff6c75;
}
담다입니다 
가을코기