Code – Static Version of Website

When starting the project my knowledge of HTML and CSS was limited. As I developed the static version of the website it has enabled to learn and expand my knowledge making sure I document and write tidy code so I will be easily able to refer back to areas quickly when needed.

These areas below were the areas I found most challenging; I have documented them as a reference so I can refer back to them in the future if needed.

Overlay \ Hover

To show the services my client offers clearly I have split them into two main areas which can be viewed by hovering over either the Publisher icon, the Other Services icon or the Resume icon.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Inspiration for coding this area came from codepen.io

https://codepen.io/larrygeams/pen/dBDLh

 

 

 

 

 

 

 

 

 

 

 

 

This the actual code for the Publisher Icon

 

 

 

 

 

 

 

 

 

 

 

Responsive

 This smaller blue icon menu displayed on the left below appears for mobile and tablet devices:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

When selected the menu drops down to show the menu options as below:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This is the media query in the CSS file to enable the website to be responsive:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Contact Form

 I choose to use the website Jotform (https://www.jotform.com) to create a contact form for the website.

 

 

 

 

 

 

 

 

This is the code below in index.html which displays the form within the website:

Advertisements