From 2457d76872dbe5ba1cfbc8f8d99309fb492683ea Mon Sep 17 00:00:00 2001
From: vern wolfley <vern.wolfley@gmail.com>
Date: Fri, 12 Jan 2024 17:22:07 -0700
Subject: [PATCH] update css layout for main page

---
 README.md           |  2 ++
 index.html          | 60 +++++++++++++++++++++++++--------------
 scripts/getdates.js |  9 ++++--
 styles/base.css     | 68 +++++++++++++++++++++++++++++++++++++--------
 4 files changed, 103 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 43d3248..a2ad58b 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@ This index is for the github pages for hosting all of the sites being developed.
 - 🔗 [Google Chrome Web Browser](https://google.com/chrome/)
 - 🔗 [Visual Studio Code (aka VS Code)](https://code.visualstudio.com/)
 - 🔗 [Live Server VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
+- 🔗 [HTML Validation Service](https://validator.w3.org/)
+- 🔗 [CSS Validation Service](https://jigsaw.w3.org/css-validator/)
 
 ---
 
diff --git a/index.html b/index.html
index 402f4bf..1c057dd 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,6 @@
         <link rel="icon" type="image/png" href="favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-        <meta http-equiv="cache-control" content="no-cache" />
-        <meta http-equiv="expires" content="0" />
-        <meta http-equiv="pragma" content="no-cache" />
         <title>Vern Wolfley - WDD 230 - Web Frontend Development 1</title>
         <meta name="description" content="WDD 230 - Web Frontend Development course assignment portal for Vern Wolfley" />
         <meta name="author" content="Vern Wolfley" />
@@ -17,8 +14,8 @@
         <meta property="og:locale" content="en_US" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://vwolfley.github.io/wdd-230-a9/" />
-        <meta property="og:title" content="Vern Wolfley- WDD 230 - Web Frontend Development 1" />
-        <meta property="og:description" content="WWDD 230 - Web Frontend Development 1 course assignment portal for Vern Wolfley" />
+        <meta property="og:title" content="Vern Wolfley- WDD 230 - Web Frontend Development" />
+        <meta property="og:description" content="WWDD 230 - Web Frontend Development course assignment portal for Vern Wolfley" />
         <meta property="og:image" content="" />
         <meta property="og:image:type" content="image/png" />
 
@@ -49,30 +46,51 @@ <h1>Vern Wolfley</h1>
         </header>
 
         <main>
-            <h2 class="attribute">WDD 230: Web Frontend Development 1</h2>
-
-            <section class="card">
-                <h3>Learning Activities</h3>
-                <ul>
-                    <li></li>
-                </ul>
-            </section>
-            <section class="card">
-                <h3>Information</h3>
-                <div>Location</div>
-                <div>Weather</div>
-                <div>Page Visits: ?</div>
-            </section>
+            <h2 class="attribute">WDD 230: Web Frontend Development</h2>
+            <div class="card-grid">
+                <section class="card">
+                    <div class="card-header">
+                        <h3>Learning Activities</h3>
+                    </div>
+                    <div class="card-content">
+                        <ul class="la-card">
+                            <li><a href="#">Week 1</a></li>
+                            <li><a href="#">Week 2</a></li>
+                            <li><a href="#">Week 3</a></li>
+                            <li><a href="#">Week 4</a></li>
+                            <li><a href="#">Week 5</a></li>
+                            <li><a href="#">Week 6</a></li>
+                            <li><a href="#">Week 7</a></li>
+                            <li><a href="#">Week 8</a></li>
+                            <li><a href="#">Week 9</a></li>
+                            <li><a href="#">Week 10</a></li>
+                            <li><a href="#">Week 11</a></li>
+                            <li><a href="#">Week 12</a></li>
+                            <li><a href="#">Week 13</a></li>
+                            <li><a href="#">Week 14</a></li>
+                        </ul>
+                    </div>
+                </section>
+                <section class="card">
+                    <div class="card-header">
+                        <h3>Information</h3>
+                    </div>
+                    <div class="card-content">
+                        <div>Location</div>
+                        <div>Weather</div>
+                        <div>Page Visits: ?</div>
+                    </div>
+                </section>
+            </div>
         </main>
 
         <footer>
             <div class="copyright">
-                <p>wdd-230-a9 <span id="cYear"></span> | Vern Wolfley | Arizona</p>
+                <p>wdd-230-a9 <span id="cYear"></span> | Vern Wolfley | Arizona, USA</p>
                 <img id="azFlag" src="images/arizona-flag.png" alt="arizona arizona-flag" />
             </div>
 
             <p id="lastModified"></p>
-
             <div class="social">
                 <a href="https://www.linkedin.com/in/vern-wolfley-b8322813/" target="_blank">
                     <img src="images/linkedin-logo.png" alt="instagram icon" />
diff --git a/scripts/getdates.js b/scripts/getdates.js
index 7a20d9d..9b580cc 100644
--- a/scripts/getdates.js
+++ b/scripts/getdates.js
@@ -4,11 +4,14 @@ const options2 = { weekday: "short", year: "numeric", month: "short", day: "nume
 
 const date = new Date()
 
-const modDate = date.toLocaleDateString("en-US", options2);
-document.getElementById("lastModified").innerHTML = `Last Modified: ${modDate}`;
+// let modDate = date.toLocaleDateString("en-US", options2);
+// document.getElementById("lastModified").innerHTML = `Last Modified: ${modDate}`;
 
-const copyrightYear = date.getFullYear();
+let copyrightYear = date.getFullYear();
 document.getElementById("cYear").innerHTML = `&copy; ${copyrightYear}`;
 
+let lastModif = new Date(document.lastModified);
+document.getElementById("lastModified").innerHTML = `Last Modified: ${lastModif}`;
+
 // console.log(modDate);
 // console.log(copyrightYear);
\ No newline at end of file
diff --git a/styles/base.css b/styles/base.css
index 2415003..344d800 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -9,6 +9,7 @@
     --secondary-color: #0062b8;
     --accent1-color: #ffffff;
     --accent2-color: #666666;
+    --accent3-color: #c0c0c0;
 
     /* change the values below to your chosen font(s) */
     --heading-font: Paytone One, Georgia, serif;
@@ -45,13 +46,9 @@ h6 {
     font-family: var(--heading-font);
 }
 
-/* #content {
-    max-width: 1600px;
-    margin: 0 auto;
-} */
-
 nav {
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     background-color: var(--primary-color);
 }
@@ -71,10 +68,12 @@ nav a:hover {
 #headTitle {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     align-items: center;
-    margin: 0 0 0 50px;
+    /* margin: 0 0 0 50px; */
     padding: 5px;
     gap: 20px;
+    background-color: var(--accent3-color);
 }
 
 #profile-img {
@@ -86,7 +85,6 @@ h1 {
     font-family: var(--heading-font);
     font-size: 2em;
     color: var(--headline-color-on-white);
-    
 }
 
 main {
@@ -99,18 +97,21 @@ main {
 }
 
 .attribute {
-    font-size: 1em;
+    font-size: 1.75em;
     padding: 15px;
+    border-bottom: 1px solid var(--accent3-color);
 }
 
 footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
     background-color: var(--primary-color);
     color: #ffffff;
     padding: 25px 50px;
     margin-top: auto;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
 }
 
 footer a {
@@ -123,7 +124,8 @@ footer a:hover {
 }
 
 footer p {
-    font-size: 0.7em;
+    font-size: 0.65em;
+    margin: 5px;
 }
 
 footer p a:hover {
@@ -144,5 +146,47 @@ footer .social img {
 .copyright {
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: 10px;
 }
+
+/* Section Card Area */
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: auto;
+    grid-auto-rows: auto;
+    grid-gap: 2rem;
+    }
+
+/* Section Card */
+
+.card {
+    display: flex;
+    flex-direction: column;
+    border: solid 1px var(--accent3-color);
+    border-radius: 10px;
+}
+
+.card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--primary-color);
+    color: var(--accent1-color);
+    border-radius: 10px 10px 0 0;
+    justify-content: center;
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.la-card {
+    list-style-type: none;
+}
+
+.la-card li {
+    padding: 5px;
+}