Responsive starter

frc3512 · Feb 15, 2022 · a0b31a1 · a0b31a1
1 parent ecee08a
commit a0b31a1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -10,29 +10,33 @@
  <title>Software Team - FRC Team 3512</title>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="shortcut icon" type="image/ico" href="favicon.png" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
- <div id="Sidenav" class="sidenav">
-  <a href="/index.html">Home</a>
-  <a href="bootstrap/index.html">Bootstraps</a>
-  <a href="ci/index.html">Curriculum</a>
-  <a href="vpn/index.html">VPN Setup</a>
-  <a href="fll/index.html">FLL</a>
-  <a href="admin/index.html">Admin</a>
-  <a href="archives/index.html">Archives</a>
-  <div class="Media_Wrapper"> 
-  <a href="https://github.com/frc3512">
-  <img 
-  src="/Assets/github.png"
-  alt="Our Github">
-  </a> 
-  <a href="https://www.youtube.com/channel/UCecHOosspPz6o9_ZXzDxxVw">
-  <img
+ <div class="sidenav">
+ <a href="/index.html">Home</a>
+ <a href="bootstrap/index.html">Bootstraps</a>
+ <a href="ci/index.html">Curriculum</a>
+ <a href="vpn/index.html">VPN Setup</a>
+ <a href="fll/index.html">FLL</a>
+ <a href="admin/index.html">Admin</a>
+ <a href="archives/index.html">Archives</a>
+ <div class="Media_Wrapper"> 
+ <a href="https://github.com/frc3512">
+ <img 
+ src="/Assets/github.png"
+ alt="Our Github">
+ </a> 
+ <a href="https://www.youtube.com/channel/UCecHOosspPz6o9_ZXzDxxVw">
+ <img
  src="/Assets/youtube.png"
  alt="Youtube">
- </a> 
- </div>
- </div>
+ </a> 
+ </div> 
+ <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+ <i class="fa fa-bars"></i>
+ </a> 
+ </div> 
  <div class="Content">
  <div class="top">
  </div>

diff --git a/main.css b/main.css
@@ -3,6 +3,14 @@
  src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 }
 
+@media (max-width: 500px) {
+ .sidenav{
+ display: none;
+ }
+
+
+}
+
 .sidenav {
  height: 100%;
  width: 10rem;