-
-
-
-
-
-
\ No newline at end of file
diff --git a/groupwork/frontend/s06/activity/mini-activity.txt b/groupwork/frontend/s06/activity/mini-activity.txt
index e69de29..0a566d7 100644
--- a/groupwork/frontend/s06/activity/mini-activity.txt
+++ b/groupwork/frontend/s06/activity/mini-activity.txt
@@ -0,0 +1,303 @@
+------------------------------> 1. Use effective search terms: <---------------------------------------------------
+1. How to create a self auto-scrolling image in applications that displays multiple pictures in website?
+ - How to do scrollable Image Gallery in HTML AND CSS?
+ - How to create slideshow using HTML & CSS?
+ - Automatic image slider in html and css
+ - HTML AND CSS Image Carousel Scripts
+ 2. How to create of self auto-scrolling in HTML Structure?
+ 3. How to create of self auto-scrolling in CSS Styles?
+ 4. How to create of self auto-scrolling in JavaScript?
+ 5.
+
+------------------------------> 2. Read official documentation or look for reliable sources of information <---------------------------------------------------
+ for reference - https://www.geeksforgeeks.org/programming-a-slideshow-with-html-and-css/
+
+ - https://www.w3schools.com/howto/howto_css_image_gallery_scroll.asp
+ - https://stackoverflow.com/questions/15485694/auto-scrolling-with-css
+ - https://www.youtube.com/watch?v=MaRmAmFI3Sc&ab_channel=WinterwindInc.
+
+ HTML
+
+
+
+
+ HTML and CSS Slideshow
+
+
+
+
+
+
+
+
+
+
+
+
+ GeeksforGeeks
+
+
+
+
+ A computer science portal
+
+
+
+
+ This is an example of
+
+
+
+
+ Slideshow with HTML and CSS only
+
+
+
+
+
+
+
+
+
+
+------------------------------> 3. Scanning and Reading <---------------------------------------------------
+
+Building a Bootstrap carousel is a great way to display a rotating set of images or content on your website.
+Bootstrap provides a simple and flexible framework for building carousels.
+
+Here's a step-by-step approach to building a Bootstrap carousel:
+
+1. Include Bootstrap:
+First, make sure you include Bootstrap in your HTML document. You can either download Bootstrap and include it locally or use a content delivery network (CDN).
+
+Here's an example using the CDN:
+
+
+
+
+
+
+2. Structure your HTML:
+Create the basic HTML structure for your carousel. You'll need an outer container and a set of slide elements.
+
+Here's an example:
+
+
+
+
+3. Customize as needed:
+- Replace the src attributes in the tags with the paths to your images.
+- Modify the content and styles inside the
to match your design.
+
+4. Add CSS and Js (Optional)
+- If you want to apply custom styles to your carousel, you can add your own CSS rules to override Bootstrap's default styles.
+- Bootstrap's carousel should work without any additional JavaScript. However, if you want to add custom functionality, such as controlling the carousel programmatically, you can write JavaScript code accordingly.
+
+5. Test and Preview:
+Save your HTML file and open it in a web browser to preview your Bootstrap carousel. Make sure it's functioning as expected and looks good.
+
+That's it! You've created a Bootstrap carousel. You can further customize it by exploring Bootstrap's documentation and adding additional features like autoplay, interval timing, and more.
+
+
+
+------------------------------> 4. Test your understanding <---------------------------------------------------
+
+
+
+
+
+
+
+
+
+
+
+
+
+.image-gallery {
+ width: 300px; /* Adjust the width as needed */
+ height: 200px; /* Adjust the height as needed */
+ overflow: hidden;
+}
+
+.image-gallery ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex; /* Display images in a horizontal row */
+ animation: scrollImages 10s linear infinite; /* Adjust the animation duration */
+}
+
+.image-gallery li {
+ margin-right: 10px; /* Adjust spacing between images */
+}
+
+.image-gallery img {
+ max-width: 100%;
+ height: auto;
+}
+
+@keyframes scrollImages {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100%); /* Move the images to the left */
+ }
+}
+
+
+
+
+
+ HTML and CSS Slideshow
+
+
+
+
+
+
+
+ Back to Top
+
+
+
\ No newline at end of file
diff --git a/individual/frontend/s08/discussion/index.css b/individual/frontend/s08/discussion/index.css
index e69de29..7c13ddf 100644
--- a/individual/frontend/s08/discussion/index.css
+++ b/individual/frontend/s08/discussion/index.css
@@ -0,0 +1,49 @@
+/* CSS Reset Rule */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+/* Google Font for Body */
+body {
+ font-family: 'Open Sans', sans-serif;
+
+}
+/* Var Setup */
+:root {
+ --fw-400: 400;
+}
+
+nav {
+ /* applied padding to all sides */
+ /* Creates space from between ul tag and the nav elemeent */
+ padding: 0.8rem; /* << shorthand */
+ /* Properties that make up "padding" property */
+ /* Padding: 0.8rem; */
+ margin: 0 0 2rem 0;
+ border-bottom: 1px solid gray;
+ list-style: none;
+}
+
+
+nav .nav,
+nav .nav-logo {
+ margin: 0.5rem;
+ display: inline;
+}
+
+#intro {
+ padding: 2rem 10% 3rem 10%;
+ text-align: center;
+ border: 1px solid black;
+ margin: 1%;
+}
+.header {
+ margin: 20px auto;
+ text-align: center;
+}
+
+#intro h2,
+#intro p {
+ margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/individual/frontend/s08/discussion/index.html b/individual/frontend/s08/discussion/index.html
index e69de29..baa196d 100644
--- a/individual/frontend/s08/discussion/index.html
+++ b/individual/frontend/s08/discussion/index.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+ CSS Box Model and Flexbox Layouting
+
+
+
+
+
+
+
+
+
+
+
What is Zuitt?
+
Zuitt is the #1 Philippine-based startup offering web development coding bootcamps in Manila. Thanks to our rapid growth, we can now help over 1,000 Filipinos learn web development with our every year. We also equip them with the job hunting skills needed to get hired as Software Engineers.Our secret to success is our belief that Filipinos can do much more with affordable and quality education. If you invest in your education, you can be in the best position to achieve the life you’ve always wanted for yourself and your family.
+
+
+
+
+
+
+
Succeed With Zuitt
+
+
+
Beginner Friendly
+
Experienced instructors will guide you from the ultimate beginner’s lesson to your final dynamic website, via a live online instruction with passionate peers and one-on-one Q&A.
+
+
+
Study Now, Pay Later
+
We’re confident in your ability to get your dream career after the training. You don’t have to pay for the program while you’re still learning.
+
+
+
Just 4/6 Months
+
Join our 4 Month Day Class for completely immersed and dedicated learning, or our 6 Month Night Class so you can learn even while working.
+ 
+ 
+