From 8319e7c0ec0f8d00fd6ace9e79dcec9b3cc792c3 Mon Sep 17 00:00:00 2001 From: Munus Shih Date: Fri, 1 Mar 2024 02:30:06 -0500 Subject: [PATCH] week 6 --- css/style.css | 10 ++++++ index.html | 7 ++++ js/content.js | 1 + weeks/6.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 weeks/6.html diff --git a/css/style.css b/css/style.css index ad4a6bd..b8ab543 100644 --- a/css/style.css +++ b/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>=r&gd=dtl +*/ +background: #4994BC; +background: radial-gradient(at left top, #4994BC, #02504B); +} + /* #sessions details summary h4:hover { border-radius: 50%; diff --git a/index.html b/index.html index 3b8d1e8..7166275 100644 --- a/index.html +++ b/index.html @@ -200,6 +200,13 @@

Week 5

+
+ +

Week 6

+ + +
+
diff --git a/js/content.js b/js/content.js index db9d929..f02d259 100644 --- a/js/content.js +++ b/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"); \ No newline at end of file diff --git a/weeks/6.html b/weeks/6.html new file mode 100644 index 0000000..fca39ff --- /dev/null +++ b/weeks/6.html @@ -0,0 +1,93 @@ +
+
+

Description

+

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.

+

+
+ +
+

Lecture

+

CSS + Grid +

+

CSS + as Design System +

+

Inputs + & Outputs +

+
+ +
+

Assignments

+ +
    +
  • +
    Class Website: CSS, Hover and Responsive
    +

    Take everything you’ve learned in + HTML and CSS and update your class website!

    +

    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.

    +

    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.

    +
    • +
+
+ +
+

Readings

+ + +
+ +
+

Resources

+ +
+ +
+
+
\ No newline at end of file