Skip to content

Commit b92d1cb

Browse files
diaz-rodrigodiaz-rodrigo
committed
add new short projects
1 parent a0b30a9 commit b92d1cb

File tree

72 files changed

+2464
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+2464
-0
lines changed

‎Languages/HTML-CSS-Javascript/Background Slider/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Background</title>
8+
</head>
9+
<body>
10+
<button>Prev</button>
11+
<div class="container">
12+
<div
13+
class="square active"
14+
style="
15+
background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
16+
"
17+
></div>
18+
<div
19+
class="square"
20+
style="
21+
background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
22+
"
23+
></div>
24+
<div
25+
class="square"
26+
style="
27+
background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
28+
"
29+
></div>
30+
<div
31+
class="square"
32+
style="
33+
background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
34+
"
35+
></div>
36+
<div
37+
class="square"
38+
style="
39+
background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
40+
"
41+
></div>
42+
</div>
43+
<button>Next</button>
44+
</body>
45+
<script src="script.js"></script>
46+
</html>

‎Languages/HTML-CSS-Javascript/Background Slider/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const backgrounds = document.querySelectorAll(".square");
2+
const [prev, next] = document.querySelectorAll("button");
3+
const body = document.querySelector("body");
4+
5+
let counter = 0;
6+
7+
next.addEventListener("click", () => {
8+
counter++;
9+
if (counter > backgrounds.length - 1) {
10+
counter = 0;
11+
}
12+
setBackground(counter);
13+
});
14+
prev.addEventListener("click", () => {
15+
counter--;
16+
if (counter < 0) {
17+
counter = backgrounds.length - 1;
18+
}
19+
setBackground(counter);
20+
});
21+
22+
function setBackground(ind) {
23+
backgrounds.forEach((background, index) => {
24+
if (ind === index) {
25+
background.classList.add("active");
26+
27+
body.style.backgroundImage = background.style.backgroundImage;
28+
} else {
29+
background.classList.remove("active");
30+
}
31+
});
32+
}

‎Languages/HTML-CSS-Javascript/Background Slider/style.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
background-image: url("https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80");
3+
font-family: "Roboto", sans-serif;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
height: 100vh;
8+
overflow: hidden;
9+
margin: 0;
10+
background-position: center center;
11+
background-size: cover;
12+
transition: 0.4s;
13+
}
14+
15+
body::before {
16+
content: "";
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 100vh;
22+
background-color: rgba(0, 0, 0, 0.7);
23+
z-index: -1;
24+
}
25+
26+
.container {
27+
z-index: -1;
28+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
29+
height: 70vh;
30+
width: 70vw;
31+
position: relative;
32+
overflow: hidden;
33+
}
34+
35+
.square {
36+
background: rgba(0, 0, 0, 0);
37+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
38+
background-size: cover;
39+
position: absolute;
40+
height: 100vh;
41+
width: 100vw;
42+
background-position: center center;
43+
background-size: cover;
44+
position: absolute;
45+
top: -15vh;
46+
left: -15vw;
47+
transition: 0.4s ease;
48+
z-index: 1;
49+
opacity: 0;
50+
}
51+
.square.active {
52+
opacity: 1;
53+
}

‎Languages/HTML-CSS-Javascript/Blurry Loading/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div class="card-container">
11+
<h2>Content</h2>
12+
</div>
13+
<div class="card-container">
14+
<h2>Content</h2>
15+
</div>
16+
<div class="card-container">
17+
<h2>Content</h2>
18+
</div>
19+
<div class="card-container">
20+
<h2>Content</h2>
21+
</div>
22+
<div class="card-container">
23+
<h2>Content</h2>
24+
</div>
25+
<div class="card-container">
26+
<h2>Content</h2>
27+
</div>
28+
<div class="card-container">
29+
<h2>Content</h2>
30+
</div>
31+
<div class="card-container">
32+
<h2>Content</h2>
33+
</div>
34+
</body>
35+
<script src="index.js"></script>
36+
</html>

‎Languages/HTML-CSS-Javascript/Blurry Loading/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const body = document.querySelector("body");
2+
const cards = document.querySelectorAll(".card-container");
3+
4+
const scrollListener = () => {
5+
const y = (window.innerHeight / 5) * 4;
6+
7+
cards.forEach((card, index) => {
8+
const cardLenght = card.getBoundingClientRect().top;
9+
if (y > cardLenght) {
10+
card.style.transform = "translateX(0%)";
11+
} else {
12+
if (index % 2) {
13+
card.style.transform = "translateX(400%)";
14+
} else {
15+
card.style.transform = "translateX(-400%)";
16+
}
17+
}
18+
});
19+
};
20+
scrollListener();
21+
22+
window.addEventListener("scroll", scrollListener);
23+
window.addEventListener("resize", scrollListener);

‎Languages/HTML-CSS-Javascript/Blurry Loading/style.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body {
2+
background-color: gray;
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
7+
overflow-x: hidden;
8+
}
9+
10+
.card-container {
11+
background-color: steelblue;
12+
height: 200px;
13+
width: 400px;
14+
color: #fff;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
margin: 10px;
19+
border-radius: 10px;
20+
box-shadow: 2px 4px 5px black;
21+
align-self: center;
22+
position: relative;
23+
height: 200px;
24+
width: 400px;
25+
margin: 10px;
26+
transform: translateX(-400%);
27+
transition: transform 0.3s ease;
28+
}
29+
30+
.card-container:nth-of-type(even) {
31+
transform: translateX(400%);
32+
}

‎Languages/HTML-CSS-Javascript/Carousel/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Carousel</title>
8+
<div class="carousel">
9+
<div class="container">
10+
<img
11+
class="image"
12+
src="
13+
https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80
14+
"
15+
/>
16+
<img
17+
class="image"
18+
src="
19+
https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
20+
"
21+
/>
22+
<img
23+
class="image"
24+
class="image"
25+
src="
26+
https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
27+
"
28+
/>
29+
<img
30+
class="image"
31+
src="
32+
https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80
33+
"
34+
/>
35+
</div>
36+
<div class="buttons-bar">
37+
<button>Prev</button>
38+
<button>Next</button>
39+
</div>
40+
</div>
41+
</head>
42+
<body></body>
43+
<script src="script.js"></script>
44+
</html>

‎Languages/HTML-CSS-Javascript/Carousel/script.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const images = document.querySelectorAll(".image");
2+
const container = document.querySelector(".container");
3+
4+
let index = 0;
5+
let lastIndex = images.length - 1;
6+
7+
const activateEachImage = () => {
8+
container.style = `transform: translateX(${-index * 500}px);`;
9+
index++;
10+
if (index > lastIndex) {
11+
index = 0;
12+
}
13+
};
14+
15+
setInterval(activateEachImage, 2000);

‎Languages/HTML-CSS-Javascript/Carousel/style.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
}
11+
12+
.carousel {
13+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
14+
height: 530px;
15+
width: 500px;
16+
overflow: hidden;
17+
}
18+
19+
.container {
20+
transform: translateX(0);
21+
display: flex;
22+
transition: transform 0.5s ease-in-out;
23+
}
24+
25+
.container .image {
26+
width: 500px;
27+
height: 500px;
28+
object-fit: cover;
29+
}
30+
31+
.buttons-bar {
32+
width: 100%;
33+
display: flex;
34+
justify-content: space-between;
35+
}
36+
37+
.buttons-bar button {
38+
width: 245px;
39+
border: none;
40+
background-color: purple;
41+
color: white;
42+
height: 30px;
43+
}

‎Languages/HTML-CSS-Javascript/Double Vertical Slider/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Two sliders</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="left-slider">
12+
<div style="background-color: yellow">
13+
<h2>Fyling eagle</h2>
14+
<p>in the sunset</p>
15+
</div>
16+
<div style="background-color: gray">
17+
<h2>Lonely castle</h2>
18+
<p>in the wilderness</p>
19+
</div>
20+
<div style="background-color: blue">
21+
<h2>Bluuue Sky</h2>
22+
<p>with it's mountain</p>
23+
</div>
24+
<div class="content" style="background-color: pink">
25+
<h2>Nature flower</h2>
26+
<p>all in pink</p>
27+
</div>
28+
</div>
29+
<div class="right-slider">
30+
<div
31+
style="
32+
background-image: url(https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80);
33+
"
34+
></div>
35+
<div
36+
style="
37+
background-image: url(https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80);
38+
"
39+
></div>
40+
<div
41+
style="
42+
background-image: url(https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80);
43+
"
44+
></div>
45+
<div
46+
style="
47+
background-image: url(https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80);
48+
"
49+
></div>
50+
</div>
51+
<button class="up">Up</button>
52+
<button class="down">Down</button>
53+
</div>
54+
</body>
55+
<script src="script.js"></script>
56+
</html>

0 commit comments

Comments
 (0)