03. Tables - Gr0mi4/Hello-World GitHub Wiki

The goal is to create different static documents for different pages: main.html, posts.html, contacts.html, about.html. On each page we will employ different CSS techniques and features.

In this task we are going to create "Contacts" page with the following design:

1. Create 4 copies of the index.html and save them with the names: main.html, posts.html, contacts.html, about.html. Do the same for styles. In each html file include a corresponding file with styles, so that each page uses its own styles.

2. Update the navigation menu on each page so that all links work and you could navigate between pages.

    <ul class="menu">
      <li class="menu-item">
        <a class="menu-item-link" href="./main.html">MAIN</a>
      </li>
      <li class="menu-item">
        <a class="menu-item-link" href="./posts.html">POSTS</a>
      </li>
      <li class="menu-item">
        <a class="menu-item-link" href="./contacts.html">CONTACTS</a>
      </li>
      <li class="menu-item">
        <a class="menu-item-link" href="./about.html">ABOUT</a>
      </li>
    </ul>

3. In contacts.html you need to build a table using <table> element (first read about it and learn how to create tables. Search the internet on this topic). The table must look exactly as on design mock: 2 columns with table head and table body, it should have 1px solid black border and rounded corners.

For the "Contacts" title use same styles as for the article title in main.html.

Fill the table with different web addresses: email, social links, etc.

4. Add a tricky background-color effect to the table rows: colors alternate depending on whether it's an even or an odd row. It should look like this:

Colors: rgba(236, 252, 133, 0.2) and rgba(43, 232, 255, 0.2).

5. Wrap all strings in "Details" column with appropriate links.

• For email link use "mailto" format: https://www.rapidtables.com/web/html/mailto.html
• For phone numbers use "tel" format: https://www.elegantthemes.com/blog/wordpress/call-link-html-phone-number
• For all URLs use usual links, but they should open in a new window.