Federal Youth Network/Home ENG

From wiki
Jump to navigation Jump to search

<!DOCTYPE html> <html lang="en"> <head> <title>W3.CSS Template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <HTML> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </html> <style> html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;} .w3-sidebar { 

 z-index: 3;
 width: 250px;
 top: 43px;
 bottom: 0;
 height: inherit;

} </style> </head> <body> 

   <a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"></a>
   <a href="#" class="w3-bar-item w3-button w3-theme-l1">Logo</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">About</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Values</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">News</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Clients</a>
   <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Partners</a>

<nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar"> 

 <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
   
 </a>

Menu

 <a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
 <a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
 <a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
 <a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>

</nav>

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

AD

AD

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

AD

AD

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

AD

AD

     <a class="w3-button w3-black" href="#">1</a>
     <a class="w3-button w3-hover-black" href="#">2</a>
     <a class="w3-button w3-hover-black" href="#">3</a>
     <a class="w3-button w3-hover-black" href="#">4</a>
     <a class="w3-button w3-hover-black" href="#">5</a>
     <a class="w3-button w3-hover-black" href="#">»</a>

 <footer id="myFooter">

Footer

Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>

 </footer>

<script> // Get the Sidebar var mySidebar = document.getElementById("mySidebar");

// Get the DIV with overlay effect var overlayBg = document.getElementById("myOverlay");

// Toggle between showing and hiding the sidebar, and add overlay effect function w3_open() { 

 if (mySidebar.style.display === 'block') {
   mySidebar.style.display = 'none';
   overlayBg.style.display = "none";
 } else {
   mySidebar.style.display = 'block';
   overlayBg.style.display = "block";
 }

}

// Close the sidebar with the close button function w3_close() { 

 mySidebar.style.display = "none";
 overlayBg.style.display = "none";

} </script>

</body> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=Federal_Youth_Network/Home_ENG&oldid=67976"