[x] Create a navigation container ( suggested: <nav class=“tabs">) with two <a> elements linking to the corresponding sections: About and Repositories.
[x] Set the <a> elements to display: inline-block; and center the text with the text-align property.
Styling the tags:
[x] Set your .tabs class to a 100% width for full adjustment to viewport size changes.
[x] Suggested padding: padding: 10px 25px;
[x] border-top: 1px solid lightgrey;
[x] border-bottom: 1px solid lightgrey;
[x] `color: #4978c0; (for pixel perfect quality, the color picker is a handy tool :wink: )
[x] Remember to apply the appropriate font family (sans-serif preferably), size and weight and color properties.
Active tag:
[x] Create a .active class with the following style:
[x] border-top: 2px solid #d26911; (hex color per reference implementation)
[x] border-right: 1px solid #lightgrey;
[x] color: #444444; (hex color per reference implementation)
[x] Set a border-bottom-color: white; to give the appearance of not having a bottom border in the active tab.
melrodbos
commented
9 years ago
Planning Tab navigation for mobile viewport:
<nav class=“tabs">) with two<a>elements linking to the corresponding sections: About and Repositories.<a>elements todisplay: inline-block;and center the text with thetext-alignproperty.Styling the tags:
.tabsclass to a 100% width for full adjustment to viewport size changes.padding: 10px 25px;border-top: 1px solid lightgrey;border-bottom: 1px solid lightgrey;Active tag:
.activeclass with the following style:border-top: 2px solid #d26911;(hex color per reference implementation)border-right: 1px solid #lightgrey;color: #444444;(hex color per reference implementation)border-bottom-color: white;to give the appearance of not having a bottom border in the active tab.