From 334ca750aaa7e1dba0151d33b6425825cb87bad1 Mon Sep 17 00:00:00 2001 From: snaked2018 Date: Fri, 15 Sep 2023 21:48:37 +0800 Subject: [PATCH] S10 Discussion --- groupwork/frontend/s10/activity/index-ron.css | 137 +++++++++++++++++ groupwork/frontend/s10/activity/index.css | 143 ++++++++++++++++++ groupwork/frontend/s10/activity/index.html | 72 +++++++++ groupwork/frontend/s10/discussion/index.css | 5 - groupwork/frontend/s10/discussion/index.html | 12 -- individual/frontend/s10/discussion/index.css | 25 ++- individual/frontend/s10/discussion/index.html | 33 +++- 7 files changed, 406 insertions(+), 21 deletions(-) create mode 100644 groupwork/frontend/s10/activity/index-ron.css create mode 100644 groupwork/frontend/s10/activity/index.css create mode 100644 groupwork/frontend/s10/activity/index.html delete mode 100644 groupwork/frontend/s10/discussion/index.css delete mode 100644 groupwork/frontend/s10/discussion/index.html diff --git a/groupwork/frontend/s10/activity/index-ron.css b/groupwork/frontend/s10/activity/index-ron.css new file mode 100644 index 0000000..819e9bf --- /dev/null +++ b/groupwork/frontend/s10/activity/index-ron.css @@ -0,0 +1,137 @@ +/* + Member 1: Josua +Member 2: Chris +Member 3: Ron +Member 4: JP +Member 5: Ron +*/ + +/* Member 1 & 2 */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; + height: auto; +} +button { + color: white; + padding: 15px; + width: 9rem; + font-size: 15px; + font-weight: 700; + border: none; + border-radius: 25px; +} +nav { + padding: 5px; + position: sticky; + top: 0; + z-index: 1; + background-color: #fff; +} +.right-nav { + float: right; +} +nav li { + list-style: none; + text-decoration: none; + display: inline-block; +} +.nav, .nav-logo { + margin: 8px; + padding: 3px; +} + +/* Ron - Member 3 */ +#logo { +padding: 8px 5px 0 0; +} +#nav-button { + background-color: #c2195b; +} +#bg-image { + background-image: url(https://d3ojsfl21hfxhc.cloudfront.net/assets/zuitt/programdetails2_w.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: white; + height: 50vh; +} +.container { + background-color: rgba(0, 0, 0, 0.5); + height: 50vh; + float: right; + position: relative; + text-align: right; + padding-right: 5rem; + padding-top: 5rem; +} +.title, .subtitle { + width: 50%; + float: right; + display: inline-block; +} +#apply-button { + width: 8%; + float: right; + display: block; + position: absolute; + bottom: 20%; + right: 4.3%; +} + + + +/* .container { + background-color: rgba(0, 0, 0, 0.5); + text-align: right; + width: 100%; + position: relative; + height: 30vh; +} */ +.title { + font: 'Zilla Slab', sans-serif; + font-size: 3.5rem; + font-weight: 700; +} +.subtitle { + font-size: 1.3rem; + font-weight: 300; + margin-left: 9rem; +} +#apply-button { + margin-top: 2rem; + background-color: #c2195b; +} + + +/* Ron - Member 5 */ +#main { + text-align: center; +} +.title-2 { + font-family: 'Zilla Slab', serif; + font-size: 3rem; + font-weight: 500; + margin: 3rem auto; +} +#description, #book-description { + margin: 3rem auto; + font-weight: 500; + width: 50%; +} +#book-button { + background-color: #336589; + margin-top: 2rem; +} +footer { + margin-top: 10rem; + margin-bottom: 1rem; + padding: 0; + text-align: center; +} +footer span { + margin: auto 5rem; + font-weight: 500; +} diff --git a/groupwork/frontend/s10/activity/index.css b/groupwork/frontend/s10/activity/index.css new file mode 100644 index 0000000..5f95358 --- /dev/null +++ b/groupwork/frontend/s10/activity/index.css @@ -0,0 +1,143 @@ +/* + Member 1: Josua +Member 2: Chris +Member 3: Ron +Member 4: JP +Member 5: Ron +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} + +/*member 1 josua*/ +/*button styling*/ + button{ + color: white; + padding: 10px; + width:9em; + font-size: 1rem; + font-weight: 600; + border-color: transparent; + border-radius: 25px; + +} +/*end member 1 */ + +/*member 2 */ + +nav { + padding: 10px; + position: sticky; + top: 0; + z-index: 1; + background-color: white; +} + +.right-nav { + float: right; +} + +nav li { + display: inline-block; + list-style: none; + text-decoration: none; +} + +.nav, .nav-logo { + margin: 8px; + padding: 3px; +} + +/*end member 2 */ + +/* Ron - Member 3 */ +#logo { +padding: 8px 5px 0 0; +} +#nav-button { + background-color: #c2195b; +} +.bg-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); + height: 50vh; + z-index: 2; +} +#bg-image { + background-image: url(https://d3ojsfl21hfxhc.cloudfront.net/assets/zuitt/programdetails2_w.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: white; + height: 50vh; + z-index: 1; +} +/*Member 4 - JP Start*/ +.container { + padding-top: 4rem; + text-align: right; + width: 40%; + height: 50%; + position: relative; + left: 55%; + z-index: 3; +} + +.title { + font-family: Zilla Slab; + font-size: 3.5rem; + font-weight: 600; +} + +.subtitle { + font-size: 1.3rem; + font-weight: 300; + width: 75%; + margin-left: 9rem; + margin-top: 15px; + display: inline-block; + float: right; +} + +#apply-button { + margin-top: 50px; + background-color: #c2195b; +} + +/*Member 4 - JP End*/ + + +/* Ron - Member 5 */ +#main { + padding: 1rem; + text-align: center; +} +.title-2 { + font-family: 'Zilla Slab', serif; + font-size: 3rem; + font-weight: 500; + margin: 3rem auto; +} +#description, #book-description { + margin: 3rem auto; + font-weight: 500; + width: 50%; +} +#book-button { + background-color: #336589; + margin-top: 2rem; +} +footer { + margin-top: 10rem; + margin-bottom: 1rem; + padding: 0; + text-align: center; +} +footer span { + margin: auto 5rem; + font-weight: 500; +} + diff --git a/groupwork/frontend/s10/activity/index.html b/groupwork/frontend/s10/activity/index.html new file mode 100644 index 0000000..3210c0e --- /dev/null +++ b/groupwork/frontend/s10/activity/index.html @@ -0,0 +1,72 @@ + + + + + + + + + + Document + + + + + + + +
+
+
+

Our Training Options That Fit Your Coding Needs

+

+ Offering a workable and carefully curated curriculum to cater to a variety of students and equip them the necessary web development skills they need to become a coding literate. +

+ +
+
+
+ + +
+

What is a Developer Career Program?

+

+ The Developer Career Program is inclusive of in-depth modules on static and dynamic web applications, with emphasis on the development of well-designed integrated software. The course covers key concepts on full-stack web development, including Responsive Web Design, Rapid Prototyping and Product Deployments. +

+

STILL HAVE A QUESTION?

+

+ Our career advisors are here to answer any questions you may have. Meet with them by booking one of our free seminars, and learn all the finer details of our web development course. +

+ +
+ + + + + + + + \ No newline at end of file diff --git a/groupwork/frontend/s10/discussion/index.css b/groupwork/frontend/s10/discussion/index.css deleted file mode 100644 index 84ab3e5..0000000 --- a/groupwork/frontend/s10/discussion/index.css +++ /dev/null @@ -1,5 +0,0 @@ -* { - 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 deleted file mode 100644 index 064e54c..0000000 --- a/groupwork/frontend/s10/discussion/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - - - \ No newline at end of file diff --git a/individual/frontend/s10/discussion/index.css b/individual/frontend/s10/discussion/index.css index 84ab3e5..c8d02dd 100644 --- a/individual/frontend/s10/discussion/index.css +++ b/individual/frontend/s10/discussion/index.css @@ -2,4 +2,27 @@ padding: 0; margin: 0; box-sizing: border-box; -} \ No newline at end of file +} +.img-float { + width: 300px; + height: 300px; + float: inherit; + margin: 2rem; +} +.parent-element { + background-color: skyblue; + padding: 10px; +} +.child-one { + background-color: gray; + padding: 10px; +} +.child-two { + background-color: yellow; + padding: 10px; +} +.child-three { + background-color: gray; + padding: 10px; +} + diff --git a/individual/frontend/s10/discussion/index.html b/individual/frontend/s10/discussion/index.html index 064e54c..3fa78ef 100644 --- a/individual/frontend/s10/discussion/index.html +++ b/individual/frontend/s10/discussion/index.html @@ -4,9 +4,36 @@ - Document + CSS Common Positioning Properties - - + +

+ The Float property is used for positioning and formatting content. e g. + Let an image float left to the text in a container. +

+

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla earum autem exercitationem natus minima repellendus corporis officia aliquid! Quaerat dolores aspernatur maiores? Molestias, adipisci soluta! Incidunt exercitationem quidem dolorem culpa? + Quas, repudiandae? Explicabo deleniti dicta, eveniet ducimus sunt voluptatem ut obcaecati. Repellendus, ipsum cupiditate ea alias magni quia enim nihil quam cum voluptatem sapiente tempora, nam, dolores soluta aspernatur. Sequi. + Distinctio incidunt nemo ipsa in. Quae repellat ut hic sit maiores. Repellat ad tempore beatae soluta ullam in provident odit esse magnam, quibusdam quasi temporibus repudiandae sunt a aliquam modi! + Excepturi quos enim iure quidem consequuntur, at delectus unde in, inventore est perspiciatis numquam dignissimos deserunt aperiam fugiat ducimus perferendis nostrum recusandae architecto et commodi sed? Ratione cum enim provident. + Laboriosam alias assumenda qui, atque aspernatur ut omnis debitis itaque tempora! Ullam consequatur perferendis ab provident deleniti officia, aliquid reiciendis nobis dolorum repudiandae vitae, debitis blanditiis asperiores! Possimus, voluptatem nam. +

+ + +

CSS Positioning

+
Parent Element +
+ I'm the child element. +
+
+ All eyes on me. I am the child two element. +
+
+ I'm the child three element. +
+
+ + \ No newline at end of file