Structuring and styling of a HTML page with tabs navigation

The basics, in colors

• Tab 1

  A couple of paragraphs as 1^st tab's content

  Duis suscipit fringilla sem, vel convallis enim. Donec efficitur diam ornare ante posuere lacinia. Sed nec dolor placerat, ullamcorper mi quis, finibus felis. Nulla quis dui id ligula vulputate accumsan. Nullam vitae diam hendrerit, malesuada urna a, malesuada purus. Sed vitae augue urna. Suspendisse vel tortor ipsum. In suscipit in mi viverra blandit.

  Facilis molestias voluptatem eum. Repellendus velit velit aut velit ut dolor rem ducimus. Laudantium delectus soluta sit et ex sed non voluptatem. Qui unde et culpa hic. Ea consequuntur et ex sed totam veritatis voluptas iure.

  Soluta reiciendis aperiam odio sunt. Ipsum ullam dolorem fugit sit veritatis consequatur. Illum et quis quisquam omnis aut et quisquam omnis. Aut animi qui voluptatum voluptatem est non nemo eius. Laborum optio sint ut reiciendis.

• Tab 2

  An image as 2^nd tab's content

  

• Tab 3

  A list of links as 3^rd tab's content

  • Temporibus voluptatibus assumenda quaerat beatae voluptates. Consectetur a temporibus est doloribus maxime. Illum illum laudantium et non non.
  • Totam non error inventore reprehenderit tempora praesentium. Facere iusto enim molestiae. Temporibus dolorem quis mollitia aliquam quos autem ab alias. Reprehenderit aut sapiente omnis. Rerum ut ut esse similique. Consequuntur autem tempora et soluta recusandae dolore voluptatem.

Same as above tabs, with a better look (after some fine-tune)

• Tab 1

  A couple of paragraphs as 1^st tab's content

  Duis suscipit fringilla sem, vel convallis enim. Donec efficitur diam ornare ante posuere lacinia. Sed nec dolor placerat, ullamcorper mi quis, finibus felis. Nulla quis dui id ligula vulputate accumsan. Nullam vitae diam hendrerit, malesuada urna a, malesuada purus. Sed vitae augue urna. Suspendisse vel tortor ipsum. In suscipit in mi viverra blandit.

  Facilis molestias voluptatem eum. Repellendus velit velit aut velit ut dolor rem ducimus. Laudantium delectus soluta sit et ex sed non voluptatem. Qui unde et culpa hic. Ea consequuntur et ex sed totam veritatis voluptas iure.

  Soluta reiciendis aperiam odio sunt. Ipsum ullam dolorem fugit sit veritatis consequatur. Illum et quis quisquam omnis aut et quisquam omnis. Aut animi qui voluptatum voluptatem est non nemo eius. Laborum optio sint ut reiciendis.

• Tab 2

  An image as 2^nd tab's content

  

• Tab 3

  A list of links as 3^rd tab's content

  • Temporibus voluptatibus assumenda quaerat beatae voluptates. Consectetur a temporibus est doloribus maxime. Illum illum laudantium et non non.
  • Totam non error inventore reprehenderit tempora praesentium. Facere iusto enim molestiae. Temporibus dolorem quis mollitia aliquam quos autem ab alias. Reprehenderit aut sapiente omnis. Rerum ut ut esse similique. Consequuntur autem tempora et soluta recusandae dolore voluptatem.

Feel tree to further adjust it and use it for your webpages...

Comments