_nel Framework Components

Header Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium natus rem amet fugiat numquam nemo dicta blanditiis omnis?

Collection

<!-- text header -->
<div class="_text-header">
    <h5>Header Content</h5>
    <p class="_layout-s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium natus rem amet fugiat numquam nemo dicta <a href="#" class="_text-header-link">blanditiis omnis?</a></p>
    <a href="#" class="_btn-default">Collection</a>
</div>
<!-- end text header -->

Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore qui aut ex? Vero repellat necessitatibus officia numquam laudantium, quis consequuntur dicta ex at? Nostrum vel, temporibus officia esse! Voluptatibus, in.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus at expedita magni praesentium eum eligendi! Praesentium a eum rem facere amet vitae distinctio, unde, sint optio qui dolores vel consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quidem provident, quod enim cumque eius magnam reprehenderit, at est doloribus voluptatem. Consequatur eius labore aspernatur rerum, earum maiores cumque! Quasi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore laudantium obcaecati, temporibus inventore itaque quod consequuntur quisquam ipsum officiis quia quasi magni, autem voluptate sunt optio animi neque voluptatum totam!

<div class="_tabs">
    <nav class="_tab-list" id="_tab-list">
        <a class="_tab _tab-active" href="#_tab1">Domestic</a>
        <a class="_tab" href="#_tab2">International</a>
    </nav>

    <div id="_tab1" class="_tab-content _tab-show">
        <div class="_tabs">
            <nav class="_tab-list" id="_subtab-list">
                <a class="_tab _subtab-active" href="#_subtab1-1">Arrival</a>
                <a class="_tab" href="#_subtab1-2">Departure</a>
            </nav>

            <div id="_subtab1-1" class="_subtab-content _tab-show">
                ...
            </div>

            <div id="_subtab1-2" class="_subtab-content">
                ...
            </div>
        </div>
    </div>

    <div id="_tab2" class="_tab-content">
        <div class="_tabs">
            <nav class="_tab-list" id="_endsubtab-list">
                <a class="_tab _endsubtab-active" href="#_subtab2-1">Arrival</a>
                <a class="_tab" href="#_subtab2-2">Departure</a>
            </nav>

            <div id="_subtab2-1" class="_endsubtab-content _tab-show">
                ...
            </div>

            <div id="_subtab2-2" class="_endsubtab-content">
                ...
            </div>
        </div>
    </div>
</div>

Navbar Default

Home News Contact About Sign Up

<div class="_nav-default" id="_nav-default">
    <a href="#home" class="_nav-default-active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a class="_nav-default-btn" id="_nav-default-toggle">
        <i class="_nav-default-toggle"></i>
    </a>
    <a href="#">Sign Up</a>
</div>

Navbar Ultimate

Logo

Multi level Dropdown
- _nel 1
- _nel 2
- _nel 3
Mega Dropdown
- - Mega 1
  - Mega 2
  - Mega 3
  - Mega 1
  - Mega 2
  - Mega 3
  - Mega 1
  - Mega 2
  - Mega 3
  - Mega 1
  - Mega 2
  - Mega 3
Dropdown
Link

<!-- nav -->
<div class="_nav">
    <div class="_layout-d">
        <div class="_nav-logo">
            <a href="#"><strong>Logo</strong></a>
        </div>
        <div class="_nav-icon" id="_nav-icon">
            <i></i>
        </div>
        <div class="_nav-search" id="_nav-search">
            <svg viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </div>
        <div class="_nav-search-input" id="_nav-search-input">
            <div class="_nav-search-close" id="_nav-search-close"></div>
            <input type="search" placeholder="Search">
        </div>
        <div class="_nav-items" id="_nav-items">
            <ul class="_nav-list" id="_nav-list">
                <li class="_nav-toggle"><a>Multi level Dropdown<i class="_nav-arrow"></i></a>
                    <ul class="_nav-dropdown">
                        <li><a href="#">_nel 1</a></li>
                        <li class="_nav-subtoggle"><a>_nel 2<i class="_nav-arrow"></i></a>
                            <ul class="_nav-subdropdown">
                                <li><a href="#">_nel sub 1</a></li>
                                <li><a href="#">_nel sub 2</a></li>
                                <li class="_nav-subtoggle"><a href="#">_nel sub 3<i class="_nav-arrow"></i></a>
                                    <ul class="_nav-endsubdropdown">
                                        <li><a href="#">_nel end sub 1</a></li>
                                        <li><a href="#">_nel end sub 2</a></li>
                                        <li><a href="#">_nel end sub 3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">_nel 3</a></li>
                    </ul>
                </li>
                <li class="_nav-mega"><a>Mega Dropdown<i class="_nav-arrow"></i></a>
                    <ul class="_nav-dropdown _nav-megadropdown">
                        <li class="_row-flex _layout-d">
                            <ul class="_flex _l3 _m6 _s12">
                                <li><a href="#_">Mega 1</a></li>
                                <li><a href="#_">Mega 2</a></li>
                                <li><a href="#_">Mega 3</a></li>   
                            </ul>
                            <ul class="_flex _l3 _m6 _s12">
                                <li><a href="#_">Mega 1</a></li>
                                <li><a href="#_">Mega 2</a></li>
                                <li><a href="#_">Mega 3</a></li>   
                            </ul>
                            <ul class="_flex _l3 _m6 _s12">
                                <li><a href="#_">Mega 1</a></li>
                                <li><a href="#_">Mega 2</a></li>
                                <li><a href="#_">Mega 3</a></li>   
                            </ul>
                            <ul class="_flex _l3 _m6 _s12">
                                <li><a href="#_">Mega 1</a></li>
                                <li><a href="#_">Mega 2</a></li>
                                <li><a href="#_">Mega 3</a></li>   
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="_nav-toggle"><a>Dropdown<i class="_nav-arrow"></i></a>
                    <ul class="_nav-dropdown">
                        <li><a href="#">_nel 1</a></li>
                        <li><a href="#">_nel 2</a></li>
                        <li><a href="#">_nel 3 test dot dot dot</a></li>
                    </ul>
                </li>
                <li class="_nav-link"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="_nav-clearfix"></div>
<!-- /nav -->

Navbar Small

<div class="_nav-small">
    <div class="_layout-d">
        <div class="_nav-small-mobile" id="_nav-small-mobile">
            <div class="_nav-small-left">
                <ul>
                    <li><a href="#">Sollege Student</a></li>
                    <li><a href="#">Alumni</a></li>
                    <li><a href="#">Staff & Lecturers</a></li>
                    <li><a href="#">Parents & Media</a></li>
                </ul>
            </div>
            <div class="_nav-small-right">
                <ul class="_nav-small-list">
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Language</a></li>
                </ul>
            </div>
        </div>
        <div class="_nav-small-toggle" id="_nav-small-toggle">
            <i></i>
        </div>
    </div>
</div>

Navbar Inside

Class is absolute

<div class="_nav-inside">
    <ul class="_nav-inside-list" id="_nav-inside-list">
        <li><a href="#">Headline</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Announcement</a></li>
        <li><a href="#">Fact</a></li>
        <li><a href="#">Achievement</a></li>
        <li><a href="#">Live Streaming</a></li>
    </ul>
    <div class="_nav-inside-toggle" id="_nav-inside-toggle">
        <i></i>
    </div>
</div>

Navbar Scroll

Demo Nav Scroll

<div data-scroll-index="0">
    <div class="_nav-scroll-header">
        <div class="_nav-scroll" id="_nav-scroll">   
            <div class="_layout-d">
                <div class="_nav-scroll-logo">
                    <a href=""><strong>_nel</strong></a>
                </div>     
                <div class="_nav-scroll-toggle" id="_nav-scroll-toggle">
                    <i></i>
                </div>   
                <div class="_nav-scroll-items" id="_nav-scroll-items">
                    <ul class="_nav-scroll-list" id="_nav-scroll-list">
                        <li><a data-scroll-nav="0" class="_nav-scroll-active">Home</a></li>
                        <li><a data-scroll-nav="1">About</a></li>
                        <li><a data-scroll-nav="2">Services</a></li>
                        <li><a data-scroll-nav="3">Testimonials</a></li>
                        <li><a data-scroll-nav="4">Blog</a></li>
                        <li><a data-scroll-nav="5">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="_height-m" data-scroll-index="1">
    about
</div>
<div class="_height-m" data-scroll-index="2">
    services
</div>
<div class="_height-m" data-scroll-index="3">
    testimonials
</div>
<div class="_height-m" data-scroll-index="4">
    blog
</div>
<div class="_height-m" data-scroll-index="5">
    contact
</div>

Sidebar Ultimate

Demo Sidebar

<!-- sidebar -->
<aside class="_sidebar" id="_sidebar">

    <!-- sidebar header -->
    <div class="_sidebar-header">
        <div class="_position-middle">
            <h2>_nel</h2>
        </div>
    </div>
    <!-- /sidebar header -->

    <!-- sidebar items -->
    <div class="_sidebar-items">

        <!-- sidebar list -->
        <ul class="_sidebar-list" id="_sidebar-list">
            <li><a href="#_about"><strong>Link</strong></a></li>
            <li class="_sidebar-toggle"><a><strong>Multilevel</strong><i class="_sidebar-arrow"></i></a>
                <ul class="_sidebar-dropdown">
                    <li><a href="#">_nel 1</a></li>
                    <li><a>_nel 2<i class="_sidebar-arrow"></i></a>
                        <ul class="_sidebar-dropdown _sidebar-sub-1">
                            <li><a>_nel 1<i class="_sidebar-arrow"></i></a>
                                <ul class="_sidebar-dropdown _sidebar-sub-2">
                                    <li><a href="#">_nel 1</a></li>
                                    <li><a href="#">_nel 2</a></li>
                                    <li><a>_nel 3<i class="_sidebar-arrow"></i></a>
                                        <ul class="_sidebar-dropdown _sidebar-sub-3">
                                            <li><a href="#">_nel 1</a></li>
                                            <li><a href="#">_nel 2</a></li>
                                            <li><a href="#">_nel 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">_nel 2</a></li>
                            <li><a href="#">_nel 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">_nel 3</a></li>
                </ul>
            </li>
            <li class="_sidebar-toggle"><a><strong>One level</strong><i class="_sidebar-arrow"></i></a>
                <ul class="_sidebar-dropdown">
                    <li><a href="#">_nel 1</a></li>
                    <li><a href="#">_nel 2</a></li>
                    <li><a href="#">_nel 3</a></li>
                </ul>
            </li>
        </ul>
        <!-- /sidebar list -->
    </div>
    <!-- /sidebar items -->

</aside>
<!-- /sidebar -->

<!-- sidebar window close -->
<div class="_sidebar-window" id="_sidebar-window"></div>
<!-- /sidebar window close -->

<!-- sidebar btn -->
<div class="_sidebar-btn" id="_sidebar-btn">
    <i class="_sidebar-btn-icon"></i>
</div>
<!-- sidebar btn -->

<!-- sidebar content -->
<div class="_sidebar-content">  
    Content
</div>
<!-- end sidebar content -->

Carousel

Carousel slick.js

CDN Slick

<!-- slick-theme.min.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- slick.min.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

<!-- cdn jquery -->

<!-- slick.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

URL Image

._slick-src-1{
    background-image: url(img/mockup/mockup1.jpg);
}
._slick-src-2{
    background-image: url(img/mockup/mockup2.jpg);
}
._slick-src-3{
    background-image: url(img/mockup/mockup3.jpg);
}

Tag

<div class="_slick" id="_slick">
    <div>
        <div class="_slick-img _slick-src-1"></div>
    </div>
    <div>
        <div class="_slick-img _slick-src-2"></div>
    </div>
    <div>
        <div class="_slick-img _slick-src-3"></div>
    </div>
</div>

Setting Slick

$("#_slick").slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 800
});

Header Background

._header-background._src-bg{
    background-image: url(img/mockup/mockup8.jpg);
}

<header class="_header-background _src-bg">
                
</header>

Parallax Fixed Background

._header-background._src-bg{
    background-image: url(img/mockup/mockup8.jpg);
}

<header class="_header-background _src-bg _parallax-fixed">
                
</header>

Content Grid

Grid Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium natus rem amet fugiat blanditiis omnis?

Collection

._content-grid-img._src1{
  background-image: url(img/mockup/mockup2.jpg);
}
._content-grid-img._src2{
  background-image: url(img/mockup/mockup3.jpg);
}
._content-grid-img._src3{
  background-image: url(img/mockup/mockup4.jpg);
}
._content-grid-img._src4{
  background-image: url(img/mockup/mockup5.jpg);
}

<!-- content -->
<div class="_content-grid">
    <div class="_row-flex">
        <div class="_flex _l6 _m6 _s12">
            <a href="#">
                <div class="_content-grid-img _src1"></div>
            </a>
        </div>
        <div class="_flex _l6 _m6 _s12">
            <div class="_content-grid-bg">
                <div class="_position-middle">
                    <!-- text header -->
                    <div class="_text-header">
                        <h5>...</h5>
                        <p>... <a href="#" class="_text-header-link">...</a></p>
                        <a href="#" class="_btn-default">Collection</a>
                    </div>
                    <!-- end text header -->
                </div>
            </div>
        </div>
        <div class="_flex _l4 _m4 _s12">
            <a href="#">
                <div class="_content-grid-img _src2"></div>
            </a>
        </div>
        <div class="_flex _l4 _m4 _s12">
            <a href="#">
                <div class="_content-grid-img _src3"></div>
            </a>
        </div>
        <div class="_flex _l4 _m4 _s12">
            <a href="#">
                <div class="_content-grid-img _src4"></div>
            </a>
        </div>
    </div>
</div>
<!-- end content -->

Counterup

5000

<!-- waypoint -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<div class="_counter">5000</div>

$('._counter').counterUp({
    delay: 10,
    time: 1000
});

Mixitup.js & magnific-popup.js

Demo MixitUp

<!-- magnific-popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<!-- cdn mixitup -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>
<!-- cdn magnific-popup -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<div class="mix-controls">
    <button type="button" class="mix-control" data-filter="all">All</button>
    <button type="button" class="mix-control" data-filter=".front">Frond End</button>
    <button type="button" class="mix-control" data-filter=".back">Back End</button>
    <button type="button" class="mix-control" data-filter=".design">Web Design</button>
</div>

<div class="mix-container">
    <div class="mix front">
        <a href="img/mockup/mockup1.jpg" title="Front End Developer">
            <img src="img/mockup/mockup1.jpg" alt="portfolio">
        </a>
    </div>
    <div class="mix front">
        <a href="img/mockup/mockup2.jpg" title="Front End Developer">
            <img src="img/mockup/mockup2.jpg" alt="portfolio">
        </a>
    </div>
    <div class="mix back">
        <a href="img/mockup/mockup9.jpg" title="Back End Developer">
            <img src="img/mockup/mockup9.jpg" alt="portfolio">
        </a>
    </div>
    <div class="mix design">
        <a href="img/mockup/mockup4.jpg" title="Web Design">
            <img src="img/mockup/mockup4.jpg" alt="portfolio">
        </a>
    </div>

    <div class="gap"></div>
    <div class="gap"></div>
    <div class="gap"></div>
</div>

var containerEl = document.querySelector('.mix-container');

var mixer = mixitup(containerEl, {
    animation: {
        easing: "cubic-bezier(0.645, 0.045, 0.355, 1)"
    }
});

$('.mix-container').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick: false,
    closeBtnInside: false,
    mainClass: 'mfp-with-zoom mfp-img-mobile',
    image: {
      verticalFit: true,
      titleSrc: function(item) {
        return item.el.attr('title') + ' · image source';
      }
    },
    gallery: {
      enabled: true
    },
    zoom: {
      enabled: true,
      duration: 400, // don't foget to change the duration also in CSS
      opener: function(element) {
        return element.find('img');
      }
    }      
});

Scroll Top

id="_scroll-top"

<div id="_scroll-top-stuck"></div>

<div class="_scroll-top">
    <a href="#_scroll-top" id="_scroll-top-toggle">
        <i></i>
    </a>
</div>

Footer Ultimate

<footer class="_footer">
    <div class="_layout-d">
        <div class="_row-flex _grid">
            <div class="_flex _grid _l2 _m3 _s12">
                <ul class="_list">
                    <li><a href="#">Find _nel</a></li>
                    <li><a href="#">How</a></li>
                </ul>
            </div>
            <div class="_flex _grid _l2 _m3 _s12">
                <ul class="_list">
                    <li><a href="#">Help _nel</a></li>
                    <li><a href="#">Help Eat</a></li>
                    <li><a href="#">Help Drink</a></li>
                    <li><a href="#">Help Car</a></li>
                    <li><a href="#">Help Bus</a></li>
                    <li><a href="#">Help Eyes</a></li>
                </ul>
            </div>
            <div class="_flex _grid _l2 _m3 _s12">
                <ul class="_list">
                    <li><a href="#">About _nel</a></li>
                    <li><a href="#">Bomboo</a></li>
                    <li><a href="#">Popgreen</a></li>
                    <li><a href="#">Quantum</a></li>
                </ul>
            </div>
            <div class="_flex _grid _l4 _hm _s12">
                
            </div>
            <div class="_flex _grid _l2 _m3 _s12">
                <ul class="_list">
                    <li><a href="#">Sosial Media</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="_footer-nav">
        <div class="_layout-d">
            <div class="_footer-nav-left">
                <a href="#">Region</a>
                <a>© 2018 Corporate, inc. All Rights Reserved</a>
            </div>
            <div class="_footer-nav-right">
                <a href="#">Guides</a>
                <a href="#">Term</a>
                <a href="#">License</a>
                <a href="#">Privacy</a>
            </div>
        </div>
    </div>
</footer>