-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (166 loc) · 8.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/estilos.css">
<link rel="stylesheet" href="./css/flexbox.css">
<title>VidFlow</title>
<link rel="shortcut icon" href="./img/Favicon.png" type="image/x-icon">
</head>
<body>
<header>
<nav class="cabecalho__container">
<div class="logo__item">
<img src="./img/VidFlow--Logo-light-mode.png" alt="Logo do VidFlow">
</div>
<div class="cabrcalho__pesquisar__item">
<form class="form__pesquisa">
<input type="search" class="pesquisar__input" placeholder="Pesquisar">
<img src="./img/topbar/keyboard.png" alt="icone de teclado" class="pesquisar__input-teclado">
<button class="pesquisar__btn">
<img src="./img/topbar/search.png" alt="icone de lupa">
</button>
<button class="cabecalho__audio">
<img src="./img/topbar/Mic.png" alt="icone de microfone">
</button>
</form>
</div>
<div class="cabrcalho__icones__item">
<a href="#" class="cabecalho__videos"></a>
<a href="#" class="cabecalho__apps"></a>
<a href="#" class="cabecalho__notificacoes"></a>
<a href="#" class="cabecalho__avatar"></a>
<label class="cabecalho__switch">
<input type="checkbox" class="cabecalho__switch-input">
<span class="cabecalho__switch-slider"></span>
</label>
</div>
</nav>
</header>
<main class="corpo__conteiner">
<section class="corpo__menu">
<div class="corpo__menu-link">
<a href="#" class="menu-link__item">
<img src="./img/sidebar/home.png" alt="icone de casa" class="menu-link__logo">
<p>Início</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/explore.png" alt="icone de explorar" class="menu-link__logo">
<p>Explorar</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/airplay.png" alt="icone de shorts" class="menu-link__logo">
<p>Shorts</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/subscriptions.png" alt="icone de Inscricoes" class="menu-link__logo">
<p>Inscrições</p>
</a>
<p class="menu-link__borda"></p>
</div>
<div class="corpo__menu-link">
<a href="#" class="menu-link__item">
<img src="./img/sidebar/video_library.png" alt="icone de biblioteca" class="menu-link__logo">
<p>Biblioteca</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/history.png" alt="icone de historico" class="menu-link__logo">
<p>Histórico</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/history_toggle_off.png" alt="icone de relogio" class="menu-link__logo">
<p>Assistir mais tarde</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/thumb_up_alt.png" alt="icone de Like" class="menu-link__logo">
<p>Marcados como com like</p>
</a>
<p class="menu-link__borda"></p>
</div>
<div class="corpo__menu-link">
<h2 class="corpo__menu-titulo">INSCRIÇÕES</h2>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Alura.png" alt="ava de Alura" class="menu-link__ava">
<p>Alura</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Gaveta.png" alt="ava de Gaveta" class="menu-link__ava">
<p>Gaveta</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Rafa.png" alt="ava de Rafaella Ballerini" class="menu-link__ava">
<p>Rafaella Ballerini</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Atila.png" alt="ava de Atila Iamarino" class="menu-link__ava">
<p>Atila Iamarino</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Souto.png" alt="ava de Mario Souto" class="menu-link__ava">
<p>Mario Souto</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Jovem_Nerd.png" alt="ava de Jovem Nerd" class="menu-link__ava">
<p>Jovem Nerd</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/Avatar_Deschamps.png" alt="ava de Felipe Deschamps" class="menu-link__ava">
<p>Felipe Deschamps</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/keyboard_arrow_down.png" alt="icone de seta pra baixo" class="menu-link__ava-logo">
<p>Mostrar mais 2</p>
</a>
<p class="menu-link__borda"></p>
</div>
<div class="corpo__menu-link">
<h2 class="corpo__menu-titulo">MAIS DA PÁGINA</h2>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/ondemand_video.png" alt="icone de video" class="menu-link__logo">
<p>Vídeos Premium</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/movie.png" alt="icone de filme" class="menu-link__logo">
<p>Filmes</p>
</a>
<a href="#" class="menu-link__item">
<img src="./img/sidebar/sports_esports.png" alt="icone de jogo" class="menu-link__logo">
<p>Jogos</p>
</a>
</div>
</section>
<section class="corpo__conteudo">
<section class="superior__secao__container">
<div class="superior__secao__conteiner-wrapper">
<a href="#" name="Tudo" class="superior__item">Tudo</a>
<a href="#" name="Debates" class="superior__item">Debates</a>
<a href="#" name="Ao Vivo" class="superior__item">Ao Vivo</a>
<a href="#" name="Podcasts" class="superior__item">Podcasts</a>
<a href="#" name="Front-end" class="superior__item">Front-end</a>
<a href="#" name="Mobile" class="superior__item">Mobile</a>
<a href="#" name="Data Science" class="superior__item">Data Science</a>
<a href="#" name="Apps" class="superior__item">Apps</a>
<a href="#" name="Programação" class="superior__item">Programação</a>
<a href="#" name="Inteligência Artificial" class="superior__item">Inteligência Artificial</a>
<a href="#" name="Inovação" class="superior__item">Inovação</a>
</div>
<label class="superior__slider">
<span><img src="./img/arrow_forward_ios.png" alt="flecha para direita"></span>
</label>
</section>
<section>
<ul class="videos__container">
<!--videos vamos pegar com API -->
</ul>
</section>
</section>
</main>
<script src="script.js"></script>
</body>
</html>