Search
Search Code
flip card animation 3d front and back css html
3d flipping card with front and back content and animation
six box grid css html custom no gap
re-usable four box grid with no gap, plus stack on responsive 1024px
four box grid css html custom
re-usable four box grid with gap calculations
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
font awesome spinner loader loading spinner
just a simple font awesome spinner to use for loading areas
Quick Embed code for Titillium Web Google Font
Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic thes..
Quick Embed Figtree Font
Quick embed code and test paragraph for the google font figtree
Quick Embed - Google Font - Fira Sans
fira sans font quick embed and css class
Quick Embed - Google Font - Inter
Quick Embed code for google font inter
Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code
According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same. All Style..
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
simple file cache and check in php
just a quick cache bit of code, may need tweaking to actually work... i just added it here as i thought it was re-usable. Also requires simple_html_dom library.
font quick embed inter all styles google font
For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..
Random User Profile Loading Script in vue
uses the random user ui here to generate profile boxes using vue js original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010
Map Image with Easy Dots and Titles using only CSS
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
Quick Embed Import and Code Samples for Google Font Roboto
quick embed codes and code examples for the google font Roboto. Roboto Font Preview
Oswald Font Quick Embed
Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..
Quicksand font quick install
Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both.
Playfair Display Font Quick Embed - Google Font Quick Embed
Note: you only need the @import in css or the link href not both to embed this font. This font reminds me a bit of Times New Roman
get json with php from a url and display it
yep its that easy. this code shows getting the contents from a json request api. var dumping all of the results and extracting one single item by its array key and showing it.
fancybox inline auto size modal easy
It seems weird to me that the examples on here, do not have code linked to them, and rather i have to dig through the source and find how they work.
Invalid argument supplied for foreach()
Fix for Warning: Invalid argument supplied for foreach() in /var/www/html/pages/seo-meta-tag-search.page.php on line 204 As this is just a warning, i may not have noticed it originall..
font similar to century gothic questrial google font quick install
I found this font to be closely related to the paid font "Century Gothic" the only issue i found with this font is that it only comes in regular weight. But Questrial is free to use, so that is..
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
Lato font quick install
a quick code to install the font Lato from google, includes the stylesheet and also the @import links, just pick one.
Testing Playwrite on for Node
I came across this library on y news, and thought id give it a bit of a test. I managed to get it working but not really sure what tests it can do. I set it to take a screen shot of a we..
get the content of a url get the content of a link with php and test if the result is empty
Where $import_url is the target URL.
extract meta attributes with simple html dom
pass in the url as import_url and it will search for the meta keywords tag and echo the result.
php check if url is valid with filter_var
check if url is valid using filter_var and return a message if the url is invalid rather than continuing
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
youtube search api request function
This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
foundation base html template - foundation template
just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag. Loading the fonts Gist : not tested https://gist.github.com..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
stackable bio or biography list with portrait image title and text
a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. As its in foundation here is ..
open sans @import embed font quick
just a quick and nasty css import for the Open Sans google font.
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
404 Error Page Codepen
found this in my links the other day, still looks cool...
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
jquery toggle menu testing
using jquery toggle to show and hide the sub menu's
show all methods or functions in a class (class function version)
add this to your class to show all its methods including this one... sorts the array ascending by values so should be sorted in a-z
passing in arrays to your functions rather than using variables
this is probably an old technique, but i discovered it the other day when i was playing around, and i thought wow i should do this to all my functions, i cant see the downside, apart from having to re..
python extract images into an array from a url
this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..
python url to text with beautiful soup
python using beautiful soup to convert a url into text Python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://kruxor.com"page = urlopen(url)html = page.read().decode("u..
python extract title tag from url and html using regex
this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..
python import and print url
here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..
How to set a cookie and expire it in 30 days
Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..
how can i make my code look nice, or highlighted in evernote
* update: this is actually a paid tool, so i will be skipping this, as the code highlighting function is not that important to me. If anyone finds a nice free way to do this let me know. I have only ..
@import and html link to Montserrat font family google font
includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
extracting the useful bits of bootstrap
Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
Bootstrap 4 Center menu items in a navbar
Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
Bootstrap Darkmode Switch
I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
check if a timestamp is older than one hour
this will check if the timestamp string is less or more than one hour old.
Core - File Structure
Core works on the following directory structure: //class//class/extends//css//db//images//import//inc//lib//pages//templates/ all of the core structure is fairly self explanitory core.class.php can..
csv read example
Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..
video embed no controls
embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..
design nice block header
I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..
