diff --git a/groupwork/frontend/s09/activity/index.css b/groupwork/frontend/s09/activity/index.css
new file mode 100644
index 0000000..1887149
--- /dev/null
+++ b/groupwork/frontend/s09/activity/index.css
@@ -0,0 +1,109 @@
+/* Member 1 */
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: 'Roboto', sans-serif;
+}
+body {
+ height: auto;
+}
+/* JP - Member 2 Start*/
+h1, h2, h3, h4 {
+ font-family: "Titillium Web", sans-serif;
+}
+nav {
+ padding-top: 5px;
+ padding-left: 5px;
+ padding-bottom: 5px;
+ padding-right: 5px;
+ text-align: center;
+ background-color: blue;
+ color: white;
+}
+/* JP - Member 2 End*/
+/* Josua Member 3 Start */
+nav > ul > li{
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+ list-style: none;
+ display: inline-block;
+ padding-top:3px;
+ padding-bottom:3px;
+ padding-left:3px;
+}
+#container {
+ z-index: 99;
+}
+#landing {
+ background-image: url(https://images.unsplash.com/photo-1683009427660-b38dea9e8488?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ text-align: center;
+ min-height: 50vh;
+ color: rgb(255, 255, 255);
+ padding: 1rem;
+}
+.info {
+ padding: 10rem;
+}
+.landing-container {
+ top: 3.1rem;
+ left: 0;
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.5);
+ height: 50vh;
+ width: 100%;
+}
+#landing h1 {
+ font-size: 3rem;
+}
+#landing h3 {
+ font-size: 2rem;
+ margin: 1rem;
+}
+/*Josua - Member 3 End*/
+
+/* Ron - Member 4 Start*/
+#landing button {
+ cursor: pointer;
+ padding: 1rem 2rem;
+ background-color: blue;
+ border: 2px solid white;
+ border-radius: 50px;
+ transition: 0.5s;
+ color: white;
+ font-size: 1.125rem;
+}
+#landing button:hover {
+ background-color: white;
+ color: blue;
+}
+.landing h1 {
+ margin-top: 5rem;
+}
+/* Ron - Member 4 End*/
+
+/* Ron - Member 5 Start*/
+#hot {
+ text-align: center;
+}
+#hot h2 {
+ margin: 5rem 0;
+}
+#hot li {
+ display: inline-block;
+ list-style: none;
+ border: 3px solid blue;
+ border-radius: 10px;
+ padding: 3rem;
+ margin: auto .5rem;
+}
+/* Ron - Member 5 End*/
+footer {
+ text-align: center;
+ margin-top: 10rem;
+}
\ No newline at end of file
diff --git a/groupwork/frontend/s09/activity/index.html b/groupwork/frontend/s09/activity/index.html
new file mode 100644
index 0000000..68e6886
--- /dev/null
+++ b/groupwork/frontend/s09/activity/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Activity CSS Styling Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Welcome to our E-Commerce Website!
+ Affordable Products for Everyone, Everywhere!
+
+
+
+
+
+
+
+
+ Our Hottest Categories!
+
+ -
+
Retro Consoles
+
+ -
+
Current Consoles
+
+ -
+
Video Games
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/groupwork/frontend/s10/discussion/index.css b/groupwork/frontend/s10/discussion/index.css
new file mode 100644
index 0000000..84ab3e5
--- /dev/null
+++ b/groupwork/frontend/s10/discussion/index.css
@@ -0,0 +1,5 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/groupwork/frontend/s10/discussion/index.html b/groupwork/frontend/s10/discussion/index.html
new file mode 100644
index 0000000..064e54c
--- /dev/null
+++ b/groupwork/frontend/s10/discussion/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
\ No newline at end of file
diff --git a/individual/frontend/s09/discussion/index.css b/individual/frontend/s09/discussion/index.css
index e69de29..0a2867b 100644
--- a/individual/frontend/s09/discussion/index.css
+++ b/individual/frontend/s09/discussion/index.css
@@ -0,0 +1,128 @@
+/* CSS Rest Rule */
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+#div-3 {
+ background-color: skyblue;
+ border: 2px solid black;
+ height: 200px;
+ width: 200px;
+}
+
+#div-4 {
+ background-color: aquamarine;
+ border: 2px solid black;
+ height: 200px;
+ width: 200px;
+}
+
+#span-3 {
+ background-color: gray;
+ border: 2px solid black;
+ display: block;
+}
+
+#span-4 {
+ background-color: brown;
+ border: 2px solid black;
+}
+
+#span-5 {
+ background: yellow;
+ border: 3px solid black;
+ display: inline-block;
+ height: 300px;
+ width: 300px;
+}
+#span-6 {
+ background: orange;
+ border: 3px solid black;
+ display: inline-block;
+ height: 300px;
+ width: 300px
+}
+
+#div-5 {
+ background-color: pink;
+ border: 2px solid black;
+ display: inline-block;
+ height: 300px;
+ width: 300px
+}
+#div-6 {
+ background-color: violet;
+ border: 2px solid black;
+ display: inline-block;
+ height: 300px;
+ width: 300px
+}
+#div-8 {
+ background-color: lightcyan;
+ border: 2px solid black;
+ /* display: none; */
+}
+#span-7 {
+ background-color: lightgreen;
+ border: 2px solid black;
+ /* display: none; */
+}
+.box {
+ background-color: red;
+ border: 1px solid black;
+ margin: 5px;
+}
+.fifty-percent {
+ width: 50%;
+}
+.one-hundred-pixels {
+ width: 100px;
+}
+.parent {
+ width: 135px;
+ border: 2px solid navy;
+}
+.fifty-vw {
+ width: 50vw;
+}
+.twenty-five-vh {
+ height: 25vh;
+}
+.one-rem {
+ font-size: 1rem;
+}
+.one-em {
+ font-size: 1em;
+}
+.two-rem {
+ font-size: 2rem;
+}
+.two-em {
+ font-size: 2em;
+}
+
+/* CSS Background Properties */
+.background {
+ min-height: 50rem;
+ /* content: url(https://c4.wallpaperflare.com/wallpaper/43/1003/707/anime-your-name-kimi-no-na-wa-mitsuha-miyamizu-wallpaper-preview.jpg); */
+ background-image: url(https://c4.wallpaperflare.com/wallpaper/43/1003/707/anime-your-name-kimi-no-na-wa-mitsuha-miyamizu-wallpaper-preview.jpg);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-position: 10% 40%;
+ background-attachment: scroll /*and fixed*/;
+}
+
+.bg-title {
+ color: white;
+ text-align: center;
+ font-size: 5em;
+ margin: 0;
+ line-height: 35rem;
+}
+
+.container-bg {
+ background-color: rgba(0, 0, 0, .5);
+ min-height: 100vh;
+}
\ No newline at end of file
diff --git a/individual/frontend/s09/discussion/index.html b/individual/frontend/s09/discussion/index.html
index 064e54c..086b1de 100644
--- a/individual/frontend/s09/discussion/index.html
+++ b/individual/frontend/s09/discussion/index.html
@@ -4,9 +4,57 @@
- Document
+ CSS Common Styling
+
-
+ CSS Common Styling
+ Display
+
+ Display: Inline vs Block
+ A dive can be displaed as inline
+ A dive can be displaed as inline
+ A span can be displaed as block
+ A span can be displaed as block
+
+ Display: Inline-Block
+ Span-Inline-Block-1
+ Span-Inline-Block-2
+ Div-Inline-Block-1
+ Div-Inline-Block-2
+
+ Display: None
+ Divs are block by default.
+ Divs are block by default. Adding display:none; property in css ruleset hides an element
+ This is the fifth span.
+
+
+ CSS Unis
+
+ px vs %
+ 50%
+ 100px
+ 50vw
+ 25vh
+ 16px
+ 1rem
+ 1em
+ 2rem
+ 2em
+ 200%
+
+
+
+
+
CSS Background Properties
+
+
+
+
+
+
+