Friday, March 1, 2024

Evidence of Editing (coding and work progression) pt 2

 

This is the genre page of my website which can be accessed through the main page as i have linked a 'genre button' to redirect a user to this page when clicked using <a href="Genre page.html">Genre</a> code. This page will tell a user the required information for the first page and the general idea / concept of what my website is about.
To change the background colour of my website, I have used the css to group what i want to be coloured which in this case was the body. For this I put {background-colour: lightgoldenyellow} which changed the background to be a light yellow. 

This is still the css style sheet, here I have typed in .h1 (heading 1) to highlight what text i wish to change to font to then using the {} brackets i typed the code to change the font.



.h1 {font-family:Cambria
-tells the website what text it needs to change to

"Hoefler Text", "Liberation Serif", Times, "Times new roman", "Serif""Times New Roman", Times, Serif;
-This is what specifies the font that will be used.




Next, I returned to the main page, I have selected the text associated with my image / icon for 'Action' and have clicked 'Windows -> Properties'. Here I have the option to change the size of my images to make them smaller. 










Here is what my icons look like after resizing them. I changed the width to be 60 which changed the height automatically along with it. Now I have done this and there is space to write, I can now put the appropriate information onto my website for this front page.

My next step is to try and add a Home button icon on each page so users can be redirected to the main page when it is clicked.

Profile Page:
For the profile page, I wanted to add three different sections so I imported a table that has 3 rows and one column to separate the three options.
Here are the settings that I used to make the table, I ensured that the table wasn't too large for the page. After doing this, I added the text.
















Here is what the table looks like after being imported, however there are a few things I need to change at this point in time. To begin, I need to change the 'Home' text to be in the top left corner of the screen, away from the 'profile' text as this doesn't have anything to do with the rest of my 




Here I had issues with the sizing on boxes that I had as the text was moving outside of the box and the box size wasn't able to fit with the text. To fix this, I used 'min-width: Opx; height: auto''>  as this code is what automatically fixes the box to change size depending on how much text it needs to cover. 


No comments:

Post a Comment

Test Plan