<!DOCTYPE html> <!--Para criar o código base do HTML basta digitar !
e apertar enter-->
<html lang="pt - BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google Fonts, acessar o site Google Fonts, escolher a font desejada e copiar os códigos HTML e CSS para aplicar ao site-->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link] rel="stylesheet">
<!--Fim Google Fonts-->
<!--BootStrap Icons (Biblioteca de Ícones)-->
<link rel="stylesheet" href="[Link]
<!--BootStrap Icons (Biblioteca de Ícones)-->
<link rel="stylesheet" href="[Link]">
<title>Desenvolvimento Web</title><!--Título da página no navegador-->
</head>
<body>
<header>
<div class="interface"><!--Interface-->
<div class="logo"><!--Logotipo-->
<a href="#"><!--Link para página inicial quando for clicada na imagem da logo-->
<img src="images/[Link]" width="300" height="300" alt="Logo Desenvolvedores">
<!--Tag para inserir imagem da Logo-->
<!--Dica: apertando CTRL+Espaço, aparecem as opções dentro da pasta do projeto atual-->
</a>
</div>
<nav class="menu-desktop"><!--Criação do Menu de Navegação-->
<ul><!--Criação de lista não ordenada, com aplicação dos links para seus respectivos locais-->
<li><a href="#">Início</a></li>
<li><a href="#">Resumo</a></li>
<li><a href="#">Desenvolvimento Web</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<div class="btn-contato"><!--Criação do Botão de contato-->
<a href="#">
<button>Contato</button>
</a>
</div>
</div>
</hearder>
<!--Só pode haver uma tag main por página, O elemento <main> define o conteúdo principal
dentro do <body> em seu documento ou aplicação.-->
<main>
<section class="topo-do-site">
<div class="interface">
<div class="flex">
<div class="txt-topo-site">
<!--Título do texto com ponto separado com tag span:O elemento HTML <span> é um conteiner
genérico em linha para conteúdo fraseado, que não representa nada por natureza. -->
<h1>Princípios básicos do HTML e CSS<span>.</span></h1>
<p>HTML: Estrutura a página web, definindo elementos como títulos, parágrafos, links e imagens.
CSS: Estiliza a página, controlando a aparência e o layout com cores, fontes e espaçamentos.
HTML e CSS criam páginas web bem estruturadas e visualmente atraentes.</p>
<div class="btn-contato">
<a href="#">
<button>Contato</button>
</a>
</div>
</div><!--Texto Topo-->
<div class="img-topo">
<img src="images/[Link]" width="300" height="300" alt="">
</div><!--Imagem Topo Site (bot)-->
</div><!--Flex-->
</div><!--Interface-->
</section><!--Topo do Site-->
<section class="especialidades">
<div class="interface">
<h2 class="titulo">Desenvolvimento <span>Web.</span></h2>
<div class="flex">
<div class="especialidades-box">
<i class="bi bi-code-slash"></i>
<h3>HTML</h3>
<p>HTML <strong>(HyperText Markup Language)</strong>: Linguagem de
marcação usada para estruturar o conteúdo de páginas web, definindo elementos como títulos,
parágrafos, imagens e links.</p>
</div>
<!--Para duplicar um bloco com facilidade basta fazer a seguinte combinação de
teclas: ALT+Shift+Seta para BAIXO-->
<div class="especialidades-box">
<i class="bi bi-window-dock"></i>
<h3>CSS</h3>
<p>CSS (Cascading Style Sheets): Linguagem de estilo que controla a apresentação e o design
das páginas web, permitindo personalizar cores, fontes, espaçamentos e layouts.</p>
</div>
<div class="especialidades-box">
<i class="bi bi-person-circle"></i>
<h3>JavaScript</h3>
<p>JavaScript: Linguagem de programação que adiciona interatividade e
dinamismo às páginas web, possibilitando a criação de animações, validações de
formulários e comunicação com servidores.</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>