Legends of Asgard is a site for visitors to get their fix of Norse Mythology, whether they are a newcomer, an enthusiast or just a returning visitor they can learn about the many Gods and the Realms in which they dwelled. There is a contact form available and social links where visitors can follow the sites social accounts.
The site can be accessed by this link
- As an event planner, I would like to contact the site owner, to discuss working together on a Norse themed event I am planning
- As a lover of Old Norse culture I want to see more information about the nine realms together with the ability to see the information about them, so that I better understand the Old Norse beliefs
- As a Norse Mythology teacher, I would like the ability to share information about the Viking gods and Sagas, so that I can easily share them with my students in an interesting format
- As a returning visitor of the site, I would like to sign up for updates, so that I can find out when new gods and sagas are added
- As a Mythology/Folklore enthusiast, I would like an area showing all the gods with links to their short blurbs and saga info displayed in eye catching card format, so that I may quickly find the sagas and all the information I need
- As a Norse Mythology student, I would like to click a link that goes to external knowledge articles with more in depth information, so that I can build on my knowledge and ensure my work is cited from a reputable source
-
-
Taking a Mobile first approach:
- On mobile and tablet Devices
- When the hamburger menu is clicked, there is dropdown menu with the links in the same order. Essentially this is a mobile version of the
Desktop side menu specified below.
- On Desktop devices:
- The navigation bar has the logo in the center and the hamburger menu disappears and is replaced with a fixed graphical side menu positioned a bit further down the viewport on the right hand side.
- On mobile and tablet Devices
-
-
-
Hero section has a fixed background image.
-
Hero section has a header text that consist:
- The name of the site.
- Short blurb building anticipation for the content that follows.
-
-
-
Each section contains a static background image of the relevant God, with the Gods name at the top.
-
A lengthy blurb with a Glassmorphic background contains details relating to the God for its relevant section.
-
The blurb (sagas) tell stories urging the user to continue reading.
-
-
-
Originally planned to be a tree of the gods showing links and relationships, but realised during development that this would be more time consuming than originally planned.
-
This is the section that shows the nine realms in norse myth instead.
-
Each realm is hoverable and when hovered displays a tooltip with a description.
-
-
-
The Althing section has a contact form:
-
All text input fields are customized.
-
Labels are animated when the input field is in focus and are not empty.
-
All inputs are set to be required to fill out.
-
The submit button is animated on hover.
-
-
The 'Gods Hear Me' button leads to the response page.
-
-
-
Footer contains social media links that open in a new tab.
-
This is a fixed footer.
-
Links highlight on hover.
-
-
- Response page appears after submitting the contact form.
- It contains the thank you message and a button to return to the homepage.
- HTML was used as the foundation of the site.
- CSS - was used to add the styles and layout of the site.
- CSS Flexbox - was used to arrange items simmetrically on the pages.
- CSS roots was used to declaring global CSS variables and apply them throughout the project.
- Figma was used to make wireframes for the website.
- VSCode was used as the main tool to write and edit code.
- Git was used for the version control of the website.
- GitHub was used to host the code of the website.
- Adobe Firefly was used to create images and icons for the site using AI text to image technology.
-
Soft blue color was used as the main color of the website due to its phycological effect on people's minds. As this color is associated with trustworthiness and reliability, website visitors could build a firm believe in the organization "Animal Shelter".
-
Light Blue Color was used as a background color since this color creates a sense of tranquility and makes a connection between animal's ownership and peacefulness.
-
Purple color was used to make an emphasis on the logo and leave a memorable effect on the website visitors.
- Lato Google Font was used as the main font of the website in order to increase readability of the content on the pages.
- Lobster Google Font was used to attract viewers' attention to the company's logo, to make an accent on the strong points of the company, and to incentivize visitors to contact "Animal Shelter".
Please refer to the TESTING.md file for all test-related documentation.
insert WAVE report before and after Insert page load report before and after
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/Dave-MK/mp1-legends-of-asgard.git
- Add custom 404 page;
- Add accessability report with WAVE Web Accessibility Evaluation Tool;
- Improve the quality of the commit messages (I am aware that some of them may not meet the standards and will improve these in the future);
- Add fully functional contact form.
- Add opt-in form for email addresses or incorporate this into the contact form via a opt-in checkbox.
- Add the external links to God wikis for more reputable source referencing.
-
- Inspiration for the gallery hover effect came from the article "How to add a gradient to overlay to a background image using just CSS and HTML" published the website Web Dev etc.
- Inspiration for the responsive hamburger navbar came from Kevin Powell on his YouTube channel.
-
- All the images for the website were created using text to image AI in Adobe Firefly.
-
- Compress PNG was used to compress PNG images.
- Convert PNG to WEBP was used to convert PNG images to WEBP.
- Convert WEBP to AVIF was used to convert WEBP images to AVIF.
- Coolers & Adobe Color were used to create the color palette.
- Miguel was a great supporter of another bold idea of mine for this project. Tim guided me through the development of the project and helped me to learn a lot of new things by challenging me to do something new.
- Iuliia Konovalova, my code institute mentor was a huge asset in the mid to late stages of the project, assisting with syntax and semantic code improvements and best practices.
- Code Institute tutors and Slack community members for their support and help.
- Lun Dev for his amazing tutorials on CSS wizardry.