Skip to content

Add files via upload #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions html/Carousel/Carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<style>
body {
background: #eee;
}

.container {
width: 90%;
margin: 20px auto;
height: 300px;
}

.carousel {
background: #fff;
width: 100%;
height: 100%;
border: 2px solid orange;
border-radius: 3px;
display: flex;
justify-content: flex-start;
position: relative;
overflow: hidden;
}

.slider {

display: flex;
height: 100%;
width: 500%;

/* This does not let the slider shrink */
flex-shrink: 0;

transition: all 0.5s;
}

.slider section {
flex-basis: 20%;

/* each section taking 20% of the slider with width 500% of the carousel */
width: 20%;
flex-shrink: 0;
flex: 1;

display: flex;
align-items: center;
justify-content: center;
}

.arrow {
position: absolute;
top: 10px;
cursor: pointer;
}

.arrow.prev {
left: 10px;
}

.arrow.next {
right: 10px;
}
</style>

<body>
<div class="container">

<div class="carousel">
<div class="slider">
<section>Content Section 1</section>
<section>Content Section 2</section>
<section>Content Section 3</section>
<section>Content Section 4</section>
<section>Content Section 5</section>
</div>
<div class="controls">
<span class="arrow prev">prev</span>
<span class="arrow
next">next</span>
</div>
</div>
</div>
</body>
<script>

const slider = document.querySelector('.slider')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
const carousel = document.querySelector('.carousel')
var direction;
prev.addEventListener('click', function () {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
direction = 1;
}
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(+20%)'
})
next.addEventListener('click', function () {
direction = -1;
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-20%)'
})
slider.addEventListener('transitionend', function () {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === 1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none';
slider.style.transform = 'translate(0)';

setTimeout(function () {
slider.style.transition = 'all 0.5s'
})


})

</script>

</html>
57 changes: 57 additions & 0 deletions html/flex_Basis_As_Max_Width.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
background: #eee;
margin: 50px;
padding: 0px;
border: 3px solid #000;

display: flex;
flex-wrap: wrap;
}
.items{
color: #fff;
font-style: 20px;
font-weight: bold;
text-align: center;
padding: 0px;
margin: 0px;
height: 60px;

/* Fills all empty space out evenly */
/* flex-grow: 1; */

flex-basis: 100px;
}
.item1{
background: orangered;

/* works like max width */
flex-basis: 200px;
}
.item2{
background: yellowgreen;
}
.item3{
background: mediumpurple;
}
.item4{
background: hotpink;
}
</style>
<body>
<div class="container">
<div class="items item1">One</div>
<div class="items item2">Two</div>
<div class="items item3">Three</div>
<div class="items item4">Four</div>
</div>
</body>
</html>
56 changes: 56 additions & 0 deletions html/flex_basis_as_min_width copy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
background: #eee;
margin: 50px;
padding: 0px;
border: 3px solid #000;

display: flex;
flex-wrap: wrap;
}
.items{
color: #fff;
font-style: 20px;
font-weight: bold;
text-align: center;
padding: 0px;
margin: 0px;
height: 60px;

/* Fills all empty space out evenly */
flex-grow: 1;

}
.item1{
background: orangered;

/* works like min width */
flex-basis: 200px;
}
.item2{
background: yellowgreen;
}
.item3{
background: mediumpurple;
}
.item4{
background: hotpink;
}
</style>
<body>
<div class="container">
<div class="items item1">One</div>
<div class="items item2">Two</div>
<div class="items item3">Three</div>
<div class="items item4">Four</div>
</div>
</body>
</html>
55 changes: 55 additions & 0 deletions html/flex_shrink1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
background: #eee;
margin: 50px;
padding: 0px;
border: 3px solid #000;

display: flex;
flex-wrap: wrap;
}
.items{
color: #fff;
font-style: 20px;
font-weight: bold;
text-align: center;
padding: 0px;
margin: 0px;
height: 60px;
width: 200px;

}
.item1{
background: orangered;

/* size is fixed.shrinks on values greater than 0 */
flex-shrink: 0;

}
.item2{
background: yellowgreen;
}
.item3{
background: mediumpurple;
}
.item4{
background: hotpink;
}
</style>
<body>
<div class="container">
<div class="items item1">One</div>
<div class="items item2">Two</div>
<div class="items item3">Three</div>
<div class="items item4">Four</div>
</div>
</body>
</html>
53 changes: 53 additions & 0 deletions html/flex_shrink2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
background: #eee;
margin: 50px;
padding: 0px;
border: 3px solid #000;

display: flex;
/* flex-wrap: wrap; */
}
.items{
color: #fff;
font-style: 20px;
font-weight: bold;
text-align: center;
padding: 0px;
margin: 0px;
height: 60px;
width: 200px;

}
.item1{
background: orangered;
flex-shrink: 4;

}
.item2{
background: yellowgreen;
}
.item3{
background: mediumpurple;
}
.item4{
background: hotpink;
}
</style>
<body>
<div class="container">
<div class="items item1">One</div>
<div class="items item2">Two</div>
<div class="items item3">Three</div>
<div class="items item4">Four</div>
</div>
</body>
</html>
Loading