Uikit cards

Developer
Leolo
Size
3,072 Kb
Views
78,936
  1. Uikit cards Previews
  2. Uikit cards HTML Codes
  3. Uikit cards CSS Codes

How do I make an uikit cards?

What is a uikit cards? How do you make a uikit cards? This script and codes were developed by Leolo on 08 September 2022, Thursday.

Uikit cards Previews
IQ Test

Uikit cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>uikit cards</title> <link rel='stylesheet prefetch' href='https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=5079'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="uk-position-top"> <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">UI Kitties</a></li> <li><a href="#">Meowberry</a></li> <li> <a href="#">MeowCats</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">UI kitties</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Paxberry</a></li> <li><a href="#">Subsiding</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <li><a href="#">MeowRory</a></li> </li> </ul> </div> </nav>
</div>
</div>
<div class="uk-child-width-1-2@s uk-text-center" uk-grid> <div> <div class="uk-box-shadow-small uk-padding">PAGES - combinations of routes and views</div> </div> <div> <div class="uk-box-shadow-medium uk-padding">SECTIONS - gui interface 4 designing database</div> </div> <div> <div class="uk-box-shadow-large uk-padding"><div style='position:relative;padding-bottom:calc(100% / 1.78)'><iframe src='https://gfycat.com/ifr/AmazingQuaintBlueshark' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div></div> </div> <div> <div class="uk-box-shadow-xlarge uk-padding"><div style='position:relative;padding-bottom:calc(100% / 1.78)'><iframe src='https://gfycat.com/ifr/AmazingQuaintBlueshark' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div></div> </div>
</div>
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Maxicandy</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-primary uk-card-body uk-border-rounded"> <h3 class="uk-card-title">Primary blue</h3> <p>Meowberry fields forever</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-body uk-border-rounded "> <h3 class="uk-card-title">Secondary</h3> <p>Fortis fortuna adiuvat.</p> </div> </div>
</div>
<div class="uk-child-width-1-2@s uk-grid-match" uk-grid> <div> <div class="uk-container"> <div class="uk-card uk-card-hover uk-card-body"> <h3 class="uk-card-title">Hover</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-hover uk-card-body"> <h3 class="uk-card-title">Aspie</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div>
</div>
<div class="uk-child-width-1-2@s" uk-grid> <div> <div class="uk-card uk-card-default uk-card-small uk-card-body"> <h3 class="uk-card-title">Small</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-large uk-card-body"> <h3 class="uk-card-title">Large</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
</div>
<div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: true"> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">subsiding</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div>
</div>
<div class="uk-child-width-1-2@s uk-text-center" uk-grid> <div> <div class="uk-box-shadow-small uk-padding">Small</div> </div> <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m"> <div class="uk-card-badge uk-label">Badge</div> <h3 class="uk-card-title">Title</h3> <p>Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m"> <div class="uk-card-badge uk-label">

Uikit cards - Script Codes CSS Codes

body{margin-top:120px;}
.uk-card-secondary{
background-color: indigo;}
a { position: relative; color: blue; text-decoration: none;
}
a:hover { color: crimson;
}
a::before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #FFF; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
}
a:hover::before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);
}
::-webkit-scrollbar { width: 8px; height: 8px
}
::-webkit-scrollbar-thumb { background: #313543; border: 0px none #fff; border-radius: 50px
}
::-webkit-scrollbar-thumb:hover { background: #353a49
}
::-webkit-scrollbar-thumb:active { background: #313543
}
::-webkit-scrollbar-track { border: 0px none #ffffff; border-radius: 0; background: rgba(0, 0, 0, 0.1)
}
::-webkit-scrollbar-track:hover { background: #282c37
}
::-webkit-scrollbar-track:active { background: #282c37
}
::-webkit-scrollbar-corner { background: transparent
}
/* .muncie {}*/
/* .muncies {}*/
Uikit cards - Script Codes
Uikit cards - Script Codes
Home Page Home
Developer Leolo
Username diomed
Uploaded September 08, 2022
Rating 3
Size 3,072 Kb
Views 78,936
Do you need developer help for Uikit cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Leolo (diomed) Script Codes
Name
Tribute Page
Web. ticker
Week.plan
Dropotron
Particles.js
A Pen by leolo
Particles.js demo
Portfolio Template
Double-layer background
Flexbox-timeline
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!