Primeiramente as imagens de como ficou.
Essa primeira mostrando uma coisa que procurei como fazer para adicionar, que foi colocar o um ícone na aba onde fica o nome da página.
Agora o site mesmo.
Uma parte das classes ficou de fora, mas vamos para o código que fiz para html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="dnd-icon.ico">
<title>D&D</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<h1 class="titulo-principal">Dungeons and Dragons</h1>
</header>
<img id="banner" src="dnd-banner.jpg">
<div class="sobrednd">
<h2 class="titulo-centralizado">Sobre Dungeons and Dragons</h2>
<p><strong><em>Dungeons & Dragons</strong></em> (normalmente abreviado D&D ou DnD) é um jogo de interpretação de papéis de alta fantasia criado por <u>Gary Gygax</u> e <u>Dave Arneson</u>. A publicação do <strong>D&D</strong> é considerada como a origem do RPG (role-playing game) e atualmente se encontra na sua 5ª edição.</p>
<p id="objetivo"><strong>Jogadores de D&D criam personagens que embarcam em aventuras imaginárias em que eles enfrentam monstros, reúnem tesouros e interagem entre si, com o objetivo de criar uma narrativa cooperativa.</strong></p>
<p>O <strong>D&D</strong> também apresentou o conceito de Mestre de Jogo (<em>Dungeon Master</em> ou DM, no original), que atua como juiz e narrador e é responsável por manter o cenário ficcional do jogo e aplicar as regras a cada situação descrita.</p>
<p id="final">As regras do jogo cobrem áreas diversas como interações sociais, uso de magia, combate e o efeito do ambiente nos personagens, dessa maneira, ajudando o mestre em suas decisões.</p>
</div>
<div class="vantagens">
<h3 class="titulo-lista">Vantagens de Jogar RPG</h3>
<ul>
<li class="itens">Gerar momentos muito divertidos;</li>
<li class="itens">Desenvolve sua criatividade;</li>
<li class="itens">Desenvolve o pensamento lógico e matemático;</li>
<li class="itens">Aproveitar uma atividade social;</li>
<li class="itens">Trabalhar em equipe;</li>
<li class="itens">Ajuda com a timidez;</li>
<li class="itens">Aprende a contar boas histórias;</li>
<li class="itens">Habilidade de resolver problemas.</li>
</ul>
<img class="jogodnd" src="jogo.jpg">
<img class="jogodnd" src="jogo2.jpg">
</div>
