diff --git a/quinzena4/flex-grid-exercicio-banu/labenu/index.html b/quinzena4/flex-grid-exercicio-banu/labenu/index.html new file mode 100644 index 0000000..8a0fb77 --- /dev/null +++ b/quinzena4/flex-grid-exercicio-banu/labenu/index.html @@ -0,0 +1,57 @@ + + + + + + + + Videos + + +
+
+
+

FutureTube

+ +
+
+
+
+ +

Aula 01 - Como Funciona o Computador? - Lógica de Programação para Iniciantes

+
+
+ +

Aula 02 - Lógica e Algoritmos - Lógica de Programação para Iniciantes

+
+
+ +

Aula 03 - O que são variáveis? - Lógica de Programação para Iniciantes

+
+
+ +

Aula 04 - Operadores Aritméticos e Comparadores

+
+
+ +

Aula 05 - Operadores Lógicos - Lógica de Programação para Iniciantes

+
+
+ +

Aula 06 - Operações com Strings e Arrays - Lógica de Programação para Iniciantes

+
+
+ +

Aula 07 - Estruturas condicionais - Lógica de Programação para Iniciantes

+
+
+ +

Aula 08 - Estruturas de Repetição - Lógica de Programação para Iniciantes

+
+
+ +
+ + diff --git a/quinzena4/flex-grid-exercicio-banu/labenu/style.css b/quinzena4/flex-grid-exercicio-banu/labenu/style.css new file mode 100644 index 0000000..7d81c77 --- /dev/null +++ b/quinzena4/flex-grid-exercicio-banu/labenu/style.css @@ -0,0 +1,81 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +p { + padding: 12px; +} + +.page-container { + display: grid; + min-height: 100vh; + grid-template-rows: 70px 1fr 70px; + grid-template-columns: 300px 1fr; +} + +header { + background-color: #ef843a; + display: flex; + justify-content: space-around; + align-items: center; + align-items: center; + padding: 0 13px; + grid-column: 1/3; +} + +.icone { + width: 30px; + margin-bottom: 4px; + margin-right: 8px; +} + +input{ + margin-left: 900px; +} + +.icone-e-texto { + display: flex; + /* justify-content: space-between; + padding: 0px 155px; */ +} + +nav { + background-color: #f2d0e0; + padding: 12px; +} + +.botao-nav { + display: flex; + justify-content: space-between; +} + +main { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 16px; +} + +.playlist-de-videos{ + display: flex; + flex-direction: column; + + align-items: center; + text-align: center; + height: max-content; + box-shadow: 7px 9px 5px darkgrey; +} +.imagem-card { + width: 100%; +} + +footer { + background-color: #323b3e; + color: white; + display: flex; + /* justify-content: center; + align-items: center; */ + grid-column: 1/-1; +}