04. Positioning - Gr0mi4/Hello-World GitHub Wiki

1. Make the site logo a link ("Iron Blog") and it should lead to "main.html". Remove "Main" from the navigation bar. Update it on all pages.
2. Rename "Posts" in the navigation to the "Topics" and link to the topics.html (update it on all pages), same for the file names. In topics.html clear everything from main tag and add there a string "Topics" as temporary page content. Smth like:

<main class="main">
  <h1>Topics</h1>
</main>

Remove all unused styles from "topics.css".

3. In about.html clear everything from main tag and add there a string "About" as temporary page content. Remove all unused styles from "about.css".
4. Make a copy of the main page and name it article. In main.html clear everything from main tag and add there a string "Main" as temporary page content. Remove all unused styles from "main.css". So now what we had before displayed on the main page we show only on article page.
5. Make a new directory images and put there all images you use on all pages.
6. Make a new directory pages and inside create directories for all pages:

/fonts
/images
/pages
  /article
  /about
  /main
  /topics

Move all related files to the appropriate directory and update navigation on all pages so that it works after these changes.

7. Now let's improve our page routes, so that it would look better in browser's URL field: instead of pointing navigation links to /pages/about/about.html we can rename all our html files to index.html and then you can update navigation links to this format: pages/about, pages/article, etc.

1. Learn about all types of elements' positioning: https://www.w3schools.com/css/css_positioning.asp
2. Implement a drop-down menu for topics in the navigation, using absolute position:

On hover:

The menu should appear from behind the navigation bar when you put the cursor above "Topics" it goes down. (use transform: translateY(...) for this). The items in the drop-down menu should have a hover effect, so that the background becomes slightly greyish and cursor: pointer.

Tip: drop-down menu must be a list (ul) and placed inside of the topics menu-item. menu-item has position: relative, while the drop-down menu has position: absolute.

3. On article page add a lot of dummy text (at least 3 times more), and make the advertisement to be sticky. So that when you scroll down the advertisment always stays in the viewport while the article on the left is scrolling. As an example, take a look at this article https://www.thedailybeast.com/two-against-the-world-bernie-sanders-and-elizabeth-warren-take-all-on-comers