A Pen by Beibit Sakhanov on CodePen.
bsakhanov
/ index.html
Created
January 30, 2019 12:16
Off-canvas :: mobile navigation & Transperent Hero & parallax effect | uiKit - front-end framework. 3.0.0-rc.26
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- codepen editor mode - you could open the HTML tab in full width + only one extra line of CSS (not in uikit) on this example | |
| **since rc.20(October 24, 2018)Offcanvas no longer requires a wrapping content div | |
| --> | |
| <!-- desktop sticky navbar --> | |
| <div class="uk-position-top" id="top"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar="dropbar: false;" data-uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky uk-section-primary uk-light; bottom: #scrollup-dropdown"> | |
| <!-- LEFT --> | |
| <div class="uk-navbar-left uk-light"> | |
| <a class="uk-navbar-item uk-logo" href="#">Logo-desktop</a> | |
| <!-- show ul on desktop-tablet with uk-visible@m = Only affects device widths of 960px and larger--> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="accordion"> | |
| <ul> | |
| <li><a href="#"> | |
| <div> | |
| <h1>Lorem Ipsum</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut consequat.</p> | |
| </div> | |
| </a> </li> | |
| <li><a href="#"> | |
| <div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="slideset"> | |
| <div> | |
| <figure class="testimonial"> | |
| <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| <div class="arrow"></div> | |
| </blockquote> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1138174/profile/profile-512.jpg" alt="Maksim Goffin" /> | |
| <div class="author"> | |
| <h5>Maksim Goffin</h5> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="uk-child-width-expand@s uk-text-center uk-grid-collapse" uk-grid> | |
| <div> | |
| <div class="uk-tile">1</div> | |
| </div> | |
| <div> | |
| <div class="uk-tile">2</div> | |
| </div> | |
| <div> | |
| <div class="uk-tile">3</div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header id="header"> | |
| <nav class="links" style="--items: 5;"> | |
| <a href="#">Link 1</a> | |
| <a href="#">Link 2</a> | |
| <a href="#">Link 3</a> | |
| <a href="#">Link 4</a> | |
| <a href="#">Link 5</a> | |
| <span class="line"></span> | |
| </nav> | |
| </header> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| // images | |
| - var image=['https://images.unsplash.com/photo-1468549940493-46152524296c?auto=format&fit=crop&w=952&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1075&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1505168125601-4ddfdea4c7e7?auto=format&fit=crop&w=1051&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1466854076813-4aa9ac0fc347?auto=format&fit=crop&w=1489&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjNlMzNjMTMtNDAxYi00M2QxLTlmYWQtMTdkZDljMmIzYjI5XkEyXkFqcGdeQXVyMzM4NjcxOTc@._V1_SY1000_CR0,0,685,1000_AL_.jpg']; | |
| // tooltip | |
| - var tooltip='<span class="uk-text-lead uk-text-small uk-light">Lorem ipsum dolor sit amet</span><br><span class="uk-text-muted">Lorem ipsum</span><br><br><span class="uk-text-meta uk-text-small uk-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta purus sit amet t |
bsakhanov
/ grid-layout-w-uikit-alt-1.markdown
Created
March 7, 2019 22:03
Grid Layout w/ UiKit alt-1
bsakhanov
/ grid-layout-w-uikit-alt-2.markdown
Created
March 7, 2019 22:06
Grid Layout w/ UiKit alt-2
A Pen by Beibit Sakhanov on CodePen.
A Pen by Beibit Sakhanov on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="uk-section"> | |
| <div class="uk-container"> | |
| <div class="uk-grid uk-grid-medium" uk-height-match="target: > div > .uk-card; row: false" uk-grid> | |
| <div class="uk-width-1-2@m"> | |
| <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin featured uk-background-cover" uk-grid> | |
| <div class="uk-card-media-left uk-cover-container"> | |
| <img src="https://getuikit.com/docs/images/light.jpg" alt="" hidden uk-cover> | |
| <canvas width="600" height="400"></canvas> | |
| </div> | |
| <div> |