Codepen of the Day

Developer
Tompud
Size
2,262 Kb
Views
30,360
  1. Codepen of the Day Previews
  2. Codepen of the Day HTML Codes
  3. Codepen of the Day CSS Codes
  4. Codepen of the Day JS Codes

How do I make an codepen of the day?

Simple little script to select random things that you can create.. What is a codepen of the day? How do you make a codepen of the day? This script and codes were developed by Tompud on 19 November 2022, Saturday.

Codepen of the Day Previews
IQ Test

Codepen of the Day - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codepen of the Day</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="randomChoice"></span>
<a href="" class="randomLink">CLICK FOR SOME INSPIRATION.</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Codepen of the Day - Script Codes CSS Codes

body { font-family: "Open Sans"; font-weight: 100; font-size: 25px; height: 100%; width: 100%; background-image: url(https://images.unsplash.com/photo-1446797376004-9352dfc9f789?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.randomChoice { margin-top: 250px; width: 100%; text-align: center; display: block; color: #fff; text-shadow: 0 0 32px white;
}
.randomLink { margin-top: 9px; text-decoration: none; color: #3c3c3c; font-size: 9px; width: 100%; text-align: center; display: block; transition: .2s;
}
.randomLink:hover { color: #656565;
}

Codepen of the Day - Script Codes JS Codes

var list = ["Navbar", "Horizontal Navbar", "Vertical Navbar", "Slideshow", "Button", "Search Bar", "Progress Bar", "Parallax", "Settings Dropdown Button", "Text Hover Effect", "Image Hover Effect", "Button Toggles", "Breadcrumb", "Tooltip", "Slider", "Notification Bubble", "Progress Bar", "Modal Window", "Accordian", "Loading Animation"
];
var rand = Math.floor(Math.random() * list.length);
var choice = list[rand];
$('.randomChoice').html(list[rand].toUpperCase());
$('.randomLink').attr("href", "https://dribbble.com/tags/" + choice);
Codepen of the Day - Script Codes
Codepen of the Day - Script Codes
Home Page Home
Developer Tompud
Username tompud
Uploaded November 19, 2022
Rating 3
Size 2,262 Kb
Views 30,360
Do you need developer help for Codepen of the Day?

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!

Tompud (tompud) Script Codes
Name
Funky Text
Frozn
Nav
CSGO Killfeed
CSGO Accept Button
Jitter Pic
A Pen by tompud
Noise and Dividers
Skel UI Kit
Skel Navbar
Create amazing marketing copy 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!