Search Code
Search Code by entering your search text above.
Quicksand font quick install

Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both. 

1:25 am, June 3, 2022
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

4:57 am, June 1, 2022
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.

12:36 am, May 31, 2022
a google font like muli - mulish and embed code

mulish font embed codes and styles with example

4:41 am, May 30, 2022
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..

4:32 am, April 4, 2022
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..

3:33 am, March 29, 2022
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.

11:25 pm, March 28, 2022
how to embed google fonts icons

For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..

12:21 am, November 17, 2021
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. ..

11:51 pm, October 14, 2021
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.

4:17 am, October 12, 2021
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

8:55 am, October 6, 2021
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..

5:50 am, October 1, 2021
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 ..

1:13 am, October 1, 2021
open sans @import embed font quick

just a quick and nasty css import for the Open Sans google font. 

1:05 am, October 1, 2021
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

12:23 am, September 29, 2021
creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

4:23 am, August 26, 2021
roboto and poppins fonts include quick code

css import for poppins and roboto google fonts with the common font weights

12:10 am, July 23, 2021
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 2021
@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.

11:58 pm, January 19, 2021
CSS Grid Frame Work

8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..

10:56 pm, December 7, 2020
design elements
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..

2:43 am, November 9, 2020
css font style italic

i had a request to make some font italic the other day, and for some reason i could not remember the css for it.  It's font-style: italic; I should know that! I guess italic fonts annoy me a bi..

12:27 am, September 2, 2020
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..

5:14 am, August 31, 2020
embed and use a ttf font font face

Handy if google fonts does not have your required font and you have the correct licence for showing it on your site... ;) css /* Include the font, you can call it whatever you like */ @font-face ..

6:20 am, August 31, 2018
material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="" rel="stylesheet"> this one should ..

6:20 am, August 31, 2018
set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..

6:20 am, August 31, 2018
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(''); .mid-header { ..

6:20 am, August 31, 2018

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕


Subscribe to weekly update emails.
Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Random CSS Property


The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
conic-gradient() css reference