The Ugarit Site, is a historical site about the ancient city of Ugarit, surprisingly a lot of people have not heard of the city despite its huge contributions to our civilisation. In the site i attempt to introduce the city to as many people as possiable, or perhaps provide more detailed information for those who already know about Ugarit. the main sites objective is to have as much information as possiable about the city and its civilization all in one place, mainly to those who are interested in histoy in general, and bronze age civilizations in depth. but also to those who are curious about any of the content's avialable information! the site also can become as a library of information about this historical subject.
I wanted to have as simple design that focus on the accessibility and easy to use, since the focus is the value of information as a whole i used figma.com to create a mock up, wish looked like this:
was tested on am i responsive in addition also tested on all screen sizes using google dev tools. i made the necessary adjustments by applying media query to css to ensure that the site is useable on all screen sizes
3 lists nested inside the footer containing:
A floating aside element with fixed positioning that provides navigation buttons to make it easier for users to navigate between the 4 different sections within the main content of the home page.
A gallery page with several images nested within a figure element and provided with a figcaption to make it more accessible, and make it easier to add more images in the future.
A sign up page for users who wish to become members and receive emails from the Ugarit site.
Upon testing the html code on W3C Validator , i encountered several error regarding closing tags in the some paragraphs and others erros such as having heading elemnts within unorderd lists elements, wish i was able to fix. so now testing with W3C Validator is tottaly error free.
I also ran the site on Jigsaw and the resault was error free.
However upon running the website on Firefox there was unnecessary white space under the footer that i was not able to find the cause or the solution at first but after searching and trying different ways to solve it, i found the answer in a fourm of stackoverflow where i added overflaw: hidden; to the footer wish solved the problem.
The site is deployed on github pages by following these steps:
The Ugarit site link is here: https://hijazi-alaa.github.io/Ugarit-site/
The main text of the home page is taken from as provided in sources in the footer of the page : https://www.heritageforpeace.org/the-hymn-to-nikkal/
https://historyandarchaeologyonline.com/ugarit-and-the-origins-of-alphabet/
https://en.wikipedia.org/wiki/Ugaritic_texts
https://www.worldhistory.org/ugarit/
Social Media links logos used fontawsome.com
instructions on how to embed a youtube video from google support answers: https://support.google.com/youtube/answer/171780?hl=en
Used guide on how to remove underline from a link in HTML since the guide provided by a question in stackoverflow: https://stackoverflow.com/questions/10853881/how-to-remove-underline-from-a-link-in-html
-(i used the html and css essentials provided in Code institute LMS, to regather and remember alot of detaisl throughout the project)
Main content image, tourists in Ugarit ruins and image of the royal palace were all taken from wikipedia commons page: https://commons.wikimedia.org/wiki/Category:Royal_Palace_of_Ugarit and resized to fit the page.
Ugaritic Alphabet image was taken from :
https://sana.sy/en/?p=170139 the image was resized to fit the page.
Image of an art description the city of Ugarit taken from a
http://artecult.com/o-reino-de-ugarit/ the image was resized to fit the page
Image of an art description the royal palace in Ugarit was taken from
https://www.pinterest.com/pin/638033472191847970/ the image was reszied to fit the page
image of a letter written to the hittie king on an ugaritic tablet was taken from https://www.archaeology.org/issues/430-2107/features/9752-ugarit-bronze-age-archive the image was resized to fit the page.