mainnav

classFiles/class06/layout_grid/galleryStyle.css

@@ -3,7 +3,7 @@
   display: grid;
   /* Define the grid template columns to repeat and adjust based on available space */
   /* Define the minimum and maximum size for the grid items */
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   /* Set the minimum and maximum size for the grid rows */
   grid-auto-rows: minmax(100px, auto);
   /* Set the gap between the columns */

classFiles/class06/layout_grid/main_menu.js

@@ -1,19 +1,16 @@
 console.log("main menu");
 
 const header= `
-<header>
+<header class="topnav" id="myTopnav">
     <nav>
         <ul>
             <li><a href="index.html" class="home">home</a></li>
             <li><a href="grid.html" class="projects">projects</a></li>
             <li><a href="contact.html" class="contact">contact</a></li>
         </ul>
-    <nav>
+    </nav>
 </header>
-<label for="checkbox">
-<!-- <i class="fa fa-bars menu-icon"></i> -->
-<i class="fas fa-caret-down menu-icon"></i>
-</label>
+</div>
 `
 
 document.querySelector("body").insertAdjacentHTML("afterbegin", header);

classFiles/class06/layout_grid/styles.css

@@ -19,34 +19,46 @@ img {
 }
 
 header {
-  height: 32px;
   width: 100%;
-  background-color: blanchedalmond;
+  max-width: 1400px;
+  margin: auto;
 }
 
 nav {
-  height: 32px;
+  height: 64px;
   width: 100%;
-  background-color: pink;
 }
 
 #home .home, #projects .projects, #contact .contact
 {
-  font-weight: 800;
+  color: hotpink;
 }
 
 nav ul {
+  height: 100%;
   list-style: none;
   display: flex;
-  justify-content: space-evenly;
+  align-items: center;
+  margin-left: 16px;
+  gap: 16px;
 }
 
+nav ul a {
+  text-decoration: none;
+  color: black;
+  text-transform: uppercase;
+}
+
+nav ul a:hover {
+  text-decoration: underline;
+}
+
+
+
 main {
   max-width: 1400px;
   margin: auto;
   height: 100%;
-  /* insures that main fills up the remaining space on the page */
-  background-color: white;
 }
 
 footer {
@@ -63,7 +75,6 @@ p {
 section {
   display: flex;
   flex-direction: column;
-  padding: 32px;
   gap: 32px;
 }
 
@@ -78,6 +89,11 @@ dt {
   font-weight: bold;
 }
 
+@media screen and (min-width: 1400px) {
+nav ul {
+  margin-left: 0px;
+}
+
 @media screen and (min-width: 768px) {
   * {
     font-size: 16px;