June 20, 2019 - Cloud Web Designs

Landing Page Example

By Karel Jordaan / On

Hello and hope you had a look at the landing page example first before you read this. If not go quick then come read further.

Ok so as you could see there really is not much to the page. It was coded using only HTML5,CSS3, vanilla javascript and I also used bootstrap 4 for the styling, only really used bootstrap for the navigation bar that you see in the top right corner of the page.

So there really is not much to the page, its basic,clean and clear and sometimes thats all you need right.
Ok so let me break it down just a bit. The navigation bar is a bootstrap component that was just customed slightly to display with a different font and a different color. The font used is one I found on google fonts and its called Courgette.
Only the Home link is linked up to take you back to the Cloud Web homepage but other than that none of the links or icons on the page will take you anywhere as that was not really the premis for this example.

Then the background images is coded dynamically so that they change every 3.5 seconds.I did not download the images and store them to an image folder to call the images from the file, that will be the “correct” way to do it, but rather what I did was simply use the direct URL of the image where I found it on the web. So the images might take a couple of seconds to load in some instances, also according to your internet speed, but once the sequence has ran a couple times the images might be cached in your browser so the loading will become more smooth and faster…I hope.There is 7 images in the sequence.
To make it change I coded a function using javascript.I stored all the image URL’s in a array and then used a javascript method called setInterval to run the images to set the background of the page body to the next image in the array.

At the bottom of the page I added some social media icons and added a nice little animation to them using only the CSS3 animation property.I looks quite cool I think.

And thats pretty much it. If you want to view the code go have a look on my github page here – https://github.com/BeatleGallagher/Landing-page-example or click the github icon on the bottom of this page and go to landing page example.

Thanks for reading,