week 6

css/style.css

@@ -329,6 +329,16 @@ details {
 	background: radial-gradient(at left top, #F309CC, #9ACB55);
 }
 
+#sessions details:nth-of-type(15n + 6) summary h4 {
+	border-radius: 70% 10% 10% 10% / 69% 10% 10% 10%;
+/*
+* Created with https://www.css-gradient.com
+* Gradient link: https://www.css-gradient.com/?c1=4994bc&c2=02504b&gt=r&gd=dtl
+*/
+background: #4994BC;
+background: radial-gradient(at left top, #4994BC, #02504B);
+}
+
 
 /* #sessions details summary h4:hover {
 	border-radius: 50%;

index.html

@@ -200,6 +200,13 @@ <h4 class="effect">Week 5</h4>
 
 						<div id="week5"></div>
 					</details>
+					<details>
+						<summary>
+							<h4 class="effect">Week 6</h4>
+						</summary>
+
+						<div id="week6"></div>
+					</details>
 				</div>
 		</section>
 

js/content.js

@@ -18,6 +18,7 @@ fetchAndInsertContent("week2", "../../weeks/2.html");
 fetchAndInsertContent("week3", "../../weeks/3.html");
 fetchAndInsertContent("week4", "../../weeks/4.html");
 fetchAndInsertContent("week5", "../../weeks/5.html");
+fetchAndInsertContent("week6", "../../weeks/6.html");
 // fetchAndInsertContent("accessible-book", "../../assignments/accessible-book.html");
 // fetchAndInsertContent("experimental-clock", "../../assignments/experimental-clock.html");
 // fetchAndInsertContent("generative-tool", "../../assignments/generative-tool.html");

weeks/6.html

@@ -0,0 +1,93 @@
+<article class="space--after-quadruple">
+    <div class="space--after-quadruple">
+        <h4>Description</h4>
+        <p>This is the presentation week of our first project! Following this,
+            we will venture into how to have more two dimensional control over
+            our layouts with CSS grid. Concluding our CSS lectures, we will
+            explore both different schools of philosophies and design system
+            thinking. Then, we will shift our focus towards understanding inputs
+            and ouputs, transitioning from the familiar world of hovering to the
+            unfamiliar world of HTML input elements.</p>
+        </p>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Lecture</h4>
+        <p><a
+                href="https://www.figma.com/proto/h26kYXjCdnWUifsdNH6f2b/Week-6?page-id=0%3A1&type=design&node-id=2003-1223&viewport=5340%2C1009%2C0.3&t=9mKndnOa4ErH6Nst-1&scaling=contain">CSS
+                Grid</a>
+        </p>
+        <p><a
+                href="https://www.figma.com/proto/h26kYXjCdnWUifsdNH6f2b/Week-6?page-id=0%3A1&type=design&node-id=2002-998&viewport=5340%2C1009%2C0.3&t=9mKndnOa4ErH6Nst-1&scaling=contain">CSS
+                as Design System</a>
+        </p>
+        <p><a
+                href="https://www.figma.com/proto/h26kYXjCdnWUifsdNH6f2b/Week-6?page-id=0%3A1&type=design&node-id=2003-4273&viewport=5340%2C1009%2C0.3&t=9mKndnOa4ErH6Nst-1&scaling=contain">Inputs
+                & Outputs</a>
+        </p>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Assignments</h4>
+
+        <ul>
+            <li class="space--after-double">
+                <h5>Class Website: CSS, Hover and Responsive</h5>
+                <p class="space--after-single">Take everything you’ve learned in
+                    HTML and CSS and update your class website! </p>
+                <p class="space--after-single">Considering the fact that
+                    your class website serves as an portal to all
+                    of your projects. Think about how to style the active,
+                    hover, focus, visited (or at least hover) state with
+                    transition to create interesting interaction.</p>
+                <p class="space--after-single">Make it responsive so it looks
+                    good when you view it on mobile. This class site is your own
+                    personal coding playground throughout the semester. </p>
+            </li>
+        </ul>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Readings</h4>
+
+        <ul>
+            <li>
+                <p><a href="https://resilientwebdesign.com/chapter4/">Resilinet
+                        Web Design: Language</a></p>
+            </li>
+        </ul>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Resources</h4>
+
+        <div class="space--after-quadruple">
+            <ul class="space--after-single">
+                <li>
+                    <p><a
+                            href="https://cssgridgarden.com/">CSS Grid Garden</a></p>
+                </li>
+                <li>
+                    <p><a
+                            href="https://flukeout.github.io/">CSS Diner</a></p>
+                </li>
+                <li>
+                    <p><a
+                            href="https://www.joshwcomeau.com/animation/css-transitions/">Interactive Guide to Transitions</a></p>
+                </li>
+                <li>
+                    <p><a href="https://toolness.github.io/css-selector-game/">Selection game</a></p>
+                </li>
+                <li>
+                    <p><a
+                            href="https://web.dev/learn/css/pseudo-classes">Pseudo-classes, web.dev</a></p>
+                </li>
+                <li>
+                    <p><a
+                            href="https://www.regisphilibert.com/note/utility-class-css-components-reconciled/">Utility vs Component based CSS Styling</a></p>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+</article>