diff --git a/classFiles/class06/layout_grid/galleryStyle.css b/classFiles/class06/layout_grid/galleryStyle.css index 78de96f..c753a9e 100644 --- a/classFiles/class06/layout_grid/galleryStyle.css +++ b/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 */ diff --git a/classFiles/class06/layout_grid/main_menu.js b/classFiles/class06/layout_grid/main_menu.js index c2b7aea..09ace48 100644 --- a/classFiles/class06/layout_grid/main_menu.js +++ b/classFiles/class06/layout_grid/main_menu.js @@ -1,19 +1,16 @@ console.log("main menu"); const header= ` -
+
- + ` document.querySelector("body").insertAdjacentHTML("afterbegin", header); \ No newline at end of file diff --git a/classFiles/class06/layout_grid/styles.css b/classFiles/class06/layout_grid/styles.css index 5639830..ef997b3 100644 --- a/classFiles/class06/layout_grid/styles.css +++ b/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;