Search
Search Code
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
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..
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..
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
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.
a google font like muli - mulish and embed code
mulish font embed codes and styles with example
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.
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..
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
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..
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...
@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.
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..
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..
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..
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..
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 ..
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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..
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..
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 { ..
