Skip to content

Commit ed409e5

Browse files
ingridflackingridflack
authored
Merge pull request Personare#23 from future4code/semana4-aula15
Labetube versão inicial
2 parents 9158729 + 2d5dab9 commit ed409e5

19 files changed

+447
-0
lines changed

‎semana4/fixacaoJS_5.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
```
2+
const newArray = animais.map(animal => animal.nome)
3+
return newArray;
4+
```

‎semana4/labetube/img/video1.png

499 KB
Loading

‎semana4/labetube/img/video2.png

1.25 MB
Loading

‎semana4/labetube/img/video3.png

1.44 MB
Loading

‎semana4/labetube/img/video4.png

906 KB
Loading

‎semana4/labetube/img/video5.png

1.01 MB
Loading

‎semana4/labetube/img/video6.png

1.18 MB
Loading

‎semana4/labetube/img/video7.png

2.36 MB
Loading

‎semana4/labetube/img/video8.png

1.65 MB
Loading

‎semana4/labetube/index.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap"
17+
rel="stylesheet"
18+
/>
19+
</head>
20+
<body>
21+
<header>
22+
<nav class="navbar">
23+
<a class="logo" href="index.html">LabeTube</a>
24+
<form>
25+
<input type="search" placeholder="Busca" />
26+
</form>
27+
</nav>
28+
</header>
29+
30+
<main>
31+
<a href="video1.html" class="video">
32+
<img src="img/video1.png" alt="imagem do vídeo" />
33+
<span class="video-title">Vídeo 1</span>
34+
</a>
35+
<a href="video2.html" class="video">
36+
<img src="img/video2.png" alt="imagem do vídeo" />
37+
<span class="video-title">Vídeo 2</span>
38+
</a>
39+
<a href="video3.html" class="video">
40+
<img src="img/video3.png" alt="imagem do vídeo" />
41+
<span class="video-title">Vídeo 3</span>
42+
</a>
43+
<a href="video4.html" class="video">
44+
<img src="img/video4.png" alt="imagem do vídeo" />
45+
<span class="video-title">Vídeo 4</span>
46+
</a>
47+
<a href="video5.html" class="video">
48+
<img src="img/video5.png" alt="imagem do vídeo" />
49+
<span class="video-title">Vídeo 5</span>
50+
</a>
51+
<a href="video6.html" class="video">
52+
<img src="img/video6.png" alt="imagem do vídeo" />
53+
<span class="video-title">Vídeo 6</span>
54+
</a>
55+
<a href="video7.html" class="video">
56+
<img src="img/video7.png" alt="imagem do vídeo" />
57+
<span class="video-title">Vídeo 7</span>
58+
</a>
59+
<a href="video8.html" class="video">
60+
<img src="img/video8.png" alt="imagem do vídeo" />
61+
<span class="video-title">Vídeo 8</span>
62+
</a>
63+
</main>
64+
<footer class="footer">
65+
<p>Desenvolvido por Ingrid Flack</p>
66+
</footer>
67+
</body>
68+
</html>

‎semana4/labetube/main.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Bebas Neue", cursive;
6+
color: #fff;
7+
font-size: 20px;
8+
}
9+
10+
.logo {
11+
text-decoration: none;
12+
font-size: 32px;
13+
font-family: "Lobster", cursive;
14+
text-shadow: 2px 2px #333;
15+
}
16+
17+
.navbar {
18+
display: flex;
19+
justify-content: space-between;
20+
background-color: #713c87;
21+
padding: 15px;
22+
}
23+
24+
.navbar form input {
25+
color: #333;
26+
padding: 10px;
27+
border: 1px solid #713c87;
28+
border-radius: 5px;
29+
width: 300px;
30+
}
31+
32+
main {
33+
display: grid;
34+
grid-template-columns: 1fr 1fr 1fr 1fr;
35+
gap: 10px;
36+
padding: 10px;
37+
}
38+
39+
.video {
40+
display: grid;
41+
padding: 10px;
42+
text-decoration: none;
43+
}
44+
45+
.video img {
46+
width: 100%;
47+
height: auto;
48+
display: block;
49+
border-radius: 5px;
50+
}
51+
52+
.video-title {
53+
color: #333;
54+
text-align: center;
55+
margin-top: 20px;
56+
font-weight: 800;
57+
}
58+
59+
.footer {
60+
background-color: #713c87;
61+
padding: 35px;
62+
text-align: center;
63+
}
64+
65+
.footer p {
66+
text-shadow: 2px 2px #333;
67+
}
68+
69+
section {
70+
display: flex;
71+
flex-direction: column;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
section p {
77+
color: #333;
78+
text-align: center;
79+
font-weight: 800;
80+
padding: 30px;
81+
font-size: 30px;
82+
}
83+
84+
.video-player {
85+
width: 888px;
86+
height: 500px;
87+
padding: 20px;
88+
}

‎semana4/labetube/video1.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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 1</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
<header>
19+
<nav class="navbar">
20+
<a class="logo" href="index.html">LabeTube</a>
21+
<form>
22+
<input type="search" placeholder="Busca" />
23+
</form>
24+
</nav>
25+
</header>
26+
27+
<section>
28+
<p>Vídeo 1</p>
29+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/1.mp4" controls="controls" autoplay poster="img/video1.png">
30+
</section>
31+
32+
<footer class="footer">
33+
<p>Desenvolvido por Ingrid Flack</p>
34+
</footer>
35+
</body>
36+
</html>

‎semana4/labetube/video2.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 2</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
<header>
19+
<nav class="navbar">
20+
<a class="logo" href="index.html">LabeTube</a>
21+
<form>
22+
<input type="search" placeholder="Busca" />
23+
</form>
24+
</nav>
25+
</header>
26+
<section>
27+
<p>Vídeo 2</p>
28+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/2.mp4" controls="controls" autoplay poster="img/video2.png">
29+
</section>
30+
<footer class="footer">
31+
<p>Desenvolvido por Ingrid Flack</p>
32+
</footer>
33+
</body>
34+
</html>

‎semana4/labetube/video3.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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 3</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
<header>
19+
<nav class="navbar">
20+
<a class="logo" href="index.html">LabeTube</a>
21+
<form>
22+
<input type="search" placeholder="Busca" />
23+
</form>
24+
</nav>
25+
</header>
26+
27+
<section>
28+
<p>Vídeo 3</p>
29+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/3.mp4" controls="controls" autoplay poster="img/video3.png">
30+
</section>
31+
32+
<footer class="footer">
33+
<p>Desenvolvido por Ingrid Flack</p>
34+
</footer>
35+
</body>
36+
</html>

‎semana4/labetube/video4.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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 4</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
<header>
19+
<nav class="navbar">
20+
<a class="logo" href="index.html">LabeTube</a>
21+
<form>
22+
<input type="search" placeholder="Busca" />
23+
</form>
24+
</nav>
25+
</header>
26+
27+
<section>
28+
<p>Vídeo 4</p>
29+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/4.mp4" controls="controls" autoplay poster="img/video4.png">
30+
</section>
31+
32+
<footer class="footer">
33+
<p>Desenvolvido por Ingrid Flack</p>
34+
</footer>
35+
</body>
36+
</html>

‎semana4/labetube/video5.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 5</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
17+
</head>
18+
<body>
19+
<header>
20+
<nav class="navbar">
21+
<a class="logo" href="index.html">LabeTube</a>
22+
<form>
23+
<input type="search" placeholder="Busca" />
24+
</form>
25+
</nav>
26+
</header>
27+
28+
<section>
29+
<p>Vídeo 5</p>
30+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/5.mp4" controls="controls" autoplay poster="img/video5.png">
31+
</section>
32+
33+
<footer class="footer">
34+
<p>Desenvolvido por Ingrid Flack</p>
35+
</footer>
36+
</body>
37+
</html>

‎semana4/labetube/video6.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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LabeTube - Vídeo 6</title>
8+
<link rel="stylesheet" href="main.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
<header>
19+
<nav class="navbar">
20+
<a class="logo" href="index.html">LabeTube</a>
21+
<form>
22+
<input type="search" placeholder="Busca" />
23+
</form>
24+
</nav>
25+
</header>
26+
27+
<section>
28+
<p>Vídeo 6</p>
29+
<video class="video-player" src="https://storage.googleapis.com/future-apis.appspot.com/6.mp4" controls="controls" autoplay poster="img/video6.png">
30+
</section>
31+
32+
<footer class="footer">
33+
<p>Desenvolvido por Ingrid Flack</p>
34+
</footer>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)