From c84a7bc94d03e207dd774932d8f4f2d2cd424ef0 Mon Sep 17 00:00:00 2001 From: snaked2018 Date: Fri, 15 Sep 2023 16:58:59 +0800 Subject: [PATCH] S10 Discussion. --- groupwork/frontend/s09/activity/index.css | 109 +++++++++++++++ groupwork/frontend/s09/activity/index.html | 65 +++++++++ groupwork/frontend/s10/discussion/index.css | 5 + groupwork/frontend/s10/discussion/index.html | 12 ++ individual/frontend/s09/discussion/index.css | 128 ++++++++++++++++++ individual/frontend/s09/discussion/index.html | 52 ++++++- individual/frontend/s10/discussion/index.css | 5 + individual/frontend/s10/discussion/index.html | 12 ++ 8 files changed, 386 insertions(+), 2 deletions(-) create mode 100644 groupwork/frontend/s09/activity/index.css create mode 100644 groupwork/frontend/s09/activity/index.html create mode 100644 groupwork/frontend/s10/discussion/index.css create mode 100644 groupwork/frontend/s10/discussion/index.html create mode 100644 individual/frontend/s10/discussion/index.css create mode 100644 individual/frontend/s10/discussion/index.html 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!

+ + +
+ + + + + + + + \ 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

+
+
+ + + + + \ No newline at end of file diff --git a/individual/frontend/s10/discussion/index.css b/individual/frontend/s10/discussion/index.css new file mode 100644 index 0000000..84ab3e5 --- /dev/null +++ b/individual/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/individual/frontend/s10/discussion/index.html b/individual/frontend/s10/discussion/index.html new file mode 100644 index 0000000..064e54c --- /dev/null +++ b/individual/frontend/s10/discussion/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file