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.
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.
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,