Line 1: |
Line 1: |
| + | <!--The following line of code hides the page title--> |
| + | {{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}} |
| {{#css: | | {{#css: |
− | | + | .menubar a:visited { |
− | .headcontainer { | + | color: #FFFFFF; |
− | font-family: "Open Sans",sans-serif;
| |
− | font-style: normal;
| |
− | font-weight: 200;
| |
− | }
| |
− | | |
− | h1 {
| |
− | color: #00A196;
| |
− | padding-bottom: 0px;
| |
− | font-size: 40px !important;
| |
− | font-family: "Open Sans",sans-serif !important;
| |
− | border: none;
| |
| } | | } |
| | | |
− | .headercontent | + | .menubar { |
− | {
| + | background-color:#3D3D3D; |
− | width:900px;
| + | height: auto; |
− | margin-left: auto;
| + | padding: 0; |
− | margin-right: auto;
| + | margin: 0; |
− | }
| + | font-family: "Open Sans",sans-serif; |
| + | font-style: normal; |
| + | font-weight: 200; |
| | | |
− | .menubar
| |
− | {
| |
− | background-color:#3D3D3D;
| |
− | height: 50px;
| |
− | padding: 0;
| |
− | margin: 0;
| |
− |
| |
− | }
| |
− |
| |
− | .headercontent p
| |
− | {
| |
− | color: #000000;
| |
− | font-size: 20px;
| |
− | padding: 0;
| |
− | margin: 0;
| |
| } | | } |
− | .menubar ul
| |
− | {
| |
− | list-style-type: none;
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | overflow: hidden;
| |
− | padding: auto; /* Remove padding */
| |
− | margin: auto; /* Remove margins */
| |
| | | |
− | width: 900px;
| + | .menubar ul { |
| + | list-style-type: none; |
| + | margin: 0; |
| + | padding: 0; |
| + | overflow: hidden; |
| + | width: 100%; |
| } | | } |
| | | |
− | .menubar li | + | .menubar li { |
− | { | + | display: inline-block; |
− | display: block;
| + | color: #FFFFFF; |
− | color: white;
| + | text-align: center; |
− | text-align: center;
| + | padding-top: 15px; |
− | padding: 15px 15px;
| + | padding-bottom: 15px; |
− | text-decoration: none;
| + | text-decoration: none; |
− | float: left;
| |
| } | | } |
| | | |
− | .menubar li:hover | + | .menubar li:hover { |
− | { | + | background: #000000; |
− | background: #000000;
| |
| } | | } |
| | | |
| .menubar li:focus | | .menubar li:focus |
| { | | { |
− | background: #000000;
| + | background: #000000; |
| } | | } |
| | | |
− | li a | + | .menubar li a { |
− | { | + | color: white; |
− | color: white;
| + | padding: 20px; |
| } | | } |
− | li a:hover:not(.active) { | + | .menubar li a:hover:not(.active) { |
− | color: #FFFFFF;
| + | color: #FFFFFF; |
| } | | } |
| | | |
Line 82: |
Line 55: |
| } | | } |
| | | |
− | .hero_header {
| + | .rainbow_bar { |
− | color: #FFFFFF;
| + | height: 20px; |
− | text-align: center;
| + | background: linear-gradient(90deg,#ffad31,#52c765,#27c9bc,#ff5958); |
− | margin-top: 0px;
| + | margin-bottom: 30px; |
− | margin-right: 0px;
| |
− | margin-bottom: 0px;
| |
− | margin-left: 0px;
| |
− | letter-spacing: 4px;
| |
− | }
| |
− | /* Hero Section */
| |
− | .hero {
| |
− | background-color: #FFFFFF;
| |
− | padding-top: 30px;
| |
− | padding-bottom: 30px;
| |
− | }
| |
− | | |
− | .rainbow_bar | |
− | { | |
− | height: 20px;
| |
− | background: linear-gradient(90deg,#ffad31,#52c765,#27c9bc,#ff5958);
| |
| } | | } |
| | | |
| }} | | }} |
− | <div class="headcontainer">
| |
− | <div class="hero" id="hero">
| |
− | <div class="headercontent">
| |
− | <h1>Digital Talent</h1>
| |
− | <p>Help grow digital talent and skills in the government of Canada</p>
| |
− | </div>
| |
− | </div>
| |
− | <!-- About Section -->
| |
| <div class="menubar"> | | <div class="menubar"> |
− | <ul> | + | <ul role="menu"> |
− | <li><a href="www.google.com">Home</a></li> | + | <li role="menuitem">[[Digital_Talent|Home]]</li> |
− | <li>Digital Talent Strategy</li> | + | <li role="menuitem">[[Digital_Talent/Digital_Talent_Strategy|Digital Talent Strategy]]</li> |
− | <li>Digital Skills Initiative</li> | + | <li role="menuitem">[[Digital_Talent/Digital_Skills|Digital Skills Initiative]]</li> |
− | <li>Ecosystem for Digital Talent</li> | + | <li role="menuitem">[[Digital_Talent/Ecosystem_for_Digital_Talent|Ecosystem for Digital Talent]]</li> |
− | <li>Contact</li> | + | <li role="menuitem">[[Digital_Talent/Learning_Paths|Learning Paths]]</li> |
| + | <li role="menuitem">[[Digital_Talent/Contact|Contact]]</li> |
| </ul> | | </ul> |
| </div> | | </div> |
| <div class="rainbow_bar"></div> | | <div class="rainbow_bar"></div> |
− |
| |
− | <!--Navigation coding ENDS-->
| |