현재는 프로젝트 의뢰를 받고 있지 않습니다. 기타 문의가 있으신분은 남겨주시기 바랍니다.
문의하기
XEANT
HOME
WORKS
DEVLAB
DEMO
BLOG
SUPPORTS
로그인
회원가입
다크테마
XEANT에게 제안하기
등록하기
URL에 예제가 보여줄 페이지의 주소를 입력하세요. (http://gjworks.me/page/example.html)
제목
navigation
Component
Headers
Navigation
Heroes
Features
Lists
Cards
Dashboard
Page Sections
Footers
etc
HTML CODE
<section class="fixed inset-y-0 left-0 w-96 flex transform transition duration-500 ease-in-out"> <div class="relative w-screen max-w-full"> <div class="absolute flex right-0 top-0 w-8 h-8 z-50"> <button aria-label="panel" class="sideNav-close relative w-8 h-8 flex items-center justify-center bg-gray-800 text-gray-300 hover:text-gray-100"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> </path> </svg> </button> </div> <div class="h-full flex flex-col space-y-6 py-6 bg-black shadow-xl overflow-y-auto"> <div class="relative flex-1 px-4 sm:px-6"> <!-- Replace with your content --> <div class="relative px-4 sm:px-6 h-full"> <div class="h-full flex items-center"> <div class="w-full"> <ul class="list-none w-full"> <li class="text-left"> <a href="#" class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1 text-gray-200 ">Service</a> </li> <li class="text-left"> <a href="#" class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1 text-gray-500 ">Components</a> </li> <li class="text-left"> <a href="#" class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1 text-gray-200 ">Blog</a> </li> <li class="text-left"> <a href="#" class="block transition duration-500 ease-in-out hover:translate-y-1 transform text-2xl font-semibold hover:text-gray-500 px-3 py-3 lg:px-6 mx-1 text-gray-200 ">Supports</a> </li> </ul> <div class="text-gray-400 px-6 pt-6"> <div class="text-black text-base font-semibold mb-3"><svg class="svg-inline--fa fa-map-marker-alt fa-w-12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""> <path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"> </path> </svg><!-- <i class="fas fa-map-marker-alt"></i> --> </div> <div class="text-gray-400 text-sm"> (44429) 울산광역시 중구 종가로 100 울산테크노파크 기술혁신A동 302호<br> Email : gjworks2@gmail.com </div> </div> <footer class="pt-5 pb-8"> <div class="px-3"> <div class="flex flex-wrap grid grid-cols-1 pt-5 md:pt-0"> <div class="col-span-1 pt-3 pb-3 order-2 md:order-2 md:order-1"> <div class="list-none flex flex-wrap justify-start"> <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3" href="#">Terms of service</a> <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3" href="#">Privacy policy</a> <span class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xs leading-6 px-3">ⓒ <strong>Gjworks</strong>.</span> </div> </div> <!-- <div class="flex items-center justify-center logo order-0 md:order-0 md:order-2"> <a href="/"> <img class="w-10 h-10 m-0" src="/layouts/tailwindcss/assets/images/gjworks_black.svg" alt="로고" data-toggle="tooltip" data-placement="bottom" data-html="true" title="지제이웍스"> <object type="image/svg+xml" data="{{ asset('plugins/gjworks/src/Themes/Gjworks/assets/images/gjworks.svg') }}" data-toggle="tooltip" data-placement="bottom" data-html="true" title="지제이웍스"></object> </a> </div> --> <div class="col-span-1 pt-3 pb-3 order-1 md:order-1 md:order-3"> <div class="list-none flex justify-start"> <a href="#" class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3" target="_blank" rel="noopener"><svg class="svg-inline--fa fa-medium fa-w-14" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="medium" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""> <path fill="currentColor" d="M0 32v448h448V32H0zm372.2 106.1l-24 23c-2.1 1.6-3.1 4.2-2.7 6.7v169.3c-.4 2.6.6 5.2 2.7 6.7l23.5 23v5.1h-118V367l24.3-23.6c2.4-2.4 2.4-3.1 2.4-6.7V199.8l-67.6 171.6h-9.1L125 199.8v115c-.7 4.8 1 9.7 4.4 13.2l31.6 38.3v5.1H71.2v-5.1l31.6-38.3c3.4-3.5 4.9-8.4 4.1-13.2v-133c.4-3.7-1-7.3-3.8-9.8L75 138.1V133h87.3l67.4 148L289 133.1h83.2v5z"> </path> </svg><!-- <i class="fab fa-medium"></i> --></a> <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3" href="#" target="_blank" rel="noopener"><svg class="svg-inline--fa fa-facebook fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""> <path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"> </path> </svg><!-- <i class="fab fa-facebook"></i> --></a> <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3" href="#" target="_blank" rel="noopener"><svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""> <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"> </path> </svg><!-- <i class="fab fa-twitter"></i> --></a> <a class="transition duration-500 ease-in-out hover:translate-y-1 transform text-gray-500 hover:text-gray-300 text-xl leading-6 px-3" href="#"><svg class="svg-inline--fa fa-youtube fa-w-18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""> <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"> </path> </svg><!-- <i class="fab fa-youtube"></i> --></a> </div> </div> </div> </div> </footer> </div> </div> </div> <!-- /End replace --> </div> </div> </div> </section>
공개여부
(공개시 일반회원들에게도 공개를 합니다. *오픈소스로 공개를 합니다.)
취소
등록하기
회원가입
val1['open_window']=='Y'">HOME
val1['open_window']=='Y'">WORKS
val1['open_window']=='Y'">DEVLAB
val1['open_window']=='Y'">DEMO
val1['open_window']=='Y'">BLOG
val1['open_window']=='Y'">SUPPORTS
val1['open_window']=='Y'">
충청남도 천안시 서북구 군수1길 78-23
Email : xeant@kakao.com