James Designs
Call (813) 892-8489
Certifications

Free Website Code

Free Website Code

The Free Website Code on this page is some I had to design since it did not exist and some others were very hard to find or were over complicated and I simplified. You’re more than welcome to use and change any of this code as you please for whatever purpose you need it for.

If you’re looking for something unusual and it is in my spectrum of expertise, please contact me and perhaps I can help you with it.

I am constantly adding new code to this page so check back often.



Half Inner Curved Box

Half Inner Curved Box

I searched high and low to find this simple half curved box written in CSS. As back in the old days the only way to get this effect was to create it with PhotoShop or Paint Shop Pro as an image. I would have to cut in to pieces and make a table based on all the sliced images. This was a very time consuming process and needless to say non-responsive.

Now with this little bit of code designed in CSS you can have it too.





Responsive Left Column Website Template

Responsive Left Column Website Template

There may be a time when you need the code layout for a Responsive Left Column Website Template. So instead of you having to re-invent the wheel, I’ve gone ahead and did it for you. You are free to copy and edit this code as you please. I hope it helps you in your web design(s). You can separate the Style code and create or place the CSS code within you own CSS file or leave as is.




On Click Play

On Click Play

On Click Play originally was designed to to be a mouse over play audio. After awhile it became annoying and the client wanted it to be able to play when clicked instead and popup a Modal window. I keep the original code as it could be useful for other ideas as well. It was written in Javascript ( I'm not the original writer, I just modified the code ). If you want to see what I did with it go to: roatancharter.com and click the $100 Gift Card. You will hear an applause and it will open up a Modal with a form to fill out. It's just some handy code to keep for your resource.




CSS3 Rounded Image Corners

CSS3 Rounded Corners

Creating rounded corners using CSS3 on an image is really easy. There are a couple of ways to do the code to give this effect.

border-radius: 10px 15px 5px 70px;

Another way to do this is using a separate radius for each corner, such as;

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;





HTML5 Curved Video

HTML5 Curved Video

A curved or rounded corner video is a little unusual and are rare to see. To make one you sort of have to put the carriage before the horse per-say to start. Also the HTML5 Player Control Panel will overlap any curved or rounded bottom portion as well. There is a way to solve this with JavaScript and or JQuery, but for this example I’m only doing the top two corners.

After you have placed the video on your website take a screenshot to use as the poster image ( hence the carriage before the horse). If you have a different color background besides white or black you’ll want to save the poster image as a .png instead of a .jpg, that way your corner colors will retain the same color format compared to a jpg being a shade off.





HTML5 Overlay with Text on Video

HTML5 Video Overlay

Have you ever wondered how to put an overlay on a video? Well with this simple code you can easily place it on your HTML5 videos with text.

Feel free to play with the code within the editor to help adjust it to your needs.

 





CSS Text Overlay on an Image

CSS Text Over Immage

Sooner or later when you’re working with CSS you will need to put text over an image. The old way was to embed the text in the image, but if you needed to change it you would need to find the original image and for example change the color from white to red. This can be a real pain, but with CSS you can easily change the text on top of the image.





Animated Backgrounds

Animated Backgrounds

An HTML5 Animated Background on some websites can look pretty impressive and are pretty easy to do as far as the code goes. Animation are a video in most cases such as an .MP4 with fall back of the same video but in, .OGV “OGG” and .WEBM for other types of browsers.

Online Converters:
Convert Your .MP4 to .OGV / .OGG
Convert Your .MP4 to .WEBM
Convert Your .MP4 to .GIF

Example 1 "Click Here"

Example 2 "Click Here"






Responsive Contact Form

Responsive Contact Form

Every website should have a way for your clients to contact you. One of the most popular is to have a Contact Form rather than just placing your email address on the website which spammers would love to get.

This Contact Form is responsive has field requirements along with Captcha with a refresh if they can’t read the Captcha text, and if that's not enough it will also capture the person IP address as well as the page they came from, plus more.

Another great thing about this Contact Form is you can add additional fields on the form without having to worry about editing the output file.

I've zipped all the files you will need to make it work.

You only need to edit the output.php file and add your own email address.

Feel free to edit anything you like within the code.

View a working Example and send me a Thank You if you like it.

 

Download Zip File




Mystery 404

Mystery 404 Bot

The Mystery 404 is a random PHP redirect script that will take those looking to spam or bots that are searching for pages on your website and redirect them to your online YouTube Videos or wherever you want. Why not benefit from people trying to waste your time and get extra views for your Youtube's or anything you would like to randomly send them to.

Feel free to modify or edit to whatever you find it useful for. If you have an idea on a use that goes beyond what I designed it for ( Random Redirecting ) send me a link so I can see what you come up with.

Download / Read Text File




Hidden Contact Form Fields

Hidden Contact Form Fields

These Hidden Contact Form Fields will display where a user came from, their IP, Browser, Language, and Referrer. Usually you have to hunt them down one by one from the Internet which can be time consuming. To use them on your contact form just insert them somewhere before your submit button within your contact form.

Download / Read Text File