Skill Grid
How do I make an skill grid?
What is a skill grid? How do you make a skill grid? This script and codes were developed by Kristen Zirkler on 16 October 2022, Sunday.
Skill Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Skill Grid</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #eee; font-family: "Arvo", serif; transition: all .5s;
}
.word-grid { border-top: 1px solid #ddd; border-right: 1px solid #ddd;
}
.word-grid:before, .word-grid:after { content: " "; display: table;
}
.word-grid:after { clear: both;
}
.word-grid li { width: 33%; float: left; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 30px; text-align: center;
}
.word-grid li i { font-size: 4em; margin: 20px auto 10px; color: #000;
}
.word-grid li div { height: 80px; display: table-cell; vertical-align: middle; width: 100vw;
}
.word-grid li span { display: block; text-align: center;
}
@media screen and (max-width: 500px) { .word-grid li { width: 50%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="word-grid"> <li><i class="fa fa-shopping-cart"></i><div><span>Ecommerce Shops</span></div></li> <li><i class="fa fa-bullhorn"></i><div><span>Interactive Digital Experiences</span></div></li> <li><i class="fa fa-birthday-cake"></i><div><span>Marketing Sites</span></div></li> <li><i class="fa fa-bomb"></i><div><span>UX Design</span></span></li> <li><i class="fa fa-coffee"></i><div><span>Front-End Development</span></div></li> <li><i class="fa fa-fighter-jet"></i><div><span>Marketing & Digital Strategy</span></div></li>
</ul> <!--li><span>Tradeshow Marketing</span></li--> <!--li><span>CMS - Shopify, Wordpress</span></li--> <!--li><span>Technology Research</span></li--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Skill Grid - Script Codes CSS Codes
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #eee; font-family: "Arvo", serif; transition: all .5s;
}
.word-grid { border-top: 1px solid #ddd; border-right: 1px solid #ddd;
}
.word-grid:before, .word-grid:after { content: " "; display: table;
}
.word-grid:after { clear: both;
}
.word-grid li { width: 33%; float: left; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 30px; text-align: center;
}
.word-grid li i { font-size: 4em; margin: 20px auto 10px; color: #000;
}
.word-grid li div { height: 80px; display: table-cell; vertical-align: middle; width: 100vw;
}
.word-grid li span { display: block; text-align: center;
}
@media screen and (max-width: 500px) { .word-grid li { width: 50%; }
}
Developer | Kristen Zirkler |
Username | kristenzirkler |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 3,109 Kb |
Views | 32,384 |
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!
Name | Size |
Responsive Grid List | 5,056 Kb |
Sortable List with MixItUp | 6,834 Kb |
Full Page Intro Slide with Content | 4,477 Kb |
Blog Concept - Large photos | 6,948 Kb |
Sketch Photo | 4,467 Kb |
Email Marketing Mock | 8,224 Kb |
HTML Mini Charts | 4,528 Kb |
Small Bar loader with minimal HTML | 2,482 Kb |
Simple - Blurred BG | 2,417 Kb |
Company Details | 2,386 Kb |
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!
Name | Username | Size |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Full page table inside the grid | Twikito | 1,864 Kb |
See Through | Larrygeams | 77,410 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!