GET SMART
Snippet Library
Explore a collection of handy, reusable code snippets for web development. Filter by category, or search by name to find exactly what you need.
Name
Description
Category
/* CSS */
.hover-text {
color: #3D6F31;
transition: color 0.3s ease;
}
.hover-text:hover {
color: #e67e22;
}
/* HTML Example */
<p class="hover-text">Hover me to change color!</p>
/* HTML HEAD - Link the font */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
/* CSS */
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
JavaScript to ensure all external links open in a new browser tab automatically.
JS
// JavaScript
document.addEventListener('DOMContentLoaded', function() {
const internalDomain = window.location.host;
document.querySelectorAll('a').forEach(link => {
const linkHost = link.hostname;
if (linkHost && linkHost !== internalDomain && link.protocol.indexOf('http') === 0) {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
}
});
});
/* CSS */
.primary-btn {
background-color: #3D6F31;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.primary-btn:hover {
background-color: #58a058;
}
/* HTML Example */
<button class="primary-btn">Click Here</button>