Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 818a084

Browse files
flexbox layout base id e class
1 parent 974beea commit 818a084

File tree

3 files changed

+66
-10
lines changed

3 files changed

+66
-10
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@
22

33

44
## HTML
5+
- Doctype html 5
56
- Estrutura Básica do HTML
67
- html, head, title, body
78
- style
89
- Tags de Texto: h1...h6, p
910
- Destaque do Texto: b, i, span
11+
- div (id e class)
1012

1113

1214
## CSS
1315
- Externo, Interno e In-line
1416
- Sintaxe do código css
17+
- ID e Classes
18+
- Flexbox (display: flex e outros elementos) - https://flexboxfroggy.com/
1519

1620

1721
## Comandos Git

‎css/style.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,41 @@ h1 {
1010
span {
1111
color: #04047d;
1212
}
13+
14+
#header {
15+
height: 80px;
16+
background-color: #867d0b;
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
}
21+
22+
#sidebar {
23+
height: 400px;
24+
width: 120px;
25+
background-color: #15bf23;
26+
}
27+
28+
#content{
29+
width: 680px;
30+
background-color: #e0abec;
31+
}
32+
33+
#footer {
34+
height: 150px;
35+
background-color: #28292d;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
color: #FFFFFF
40+
}
41+
42+
.flex-row {
43+
display: flex;
44+
}
45+
46+
#menu {
47+
height: 50px;
48+
width: 50px;
49+
background-color: #e4267c;
50+
}

‎index.html

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34
<title>Olá Mundo HTML!</title>
@@ -9,15 +10,28 @@
910
</style>
1011
</head>
1112
<body>
12-
<h1 style="color: #d7a121">Olá Mundo HTML!</h1>
13-
<h1>Olá Mundo!</h1>
14-
<h1>Olá Mundo!</h1>
15-
<h2>Olá Mundo!</h2>
16-
<h3>Olá Mundo!</h3>
17-
<h4>Olá Mundo!</h4>
18-
<h5>Olá Mundo!</h5>
19-
<h6>Olá Mundo!</h6>
20-
<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>
21-
<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>
13+
<div id="header">
14+
<h1>LOGO</h1>
15+
<div id="menu"></div>
16+
</div>
17+
<div class="flex-row">
18+
<div id="sidebar">
19+
</div>
20+
<div id="content">
21+
<h1 style="color: #d7a121">Olá Mundo HTML!</h1>
22+
<h1>Olá Mundo!</h1>
23+
<h1>Olá Mundo!</h1>
24+
<h2>Olá Mundo!</h2>
25+
<h3>Olá Mundo!</h3>
26+
<h4>Olá Mundo!</h4>
27+
<h5>Olá Mundo!</h5>
28+
<h6>Olá Mundo!</h6>
29+
<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>
30+
<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>
31+
</div>
32+
</div>
33+
<div id="footer">
34+
<p>Renan Cavichi</p>
35+
</div>
2236
</body>
2337
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /