mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 18:51:41 +09:00
#1354 XEIcon 페이지 수정 및 레이아웃 설정에 불필요한 항목 제거
This commit is contained in:
bnu
parent
6aad09162b
commit
0ec6feec97
4 changed files with 12 additions and 100 deletions
|
|
@ -11,32 +11,32 @@
|
|||
<div class="tit"><h1>FEATURE</h1></div>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-pen"></i><span class="blind">사이트 제목 바꾸기</span></div>
|
||||
<div class="ico"><i class="xi-pen"></i><span class="blind">사이트 제목 바꾸기</span></div>
|
||||
<h2>한개의 폰트, 680개의 아이콘</h2>
|
||||
<p>웹 콘텐츠의 목적에 맞는 아이콘을 다양한 구성에서 찾아볼 수 있습니다.<br /><a href="http://xpressengine.github.io/XEIcon/library_common.html" target="_blank">라이브러리</a>에서 필요한 아이콘을 찾아보세요!</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-pen"></i><span class="blind">메뉴 구조 구성하기</span></div>
|
||||
<div class="ico"><i class="xi-sitemap"></i><span class="blind">메뉴 구조 구성하기</span></div>
|
||||
<h2>호환성</h2>
|
||||
<p>XEIcon은 자바스크립트 없이 구현됩니다. <br />또한 다양한 브라우저에서도 동일한 뷰로 웹 페이지를 노출합니다.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-layout-left-two"></i><span class="blind">레이아웃 디자인 바꾸기</span></div>
|
||||
<div class="ico"><i class="xi-layout-top-left"></i><span class="blind">레이아웃 디자인 바꾸기</span></div>
|
||||
<h2>최적화</h2>
|
||||
<p>XpressEngine 뿐 아니라, 다양한 프레임워크에서 동일하게 구현됩니다. 다양한 프레임워크에서 자유롭게 이용해 보세요!</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-pen"></i><span class="blind">초기화면 바꾸기</span></div>
|
||||
<div class="ico"><i class="xi-home"></i><span class="blind">초기화면 바꾸기</span></div>
|
||||
<h2>확장성</h2>
|
||||
<p>백터 아이콘으로 만들어진 XEIcon은 어떤 크기로도 확장이 가능하며 높은 해상도의 화면에서도 선명한 형태를 유지합니다.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-marquee-add"></i><span class="blind">기능과 디자인 추가하기</span></div>
|
||||
<div class="ico"><i class="xi-marquee-add"></i><span class="blind">기능과 디자인 추가하기</span></div>
|
||||
<h2>자유로운 변형</h2>
|
||||
<p>CSS를 통해 아이콘의 색상, 크기, 그림자 등을 손쉽게 변형할 수 있습니다. <a href="http://xpressengine.github.io/XEIcon/examples.html" target="_blank">LESS, SASS로 추가된 기능</a>으로 더 넓어진 활용범위를 확인하세요!</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ico"><i class="xe-brush"></i><span class="blind">레이아웃 꾸미기</span></div>
|
||||
<div class="ico"><i class="xi-paint-brush"></i><span class="blind">레이아웃 꾸미기</span></div>
|
||||
<h2>오픈소스</h2>
|
||||
<p>XEIcon은 OFL 라이선스를 따르는 오픈소스입니다.<br />모든 사용자에게 무료로 제공됩니다. <a href="http://xpressengine.github.io/XEIcon/license.html" target="_blank">라이선스</a>를 확인해 보세요!</p>
|
||||
</li>
|
||||
|
|
@ -50,22 +50,22 @@
|
|||
<li>
|
||||
<h2>최신버전 다운로드</h2>
|
||||
<p>가장 최신 버전 구성을 압축파일로<br />다운로드 받아볼 수 있습니다.</p>
|
||||
<a href="http://xpressengine.github.io/XEIcon/"><i class="xeicon xe-download"></i> Download</a>
|
||||
<a href="http://xpressengine.github.io/XEIcon/"><i class="xeicon xi-download"></i> Download</a>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Git 저장소 복제</h2>
|
||||
<p>Github에서 로컬 저장소로 복제하여 사용할 수 있습니다.</p>
|
||||
<a href="https://github.com/xpressengine/XEIcon" target="_blank"><i class="xeicon xe-arrow-right"></i> check out</a>
|
||||
<a href="https://github.com/xpressengine/XEIcon" target="_blank"><i class="xeicon xi-arrow-right"></i> check out</a>
|
||||
</li>
|
||||
<li>
|
||||
<h2>CDN by jsDelivr</h2>
|
||||
<p>한줄의 코드만 작성하면 다운로드 없이 XEIcon을 사용할 수 있습니다.</p>
|
||||
<a href="http://xpressengine.github.io/XEIcon/started.html" target="_blank"><i class="xeicon xe-arrow-right"></i> check out</a>
|
||||
<a href="http://xpressengine.github.io/XEIcon/started.html" target="_blank"><i class="xeicon xi-arrow-right"></i> check out</a>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Install with Bower</h2>
|
||||
<p>Bower 서비스에서 XEIcon 패키지를 바로 설치할 수 있습니다.</p>
|
||||
<a href="#"><i class="xeicon xe-arrow-right"></i> check out</a>
|
||||
<a href="#"><i class="xeicon xi-arrow-right"></i> check out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -76,58 +76,3 @@
|
|||
<a href="https://github.com/xpressengine/XEIcon" target="_blank" class="btn_github">github</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
/* reset parent style */
|
||||
.body.sub {width:100% !important; margin:0;}
|
||||
.body.sub.full_width .content {width:100% !important; padding-bottom:0px !important;}
|
||||
|
||||
/* XEicon page common style */
|
||||
.XEicon .fixedwidth {width:1200px; margin:0 auto;}
|
||||
.XEicon .tit {position:relative;}
|
||||
.XEicon .tit h1 {font-size:29px; text-align:center; letter-spacing:2px;}
|
||||
.XEicon .tit h1:after {position:absolute; top:115%; left:49%; width:20px; height:3px; background-color:#cda25a; content: "";}
|
||||
|
||||
/* a tag style */
|
||||
.XEicon p a{color:#444}
|
||||
.XEicon p a:hover,
|
||||
.XEicon p a:active,
|
||||
.XEicon p a:focus{color:#cda25a;border-bottom:1px solid #cda25a}
|
||||
|
||||
/* section .main_title */
|
||||
.XEicon .main_title h1 {margin-bottom:47px;font-size:34px;font-weight:400;color:#cda25a;text-align:center;text-transform: uppercase}
|
||||
.XEicon .main_title p {font-size:15px;line-height:28px;color:#444;text-align:center}
|
||||
|
||||
/* section .feature */
|
||||
.XEicon .feature{height:518px;padding-top:120px;}
|
||||
.XEicon .feature ul{padding-top:80px}
|
||||
.XEicon .feature li{position:relative;float:left;width:314px;min-height:140px;padding:0 16px 0 70px;margin:0 0 30px 0}
|
||||
.XEicon .feature h2{padding:7px 24px 13px 0;font-size:17px;font-weight:normal;line-height:23px;color:#333}
|
||||
.XEicon .feature p{padding:0 24px 0 0;font-size:14px;line-height:26px;color:#888}
|
||||
.XEicon .feature .ico{position:absolute;top:0;left:0;width:48px;height:48px;font-size:22px;text-align:center;line-height:50px;color:#555}
|
||||
|
||||
/* section .get_started */
|
||||
.XEicon .get_started {height:550px; padding-top:80px; background: #f6f6f6; box-sizing:border-box;}
|
||||
.XEicon .get_started .cont {font-size:15px; margin-top:75px; color:#888;}
|
||||
.XEicon .get_started ul {margin-top:34px;}
|
||||
.XEicon .get_started li {position:relative; float:left; width:286px; height:212px; margin-right:15px; border:1px solid #e8e8e8; background:#fff; text-align:center;}
|
||||
.XEicon .get_started li:last-child {margin-right:0;}
|
||||
.XEicon .get_started li h2 {padding:33px 0 19px; font-size:17px; font-weight: normal}
|
||||
.XEicon .get_started li p {padding: 0 37px; font-size:14px; line-height: 26px; color:#888;}
|
||||
.XEicon .get_started li > a {position:absolute; display:block; bottom:0; width:100%; height:50px; background:#888; border-top:1px solid #e1e1e1; line-height: 50px; font-size:14px; font-weight:600; text-transform:uppercase; color:#fff; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
|
||||
.XEicon .get_started li > a:hover,
|
||||
.XEicon .get_started li > a:active,
|
||||
.XEicon .get_started li > a:focus {background-color:#cda25a;color:#fff;}
|
||||
|
||||
.XEicon .get_started li > a .xeicon {display: none; margin-right:6px; font-size:140%; vertical-align: middle}
|
||||
.XEicon .get_started li > a:hover .xeicon {display: inline-block; margin-top:-4px;}
|
||||
|
||||
/* section .contribution */
|
||||
.XEicon .contribution {height:442px; padding-top:93px; box-sizing:border-box; text-align:center;}
|
||||
.XEicon .contribution .cont {font-size:15px;line-height:26px;text-align:center; margin-top:58px; color:#888;}
|
||||
.XEicon .contribution .btn_github{display:inline-block;margin:50px 0;padding:0 42px;height:52px;border:2px solid #cda25a;background-color:#fff;font-size:16px;line-height:52px;letter-spacing:1px;color:#cda25a;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
|
||||
.XEicon .contribution .btn_github:hover,
|
||||
.XEicon .contribution .btn_github:active
|
||||
.XEicon .contribution .btn_github:focus{background-color:#cda25a;color:#fff}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue