Skip to content

Commit 88f5e37

Browse files
renancavichirenancavichi
committed
layout imagem e links
1 parent 818a084 commit 88f5e37

File tree

6 files changed

+97
-14
lines changed

6 files changed

+97
-14
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
# Tópicos Importantes
22

3-
43
## HTML
54
- Doctype html 5
65
- Estrutura Básica do HTML
76
- html, head, title, body
8-
- style
7+
- Tag Style
98
- Tags de Texto: h1...h6, p
109
- Destaque do Texto: b, i, span
1110
- div (id e class)

‎contatos.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Contatos</title>
5+
<link rel="stylesheet" href="css/style.css" />
6+
<style>
7+
h1 {
8+
color: #af29c3;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<header id="header">
14+
<img src="img/logo.png" alt="Logo Wiki" />
15+
<nav id="menu">
16+
<a href="index.html">Home</a>
17+
<a href="quem-somos.html">Quem Somos</a>
18+
<a href="contatos.html">Contatos</a>
19+
<a href="https://google.com">Google</a>
20+
</nav>
21+
</header>
22+
<div class="flex-row">
23+
<aside id="sidebar">
24+
</aside>
25+
<main id="content">
26+
<h1 style="color: #d7a121">Contatos</h1>
27+
</main>
28+
</div>
29+
<footer id="footer">
30+
<p>Renan Cavichi</p>
31+
</footer>
32+
</body>
33+
</html>

‎css/style.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ span {
1919
align-items: center;
2020
}
2121

22+
#header img{
23+
width: 60px;
24+
height: 60px;
25+
}
26+
2227
#sidebar {
2328
height: 400px;
2429
width: 120px;
@@ -44,7 +49,15 @@ span {
4449
}
4550

4651
#menu {
52+
display: flex;
53+
justify-content: space-around;
54+
align-items: center;
4755
height: 50px;
48-
width: 50px;
56+
width: 400px;
4957
background-color: #e4267c;
58+
}
59+
60+
#menu a{
61+
color: #FFF;
62+
text-decoration: none;
5063
}

‎img/logo.png‎

30.8 KB
Loading

‎index.html‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,19 @@
1010
</style>
1111
</head>
1212
<body>
13-
<div id="header">
14-
<h1>LOGO</h1>
15-
<div id="menu"></div>
16-
</div>
13+
<header id="header">
14+
<img src="img/logo.png" alt="Logo Wiki">
15+
<nav id="menu">
16+
<a href="index.html">Home</a>
17+
<a href="quem-somos.html">Quem Somos</a>
18+
<a href="contatos.html">Contatos</a>
19+
<a href="https://google.com">Google</a>
20+
</nav>
21+
</header>
1722
<div class="flex-row">
18-
<div id="sidebar">
19-
</div>
20-
<div id="content">
23+
<aside id="sidebar">
24+
</aside>
25+
<main id="content">
2126
<h1 style="color: #d7a121">Olá Mundo HTML!</h1>
2227
<h1>Olá Mundo!</h1>
2328
<h1>Olá Mundo!</h1>
@@ -26,12 +31,12 @@ <h3>Olá Mundo!</h3>
2631
<h4>Olá Mundo!</h4>
2732
<h5>Olá Mundo!</h5>
2833
<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>
34+
<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.<br> 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>
3035
<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>
36+
</main>
3237
</div>
33-
<div id="footer">
38+
<footer id="footer">
3439
<p>Renan Cavichi</p>
35-
</div>
40+
</footer>
3641
</body>
3742
</html>

‎quem-somos.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Quem Somos</title>
5+
<link rel="stylesheet" href="css/style.css" />
6+
<style>
7+
h1 {
8+
color: #af29c3;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<header id="header">
14+
<img src="img/logo.png" alt="Logo Wiki">
15+
<nav id="menu">
16+
<a href="index.html">Home</a>
17+
<a href="quem-somos.html">Quem Somos</a>
18+
<a href="contatos.html">Contatos</a>
19+
<a href="https://google.com">Google</a>
20+
</nav>
21+
</header>
22+
<div class="flex-row">
23+
<aside id="sidebar">
24+
</aside>
25+
<main id="content">
26+
<h1 style="color: #d7a121">Quem Somos</h1>
27+
</main>
28+
</div>
29+
<footer id="footer">
30+
<p>Renan Cavichi</p>
31+
</footer>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)