s08 discussion
parent
2883791548
commit
38a4ed8e57
@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="team-5">
|
||||
<div>
|
||||
<h1>Group 5:</h1>
|
||||
<ol>
|
||||
<li>chrisnova20 - Christopher Nova</li>
|
||||
<li>JP - James Philip De Leon</li>
|
||||
<li>Josua Castañare - Josua Castañares</li>
|
||||
<li>Ron - Ron Reciproco</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -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
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML and CSS Slideshow</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: 5%;
|
||||
text-align: center;
|
||||
font-size: 50;
|
||||
}
|
||||
|
||||
/* Styling the area of the slides */
|
||||
|
||||
#slideshow {
|
||||
overflow: hidden;
|
||||
height: 510px;
|
||||
width: 728px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Style each of the sides
|
||||
with a fixed width and height */
|
||||
|
||||
.slide {
|
||||
float: left;
|
||||
height: 510px;
|
||||
width: 728px;
|
||||
}
|
||||
|
||||
/* Add animation to the slides */
|
||||
|
||||
.slide-wrapper {
|
||||
|
||||
/* Calculate the total width on the
|
||||
basis of number of slides */
|
||||
width: calc(728px * 4);
|
||||
|
||||
/* Specify the animation with the
|
||||
duration and speed */
|
||||
animation: slide 10s ease infinite;
|
||||
}
|
||||
|
||||
/* Set the background color
|
||||
of each of the slides */
|
||||
|
||||
.slide:nth-child(1) {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.slide:nth-child(2) {
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.slide:nth-child(3) {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.slide:nth-child(4) {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
/* Define the animation
|
||||
for the slideshow */
|
||||
|
||||
@keyframes slide {
|
||||
|
||||
/* Calculate the margin-left for
|
||||
each of the slides */
|
||||
20% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
40% {
|
||||
margin-left: calc(-728px * 1);
|
||||
}
|
||||
60% {
|
||||
margin-left: calc(-728px * 2);
|
||||
}
|
||||
80% {
|
||||
margin-left: calc(-728px * 3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Define the slideshow container -->
|
||||
<div id="slideshow">
|
||||
<div class="slide-wrapper">
|
||||
|
||||
<!-- Define each of the slides
|
||||
and write the content -->
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
GeeksforGeeks
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
A computer science portal
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
This is an example of
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
Slideshow with HTML and CSS only
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
------------------------------> 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:
|
||||
|
||||
<!-- Add these links in the <head> of your HTML file -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
|
||||
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:
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
|
||||
<!-- Slides -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="image1.jpg" alt="Image 1">
|
||||
<div class="carousel-caption">
|
||||
<h3>Slide 1</h3>
|
||||
<p>Description for Slide 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="image2.jpg" alt="Image 2">
|
||||
<div class="carousel-caption">
|
||||
<h3>Slide 2</h3>
|
||||
<p>Description for Slide 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add more slides as needed -->
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
3. Customize as needed:
|
||||
- Replace the src attributes in the <img> tags with the paths to your images.
|
||||
- Modify the content and styles inside the <div class="carousel-caption"> 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 <---------------------------------------------------
|
||||
|
||||
<!-- HTML code -->
|
||||
<div class="image-gallery">
|
||||
<ul>
|
||||
<li><img src="image1.jpg" alt="Image 1"></li>
|
||||
<li><img src="image2.jpg" alt="Image 2"></li>
|
||||
<li><img src="image3.jpg" alt="Image 3"></li>
|
||||
<!-- Add more images as needed -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CSS code -->
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<!-- Another HTML Code -->
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML and CSS Slideshow</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Define the slideshow container -->
|
||||
<div id="slideshow">
|
||||
<div class="slide-wrapper">
|
||||
|
||||
<!-- Define each of the slides
|
||||
and write the content -->
|
||||
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
GeeksforGeeks
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
A computer science portal
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
This is an example of
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
Slideshow with HTML and CSS only
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
/*Task: Ron START*/
|
||||
* {
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.external {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
/*Type selector*/
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/*ID selector*/
|
||||
#sub-header{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*Class selector*/
|
||||
.text-green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
/*Task: JP START*/
|
||||
li[class*="border-blue"] {
|
||||
border: solid;
|
||||
border-color: blue;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
img + ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
section img {
|
||||
height: 20vh;
|
||||
width: 20vh;
|
||||
border-radius: 100px;
|
||||
}
|
||||
/*Task: JP END*/
|
||||
|
||||
/*Task: JOSHUA START*/
|
||||
ul + p{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
ul li{
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
/*Task: JOSHUA END*/
|
||||
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Activity: CSS Introduction</title>
|
||||
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<style>
|
||||
#internal {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Task: Ron START-->
|
||||
<!-- Different ways to include CSS -->
|
||||
<p style="color: red;">Apply inline styling here.</p>
|
||||
<p id="internal">Apply internal styling here.</p>
|
||||
<p class="external">Apply external styling here.</p>
|
||||
<!-- Task: Ron END-->
|
||||
|
||||
<!-- Task: Chris START-->
|
||||
<!-- CSS Selectors -->
|
||||
<h1>CSS Introduction Activity</h1>
|
||||
|
||||
<h2 id="sub-header">The following are things you will learn in this bootcamp:</h2>
|
||||
|
||||
<h3>Languages to be Learned</h3>
|
||||
<ol>
|
||||
<li class="text-green">Hypertext Markup Language</li>
|
||||
<li class="text-green">Cascading Style Sheet</li>
|
||||
<li class="text-green">JavaScript</li>
|
||||
</ol>
|
||||
<!-- Task: Chris END-->
|
||||
|
||||
<!-- Task: JP START-->
|
||||
<h3>Tools to be Used</h3>
|
||||
<ol>
|
||||
<li class="border-blue">Sublime Text</li>
|
||||
<li class="border-blue">Postman</li>
|
||||
<li class="border-blue">Heroku</li>
|
||||
<li class="border-blue">GitLab</li>
|
||||
</ol>
|
||||
|
||||
<!-- Combinator Selectors -->
|
||||
<section>
|
||||
<h4>Other Things to be Learned</h4>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/480px-Unofficial_JavaScript_logo_2.svg.png">
|
||||
<ul>
|
||||
<li>Node.js</li>
|
||||
<li>Express.js</li>
|
||||
<li>React.js</li>
|
||||
<li>MongoDB</li>
|
||||
</ul>
|
||||
<!-- Task: JP END-->
|
||||
|
||||
<!-- Task: Joshua START-->
|
||||
<p>Web development is a continuous process. Never stop learning and always look for ways to innovate.</p>
|
||||
</section>
|
||||
<!-- Task: Joshua END-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
/* Type Selector */
|
||||
h1 {
|
||||
color: yellow !important;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
ol {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
/* Universal Selector */
|
||||
* {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 20px;
|
||||
}
|
||||
body {
|
||||
background-color: skyblue;
|
||||
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
nav {
|
||||
background-color: white;
|
||||
}
|
||||
div {
|
||||
float: right;
|
||||
}
|
||||
#zuitt-motto {
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
|
||||
.offering-item {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: 20px;
|
||||
}
|
||||
/* Adjacent sibling selector */
|
||||
h3 + img {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
/* Descendant Selector */
|
||||
/* Selector selector */
|
||||
#bootcamp-learning-list li {
|
||||
color: #075966;
|
||||
}
|
||||
|
||||
/* General Sibling Selector */
|
||||
/* Selector ~ selector */
|
||||
h2 ~ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modules {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Introduction</title>
|
||||
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<!-- Internal CSS -->
|
||||
<style>
|
||||
h1 {
|
||||
color: blue !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="top">
|
||||
<a href="#home">Zuitt</a>
|
||||
<div>
|
||||
<a href="#landing">Courses</a>
|
||||
<a href="#offerings">Courses</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Inline Styling -->
|
||||
<h1 style="color: red;">Hello World</h1>
|
||||
<!-- Section start landing -->
|
||||
<section id="landing">
|
||||
<h2>Welcome To Zuitt!</h2>
|
||||
<h3 id="zuitt-motto">Opportunities for everyone, everywhere!</h3>
|
||||
<img src="https://place-puppy.com/450x450" alt="">
|
||||
<ol id="bootcamp-learning-list">
|
||||
<li class="offering-item">Day classes</li>
|
||||
<li class="offering-item">Night classes</li>
|
||||
<li class="offering-item">Short courses</li>
|
||||
</ol>
|
||||
<a href="#Top">Back to Top</a>
|
||||
<!-- Section start Offerings -->
|
||||
</section>
|
||||
<section id="offerings">
|
||||
<h2>Courses</h2>
|
||||
<h3 class="modules">Frontend Development</h3>
|
||||
<ol>
|
||||
<li>Git</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
</ol>
|
||||
<h3 class="modules">Backend Development</h3>
|
||||
<ol>
|
||||
<li>JavaScript</li>
|
||||
<li>MongoDB</li>
|
||||
<li>Node.js</li>
|
||||
<li>Express.js</li>
|
||||
</ol>
|
||||
<h3 class="modules">Full-Stack Development</h3>
|
||||
<ol>
|
||||
<li>MongoDB</li>
|
||||
<li>Express.js</li>
|
||||
<li>React.js</li>
|
||||
<li>Node.js</li>
|
||||
</ol>
|
||||
<a href="#top">Back to Top</a>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue