Differences
This shows you the differences between two versions of the page.
|
ii:labs:s2:02:tasks:02 [2024/03/17 17:58] florin.stancu [02. [30p] Integration with Flask backend] |
ii:labs:s2:02:tasks:02 [2024/03/17 18:24] (current) florin.stancu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== 02. [20p] Minor Design Changes ==== | + | ==== 02. [20p] Hyper-linking multiple pages ==== |
| Time to add a second HTML page: | Time to add a second HTML page: | ||
| * As expected, copy + paste your initial HTML with a new name, e.g.: ''second.html''; | * As expected, copy + paste your initial HTML with a new name, e.g.: ''second.html''; | ||
| - | * Link together the two ''.html'' pages (in each HTML page, find the ''<div class="navbar-nav mr-auto">'' element inside the ''#navbarToggle'' ''div'' and edit the ''href''s to point to each-other); | + | * Link together the two ''.html'' pages (in each HTML page, find the ''<a class="..." href="..">'' links inside the ''#navbarToggle'' ''div'' and edit the ''href''s to point to each-other); |
| <note warning> | <note warning> | ||
| Line 14: | Line 14: | ||
| <note tip> | <note tip> | ||
| - | **Hint** for highlighting the current menu item: create a CSS class with your desired properties (e.g., ''active'') and apply it to the appropiate menu element: ''<a class="nav-item nav-link" ...>'' element (also: different class attribute values are separated by space!). | + | **Hint**: create a CSS class (e.g., ''.active'') with your desired properties and append it to the appropiate menu link element: ''<a class="nav-item nav-link" ...>'' (also note: different class attribute values are separated by space!). |
| </note> | </note> | ||
| - | |||
