uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,656 lines • 92.1 kB
HTML
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Cards - Uix Kit</title>
<!-- Compatibility Settings
============================================= -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Compatibility Settings end -->
<!-- Web Fonts
============================================= -->
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
<!-- Web Fonts end -->
<!-- Core & Theme CSS
============================================= -->
<!-- Basic -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/>
<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>
<!-- Icons -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css?ver=5.7.0">
<link rel="stylesheet" href="assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0">
<!-- Theme -->
<link rel="stylesheet" href="../dist/css/uix-kit.min.css?ver=oBL6UJILNcsxGifiirVQ"/>
<!--[if lt IE 10]>
<link rel="stylesheet" href="assets/css/IE.css?ver=oBL6UJILNcsxGifiirVQ" />
<![endif]-->
<!-- Core & Theme CSS end -->
<!-- Vendor
============================================= -->
<script src="assets/js/min/jquery.min.js?ver=3.6.1"></script>
<script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
<!-- Vendor end -->
<!-- Break free from CSS prefix hell!
============================================= -->
<script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>
<!-- SEO
============================================= -->
<meta name="description" content="A free web kits for fast web design and development, compatible with Bootstrap v5.">
<meta name="generator" content="Uix Kit" />
<meta name="author" content="UIUX Lab">
<!-- SEO end -->
<!-- Favicons
============================================= -->
<link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
<!-- Favicons end -->
</head>
<body class="page">
<!-- Loader
============================================= -->
<div class="uix-loader">
<!--[if lt IE 10]>
<span>Loading...</span>
<![endif]-->
<svg class="uix-loader__spinner is-hide-IE" viewBox="0 0 52 52">
<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
</svg>
</div>
<div class="uix-loader-progress" data-txt="{progress}%"><span>0%</span></div>
<div class="uix-loader-progress__line"></div>
<!-- .uix-loader end -->
<!-- Mobile Menu Toggle Trigger
============================================= -->
<div class="uix-menu-mobile__toggle">
<span></span>
<span></span>
<span></span>
</div>
<div class="uix-menu-mobile__mask"></div>
<!-- .uix-menu-mobile__toggle end -->
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
<div class="uix-brand">
<a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit"></a>
</div>
<!-- .uix-brand end -->
<!-- Navigation Start-->
<nav class="uix-menu__container">
<div class="uix-menu__inner">
<span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="Uix Kit"></span>
<ul class="uix-menu">
<li class="multi-column current-menu-item is-active"><a href="index.html">Components</a>
<ul class="sub-menu">
<li>
<span class="multi-column-title">Web Elements (Basic)</span>
<ul class="sub-menu">
<li><a href="helper-classes.html">Helper Classes</a></li>
<li><a href="uix-grid.html">Uix Grid</a></li>
<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
<li><a href="bootstrap-24-grid.html">Bootstrap 24 Grid</a></li>
<li><a href="blended-grid-layout.html">Blended Grid</a></li>
<li><a href="gallery-grid-layout.html">Gallery Grid</a></li>
<li><a href="spacing.html">Spacing</a></li>
<li><a href="material-container.html">Material Container</a></li>
<li><a href="striking.html">Striking</a></li>
<li><a href="button.html">Buttons</a></li>
<li><a href="overlay.html">Overlay</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="video-background.html">Video BG</a></li>
<li><a href="heading.html">Heading</a></li>
<li><a href="dividing-line.html">Dividing Line</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="responsive-images.html">Responsive Images</a></li>
<li><a href="background-interaction.html">Background</a></li>
<li><a href="parallax.html">Parallax</a></li>
<li><a href="parallax2.html">Parallax 2</a></li>
<li><a href="vertical-centering.html">Vertical Centering</a></li>
<li><a href="equal-width-columns.html">Equal-width Columns</a></li>
<li><a href="equal-height-columns.html">Equal-height Columns</a></li>
<li><a href="align-wide-and-full-element.html">Align Wide/Full Element</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 1)</span>
<ul class="sub-menu">
<li><a href="toast.html">Toast</a><span class="uix-bubble">new</span></li>
<li><a href="navs.html">Navs</a></li>
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="modal-dialog.html">Modal Dialog</a></li>
<li><a href="modal-dialog-auto.html">Modal Dialog Auto-open</a></li>
<li><a href="social-meida-icons.html">Social Media Icons</a></li>
<li><a href="form.html">Form Elements</a></li>
<li><a href="form2.html">Form Elements 2</a></li>
<li><a href="form-layout.html">Form Layout</a></li>
<li><a href="form-progress.html">Form Progress</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="progress-bar.html">Progress Bar</a></li>
<li><a href="progress-line.html">Progress Line</a></li>
<li><a href="vertical-text.html">Vertical Text</a></li>
<li><a href="circle-text.html">Circle Text</a></li>
<li><a href="coach-mark.html">Coach Mark</a></li>
<li><a href="separator-of-rule-with-text.html">Separator of Rule With Text</a></li>
<li><a href="wave-background.html">Wave Background</a></li>
<li><a href="shape-animation.html">Shape Animation</a></li>
<li><a href="image-animation.html">Image Animation</a></li>
<li><a href="svg-map.html">SVG Map</a></li>
<li><a href="floating-side-element.html">Floating Side Element</a></li>
<li><a href="infinite-scrolling-element.html">Infinite Scrolling Element</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 2)</span>
<ul class="sub-menu">
<li><a href="tooltip.html">Tooltip</a></li>
<li><a href="ribbon.html">Ribbon</a></li>
<li><a href="footer-templates.html">Footer Templates</a></li>
<li><a href="login-templates.html">Login Templates</a><span class="uix-bubble">new</span></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="mouse-animation-scroll.html">Mouse Animation Scroll</a></li>
<li><a href="periodical-scroll.html">Periodical Scroll</a></li>
<li><a href="image-shapes.html">Image Shapes</a></li>
<li><a href="rotating-elements.html">Rotating Elements</a></li>
<li><a href="dotted-line.html">Dotted Line</a></li>
<li><a href="swiper.html">Swiper<small style="font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;">Third-party plugin</small></a></li>
<li><a href="advanced-slider.html">Advanced Slider (Basic)</a></li>
<li><a href="advanced-slider-brightness.html">Advanced Slider Brightness</a></li>
<li><a href="advanced-slider-liquid.html">Advanced Slider Liquid</a></li>
<li><a href="advanced-slider-liquid2.html">Advanced Slider Liquid 2</a></li>
<li><a href="advanced-slider-liquid3.html">Advanced Slider Liquid 3</a></li>
<li><a href="advanced-slider-parallax.html">Advanced Slider Parallax</a></li>
<li><a href="hybrid-content-slider.html">Hybrid Content Slider</a><span class="uix-bubble">new</span></li>
<li><a href="svg-mask-slider.html">SVG Mask Slider</a><span class="uix-bubble">new</span></li>
<li><a href="3D-explosive-particle-slider.html">3D Explosive Particle Slider</a></li>
<li><a href="3D-liquid-scrollspy-slider.html">3D Liquid Scrollspy Slider</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 1)</span>
<ul class="sub-menu">
<li><a href="content-placeholder-animated.html">Content Placeholder Animated</a></li>
<li><a href="list-posts.html">Posts List</a></li>
<li><a href="fullwidth-column-to-edge.html">Full Width Column to Edge</a><span class="uix-bubble">new</span></li>
<li><a href="list-side-by-side.html">Side by Side List</a></li>
<li><a href="list-side-by-side-img.html">Side by Side List With Photo</a></li>
<li><a href="list-bulleted.html">Bulleted List</a></li>
<li><a href="list-brands.html">Brands List</a></li>
<li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li>
<li><a href="single-post.html">Single Post</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="contact.html">Contact Form With Map</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordion.html">Accordion</a></li>
<li><a href="accordion-img.html">Accordion Background Images</a></li>
<li><a href="gallery.html">Gallery Normal</a></li>
<li><a href="gallery-filter.html">Gallery Filterable</a></li>
<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
<li><a href="gallery-masonry-ajax.html">Gallery Masonry With Ajax</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 2)</span>
<ul class="sub-menu">
<li><a href="card.html">Cards</a></li>
<li><a href="table-series.html">Table</a></li>
<li><a href="table-sorter.html">Table Sorter</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="multi-items-carousel.html">Multiple Items Carousel</a></li>
<li><a href="team-fullwidth.html">Team Fullwidth</a></li>
<li><a href="team-grid.html">Team Grid</a></li>
<li><a href="team-focus.html">Team Focus</a></li>
<li><a href="circle-layout.html">Circle Layout</a></li>
<li><a href="3D-carousel.html">3D Carousel</a></li>
<li><a href="3D-gallery.html">3D Gallery (threejs)</a></li>
<li><a href="cascading-dropdown-list.html">Cascading DropDown List</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 1)</span>
<ul class="sub-menu">
<li><a href="sticky-elements.html">Sticky Elements</a></li>
<li><a href="scroll-reveal.html">Scroll Reveal</a></li>
<li><a href="scrollspy-animate.html">Scrollspy Animate</a><span class="uix-bubble">new</span></li>
<li><a href="skew-on-scroll.html">Skew on Scroll</a><span class="uix-bubble">new</span></li>
<li><a href="text-effect.html">Text Effect</a><span class="uix-bubble">new</span></li>
<li><a href="smooth-scrolling-page.html">Smooth Scrolling Page</a></li>
<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
<li><a href="list-posts-with-ajax2.html">Ajax Load Posts 2</a></li>
<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
<li><a href="show-more-less.html">Show More Less</a></li>
<li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li>
<li><a href="hover-delay-interaction.html">Hover Delay Interaction</a></li>
<li><a href="one-page.html">Full Page/One Page</a></li>
<li><a href="one-page2.html">Full Page/One Page 2</a></li>
<li><a href="ajax-page-loader.html">Ajax Page Loader</a></li>
<li><a href="ajax-push-content.html">Ajax Push Content</a></li>
<li><a href="3D-background.html">3D Background</a></li>
<li><a href="3D-specular.html">3D Specular (threejs)</a><span class="uix-bubble">new</span></li>
<li><a href="3D-background-three.html">3D Background 1 (threejs)</a></li>
<li><a href="3D-background-three2.html">3D Background 2 (threejs)</a></li>
<li><a href="3D-background-three3.html">3D Background 3 (threejs)</a></li>
<li><a href="3D-simulate-html-layout.html">Simulate HTML Layout (threejs)</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 2)</span>
<ul class="sub-menu">
<li><a href="3D-pages.html">3D Pages</a></li>
<li><a href="3D-particle-effect.html">3D Particle Effect</a></li>
<li><a href="3D-sphere-three.html">3D Sphere Rotation</a></li>
<li><a href="3D-obj-anim-interaction.html">3D Object Anim Interaction</a></li>
<li><a href="3D-image-transition.html">3D Image Transition (threejs)</a></li>
<li><a href="3D-mouse-interaction.html">3D Mouse Interaction (threejs)</a></li>
<li><a href="3D-mouse-interaction2.html">3D Mouse Interaction2 (threejs)</a></li>
<li><a href="3D-model.html">3D Model</a></li>
<li><a href="3D-filmic-effects.html">3D Filmic Effects</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul class="sub-menu">
<li><a href="mega-menu.html">Mega Menu</a></li>
<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
<li><a href="dropdown-menu.html">Dropdown Menu</a></li>
<li><a href="dropdown-menu2.html">Dropdown Menu 2(Multi-level)</a></li>
<li><a href="vertical-menu.html" target="_blank">Vertical Menu</a></li>
<li><a href="lava-lamp-style-menu.html">Lava-Lamp Style Menu</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li><a href="typography.html">Typography</a>
<ul class="sub-menu">
<li><a href="typography.html">LTR</a></li>
<li><a href="typography-rtl.html">RTL</a></li>
<li><a href="typography-cn.html">中文</a></li>
</ul>
</li>
<li><a href="sample-page-1.html">Sample Pages</a>
<ul class="sub-menu">
<li><a href="sample-page-1.html">Sample Page 1</a></li>
<li><a href="sample-page-2.html">Sample Page 2</a></li>
</ul>
</li>
</ul>
<div class="uix-menu__right-box">
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</div><!-- /.uix-menu__inner -->
</nav>
<!-- .uix-menu__container end -->
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Thumbnail Card</h3>
<p>The following is a Thumbnail style card using flex.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<strong>Long title Long title Long title Long title Long title Long title Long title Long title </strong>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<h5 class="uix-t-ellipsis uix-spacing--no">Title</h5>
<small class="uix-typo--color-sub">@https://uiux.cc</small>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<h5 class="uix-t-ellipsis uix-spacing--no">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title </h5>
<small class="uix-typo--color-sub">@https://uiux.cc</small>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Gallery Card</h3>
<p>The following is a gallery style card using flex.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-5 col-md-5">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-relative--inline" style="margin: 10px; padding-bottom: 0;">Name </h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-relative--inline" style="margin: 10px; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-t-ellipsis" style="margin: 10px; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__content">
<div class="uix-card--gallery__content__child">
<div class="uix-card--gallery__content__child--left">
<div>
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
<div class="uix-card--gallery__content__child--right" style="min-width: 50px;">
<!-- content begin -->
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__content">
<div class="uix-card--gallery__content__child">
<div class="uix-card--gallery__content__child--left">
<div>
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
<div class="uix-card--gallery__content__child--right" style="min-width: 50px;">
<!-- content begin -->
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--horizontal" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-8 uix-core-grid__mobile-stack" data-bg='{"src":"assets/images/demo/spiral-galaxy-1920x1080.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'>
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel. consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--horizontal" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-4 uix-core-grid__mobile-stack" data-bg='{"src":"assets/images/demo/spiral-galaxy-1920x600.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'>
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x600.jpg">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Focus on user interface, user experience, awesome websites, front-end and WordPress development.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x600.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x309.jpg" alt="">
<!-- image end -->
<!-- icons begin -->
<div class="uix-card--gallery__status">
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.33 469.33" fill="currentColor">
<path d="M320 213.33c35.3 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 213.33c35.31 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 256C99.52 256 0 280.96 0 330.67V384h298.67v-53.33c0-49.71-99.52-74.67-149.34-74.67zM320 256c-6.19 0-13.12.43-20.59 1.17 24.75 17.82 41.92 41.82 41.92 73.5V384h128v-53.33c0-49.71-99.52-74.67-149.33-74.67z"></path>
</svg>3,3434</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 469.33 469.33">
<path d="M234.67 170.67c-35.31 0-64 28.69-64 64s28.69 64 64 64 64-28.7 64-64-28.7-64-64-64z"></path>
<path d="M234.67 74.67C128 74.67 36.9 141 0 234.67c36.9 93.65 128 160 234.67 160 106.77 0 197.76-66.35 234.66-160-36.9-93.66-127.89-160-234.66-160zm0 266.66c-58.88 0-106.67-47.78-106.67-106.66S175.79 128 234.67 128s106.66 47.79 106.66 106.67-47.78 106.66-106.66 106.66z"></path>
</svg>124</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 475.43 475.43">
<path d="M306.9 164.57l78.9-86.2a7.83 7.83 0 001.56-8.36 8.36 8.36 0 00-7.3-4.7h-253.4s-3.13 0-3.13.52v-9.4a26.12 26.12 0 0021.94-27.7A28.73 28.73 0 00117.26 0a29.78 29.78 0 00-29.78 28.73 30.82 30.82 0 0020.37 27.7v411.16a7.84 7.84 0 0015.68 0V263.84h256.52c3.2.2 6.17-1.7 7.31-4.7a8.36 8.36 0 00-1.56-8.36l-78.9-86.2z"></path>
</svg>June 1</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 411.14 411.14">
<path d="M350.2 54.53H61.45C27.64 54.53 0 82.18 0 115.97v179.2c0 33.8 27.65 61.44 61.44 61.44H349.7c33.79 0 61.44-27.65 61.44-61.44v-179.2c.5-33.8-27.14-61.44-60.93-61.44zM287.75 210.7a11.96 11.96 0 01-3.58 3.59l-119.3 70.65a9.93 9.93 0 01-13.82-3.58 8.65 8.65 0 01-1.54-5.12V134.92c0-5.64 4.61-10.24 10.24-10.24 1.54 0 3.59.5 5.12 1.53l119.3 70.66c4.6 3.07 6.66 9.21 3.58 13.82z"></path>
</svg>13</div>
</div>
<!-- icons end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<h4 class="uix-spacing--no">Full-stack Designer</h4>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x309.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<!-- menu group begin -->
<div class="uix-card--gallery__menu">
<div class="uix-card--gallery__menu__avatar">
<img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">
<span>UIUX Lab</span>
</div>
<div class="uix-card--gallery__menu__items">
<a>Link 1</a>
<a class="is-active">Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
</div>
<div class="uix-card--gallery__menu__action">
<button>2,321</button>
<button>Follow</button>
</div>
</div>
<!-- menu group end -->
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body uix-core-grid__col-5 uix-core-grid__mobile-stack">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body uix-card--gallery__body--verticalCenter uix-core-grid__col-5 uix-core-grid__mobile-stack">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Check Out</a>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Author Card</h3>
<p>Author Card is a very popular used web page element that can display a lot of key information.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-card--author">
<div class="uix-card--author__header">
<div class="uix-card--author__text uix-f-l">
<h3>Full-stack Designer</h3> <a href="https://uiux.cc" target="_blank">@https://uiux.cc</a>
</div>
<div class="uix-card--author__preview uix-border--circle uix-border--circle-only-img uix-f-r"> <img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle"> </div>
</div>
<div class="uix-card--author__content"> Hi. I'm a full-stack designer on the way of pursuing the dream. Focus on user interface, user experience, awesome websites, front-end and WordPress development. I want to build things I can be proud of. I approach some awesome design challenges with an eye on the latest trends and strive to align my work the industry current best practices, while leveraging the acquired experience on the field. I have been working so hard to build up self. My personal website: https://uiux.cc </div>
<a class="uix-card--author__jump" href="#" rel="author"><i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--author uix-card--author--noborder uix-t-c">
<div class="uix-card--author__header">
<div class="uix-card--author__preview uix-border--circle uix-border--circle-only-img">
<img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">
</div>
</div>
<div class="uix-card--author__content uix-card--author__content--rounded">
<h4 class="uix-t-c">Full-stack Designer</h4>
<div class="uix-equal-width-divs uix-equal-width-divs--no-break">
<ul>
<li><h3>223</h3><span>Web Design</span></li>
<li><h3>13</h3><span>UI</span></li>
<li><h3>5</h3><span>SEO</span></li>
</ul>
</div>
<!-- .uix-equal-width-divs end -->
<p>
Hi. I'm a full-stack designer on the way of pursuing the dream. Focus on user interface, user experience, awesome websites, front-end and WordPress development.
</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--author uix-card--author--noborder uix-card--author--stats">
<div class="uix-card--author__header">
<div class="uix-card--author__preview uix-card--author__preview--rounded uix-card--author__preview--jumpOut">
<img src="assets/images/demo/avatar.jpg" alt="">
</div>
</div>
<div class="uix-card--author__content uix-card--author__content--rounded uix-t-r">
<div class="uix-card--author__tagline">Revenue</div>
<h4 class="uix-typo--style-normal">$34,245</h4>
<hr>
<i class="fa fa-calendar" aria-hidden="true"></i> Last 24 Hours
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
</main>
<!-- Footer
============================================= -->
<footer class="uix-footer__container">
<div class="uix-footer">
<div class="container">
<hr>
<div class="row">
<div class="col-lg-6 col-md-6 uix-t-l uix-t-c--md">
Copyright © Uix Kit 2022. | All rights reserved. Created by <a href="https://uiux.cc">UIUX Lab</a>.
</div>
<div class="col-lg-6 col-md-6 uix-t-r uix-t-c--md">
<div class="uix-footer__menu">
<ul>
<li>
<a href="https://uiux.cc" target="_blank">
UIUX Lab
</a>
</li>
<li>
<a href="https://opensource.org/licenses/MIT" target="_blank">
Licenses
</a>
</li>
<li>
<a href="https://github.com/xizon/uix-kit" target="_blank">
Download
</a>
</li>
<li>
<a href="https://github.com/xizon/uix-kit/wiki/Getting-Started" target="_blank">
Documentation
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!-- .container end -->
</div>
</footer>
</div>
<!-- .uix-wrapper end -->
<!-- Vendor -->
<script defer src="assets/js/min/axios.min.js?ver=0.19.2"></script>
<script defer src="assets/js/min/jquery.waitforimages.min.js?ver=1.0"></script>
<script defer src="assets/js/min/video.min.js?ver=7.5.3"></script>
<script defer src="assets/js/min/TweenMax.min.js?ver=2.0.2"></script>
<script defer src="assets/js/min/pixi.min.js?ver=5.2.0"></script>
<script defer src="assets/js/min/three.min.js?ver=r175"></script>
<script defer src="assets/js/min/anime.min.js?ver=3.1"></script>
<script defer src="assets/js/min/hammer.min.js?ver=2.0.8"></script>
<!-- Your Plugins & Theme Scripts
============================================= -->
<script>
/*
* Some global vars. DO NOT change these variables names.
* These variables are being used in `uix-kit.min.js`.
*
*/
var REVISION = "5.4.3",
APP_ROOTPATH = {
"templateUrl" : "", //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog"
"homeUrl" : "", //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
};
/*
* Fixed a bug that Cannot read property 'fn' of undefined for jQuery 1.xx.x.
*
*/
window.$ = window.jQuery;
</script>
<script defer src="../dist/js/uix-kit.min.js?ver=oBL6UJILNcsxGifiirVQ"></script>
<!-- Your Plugins & Theme Scripts end -->
<script>
/* Google analytics */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.defer=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70658525-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>