flexbox layout base id e class

renancavichi · renancavichi · commit 818a084f49aa · 2025-08-05T21:57:30.000-03:00
diff --git a/README.md b/README.md
@@ -2,16 +2,20 @@
 
 
 ## HTML
+- Doctype html 5
 - Estrutura Básica do HTML
     - html, head, title, body
 - style
 - Tags de Texto: h1...h6, p
 - Destaque do Texto: b, i, span
+- div (id e class)
 
 
 ## CSS
 - Externo, Interno e In-line
 - Sintaxe do código css
+- ID e Classes
+- Flexbox (display: flex e outros elementos) - https://flexboxfroggy.com/
 
 
 ## Comandos Git
diff --git a/css/style.css b/css/style.css
@@ -10,3 +10,41 @@ h1 {
 span { 
     color: #04047d;
 }
+
+#header {
+    height: 80px;
+    background-color: #867d0b;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#sidebar {
+    height: 400px;
+    width: 120px;
+    background-color: #15bf23;
+}
+
+#content{
+    width: 680px;
+    background-color: #e0abec;
+}
+
+#footer {
+   height: 150px;
+   background-color: #28292d;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   color: #FFFFFF 
+}
+
+.flex-row {
+    display: flex;
+}
+
+#menu {
+    height: 50px;
+    width: 50px;
+    background-color: #e4267c;
+}
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
     <head>
         <title>Olá Mundo HTML!</title>
@@ -9,15 +10,28 @@
         </style>
     </head>
     <body>
-        <h1 style="color: #d7a121">Olá Mundo HTML!</h1>
-        <h1>Olá Mundo!</h1>
-        <h1>Olá Mundo!</h1>
-        <h2>Olá Mundo!</h2>
-        <h3>Olá Mundo!</h3>
-        <h4>Olá Mundo!</h4>
-        <h5>Olá Mundo!</h5>
-        <h6>Olá Mundo!</h6>
-        <p><b>HTML</b> (abreviação para a expressão inglesa HyperText Markup Language, que significa: "Linguagem de Marcação de <i>Hipertexto</i>") é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A <span style="color: #876867;">tecnologia</span> é fruto da junção entre os padrões HyTime e SGML.</p>
-        <p>HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações (em inglês: hyperlink e link). O padrão é independente de outros padrões de processamento de texto em geral.</p>
+        <div id="header">
+            <h1>LOGO</h1>
+            <div id="menu"></div>
+        </div>
+        <div class="flex-row">
+            <div id="sidebar">
+            </div>
+            <div id="content">
+                <h1 style="color: #d7a121">Olá Mundo HTML!</h1>
+                <h1>Olá Mundo!</h1>
+                <h1>Olá Mundo!</h1>
+                <h2>Olá Mundo!</h2>
+                <h3>Olá Mundo!</h3>
+                <h4>Olá Mundo!</h4>
+                <h5>Olá Mundo!</h5>
+                <h6>Olá Mundo!</h6>
+                <p><b>HTML</b> (abreviação para a expressão inglesa HyperText Markup Language, que significa: "Linguagem de Marcação de <i>Hipertexto</i>") é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A <span style="color: #876867;">tecnologia</span> é fruto da junção entre os padrões HyTime e SGML.</p>
+                <p>HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações (em inglês: hyperlink e link). O padrão é independente de outros padrões de processamento de texto em geral.</p>
+            </div>
+        </div>
+        <div id="footer">
+            <p>Renan Cavichi</p>
+        </div>
     </body>
 </html>
