Recriando a Página do Apple Watch com HTML e CSS

Descubra como recriar a página do Apple Watch usando HTML e CSS, aplicando boas práticas de front-end e design profissional.

Em resumo: recriar a página do Apple Watch com HTML e CSS é um exercício prático de front-end em que você reproduz o layout limpo da Apple usando estrutura semântica em HTML e estilização com CSS — posicionamento, tipografia, imagens responsivas e transições. É um ótimo projeto para treinar design de interfaces e fortalecer o portfólio.

Introdução

Fala, impressionador!

Você já olhou para o site da Apple e pensou: “Como eles conseguem fazer um design tão limpo, elegante e funcional?”. Se você é desenvolvedor ou está começando agora no mundo do HTML e CSS, saiba que recriar interfaces de alto nível é um dos melhores exercícios para evoluir suas habilidades.

Neste artigo, vamos mergulhar no passo a passo de como construir a interface da página do Apple Watch.

Ao final deste guia, você terá uma base sólida para criar páginas de produtos que impressionam qualquer cliente ou recrutador. Vamos nessa?

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Perguntas frequentes

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Configurações iniciais do projeto

Antes de criarmos o código da aplicação, precisamos de duas coisas: baixar e instalar um editor de código, como o Visual Studio Code, e baixar a pasta de imagens com todos os assets do projeto neste link.

Em seguida, criaremos uma pasta para armazenar o projeto, para isso:

1. Na área de trabalho ou em qualquer outra parte do seu computador, crie uma pasta chamada hash-watch;
2. Em seguida Extrai a pasta "imagens" que você baixou e coloque dentro da pasta que criamos;
3. Abra o Visual Studio Code, clique no canto superior direito da tela em File e selecione a opção Open Folder e abra a pasta "hash-watch".

Dentro do VS Code, no menu lateral, clique no ícone de adicionar arquivo ao lado do nome da pasta e crie os arquivos "index.html" e "style.css" onde escreveremos o código HTML e CSS respectivamente.

Dentro do arquivo "Index.html" use o atalho ! para criar automaticamente a estrutura inicial do código HTML. Mude a lang dentro da tag html para pt-br e na tag title coloque Hash Watch. O código ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hash Watch</title>
</head>
<body>
    
</body>
</html>

No arquivo "style.css" vamos começar pela importação da fonte San Francisco utilizada no site da Apple. Para isso, vamos usar o propriedade font-face:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

Na sequência, ainda dentro do arquivo CSS, vamos fazer o reset das propriedades padrões com o seguinte código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Agora, precisamos fazer um link do arquivo CSS dentro do arquivo HTML, para conseguir usar os estilos que iremos construir ao longo deste texto. Para isso, vamos voltar no arquivo HTML, e logo abaixo da tag title precisaremos inserir a tag link:

<link rel="stylesheet" href="style.css" />

Agora, para visualizarmos o nosso projeto, precisaremos usar uma extensão do VS Code chamada Live Server. Para instalar ela no editor de código precisamos:

1. Acessar a aba Extensions do VS Code (quinto ícone de cima para baixo no menu à esquerda) ou usar o atalho CTRL + SHIFT + X;
2. Buscar por Live Server e clicar no botão de instalar;

Para usar essa extensão, precisamos clicar sobre o arquivo "index.html" na aba Explorer (CTRL + SHIFT + E) e selecionar a opção Open with Live Server.

Estruturando a barra de navegação

A navegação da Apple é um exemplo clássico de equilíbrio visual. Ela é dividida em três zonas estratégicas: o logotipo (identidade), os links centrais (diretório) e os ícones de ação (busca e compra).
Para estruturar isso, usamos a tag <nav> e uma lista (<ul>).

Essa escolha não é apenas visual; ela informa aos motores de busca e leitores de tela que este bloco é o menu principal do site.

<nav>
  <ul>
    <li>
    <svg height="48" viewBox="0 0 17 48" xmlns="http://www.w3.org/2000/svg">
        <path
            d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z">
        </path>
    </svg>
    </li>

    <li>Loja</li>
    <li>Mac</li>
    <li>iPad</li>
    <li>iPhone</li>
    <li>Watch</li>
    <li>AirPods</li>
    <li>TV e Casa</li>
    <li>Entretenimento</li>
    <li>Acessórios</li>
    <li>Suporte</li>

<li>
    <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 0 17 48">
        <path
            d="M14.298,27.202l-3.87-3.87c0.701-0.929,1.122-2.081,1.122-3.332c0-3.06-2.489-5.55-5.55-5.55c-3.06,0-5.55,2.49-5.55,5.55 c0,3.061,2.49,5.55,5.55,5.55c1.251,0,2.403-0.421,3.332-1.122l3.87,3.87c0.151,0.151,0.35,0.228,0.548,0.228 s0.396-0.076,0.548-0.228C14.601,27.995,14.601,27.505,14.298,27.202z M1.55,20c0-2.454,1.997-4.45,4.45-4.45 c2.454,0,4.45,1.997,4.45,4.45S8.454,24.45,6,24.45C3.546,24.45,1.55,22.454,1.55,20z">
        </path>
    </svg>
</li>

<li>
    <svg height="48" viewBox="0 0 17 48" xmlns="http://www.w3.org/2000/svg">
        <path
            d="m11.3535 16.0283h-1.0205a3.4229 3.4229 0 0 0 -3.333-2.9648 3.4229 3.4229 0 0 0 -3.333 2.9648h-1.02a2.1184 2.1184 0 0 0 -2.117 2.1162v7.7155a2.1186 2.1186 0 0 0 2.1162 2.1167h8.707a2.1186 2.1186 0 0 0 2.1168-2.1167v-7.7155a2.1184 2.1184 0 0 0 -2.1165-2.1162zm-4.3535-1.8652a2.3169 2.3169 0 0 1 2.2222 1.8652h-4.4444a2.3169 2.3169 0 0 1 2.2222-1.8652zm5.37 11.6969a1.0182 1.0182 0 0 1 -1.0166 1.0171h-8.7069a1.0182 1.0182 0 0 1 -1.0165-1.0171v-7.7155a1.0178 1.0178 0 0 1 1.0166-1.0166h8.707a1.0178 1.0178 0 0 1 1.0164 1.0166z">
        </path>
    </svg>
</li>
  </ul>
</nav>

Usamos SVG Inline em vez de imagens .png ou .jpg. Isso garante que o logotipo e os ícones fiquem nítidos em qualquer tela (Retina ou 4K) e nos permite mudar suas cores via CSS.
O CSS abaixo estabelece o comportamento de toda a página:

body {
  font-family: "San Francisco";
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
  gap: 48px;
  font-size: 14px;
}

No código acima, definimos a fonte San Francisco. O display: flex com flex-direction: column organiza o layout em coluna. O max-width: 1000px limita a largura do conteúdo, enquanto o margin: 0 auto centraliza a página. O gap: 48px controla o espaçamento entre os blocos e o font-size: 14px define o tamanho base do texto.

Em seguida, ajustamos especificamente o tamanho da fonte da barra de navegação:

nav {
  font-size: 13px;
}

Em seguida, ajustamos o posicionamento dos elementos dentro da lista:

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

O display: flex posiciona os itens lado a lado, enquanto justify-content: space-between distribui os elementos ao longo da largura disponível. Já o align-items: center garante alinhamento vertical centralizado.

Por padrão, listas HTML possuem marcadores. Para remover esse comportamento, aplicamos:

ul {
  list-style: none;
}

Para indicar que os itens do menu são interativos, alteramos o cursor do mouse:

li {
  cursor: pointer;
}

Por fim, aplicamos um display: block para evitar espaçamentos indesejados e facilita o alinhamento preciso dos ícones dentro da barra de navegação.

svg {
  display: block;
}

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Desenvolvimento do conteúdo principal

Após finalizar a barra de navegação, iniciamos a estruturação do conteúdo principal da página. Essa área é responsável por exibir o produto, permitir a escolha de cores e tamanhos e realizar a compra. Para isso, utilizamos a tag <main>, que representa semanticamente o conteúdo central da aplicação.

Dentro do <main>, criamos uma <section> com o id produto, que agrupa toda a área relacionada ao produto.

<main>
  <section id="produto">
    <!-- Conteúdo do produto -->
  </section>
</main>

Para reproduzir o layout da Apple, dividimos a tela em duas áreas principais:
● Lado esquerdo: informações e opções do produto
● Lado direito: visualização das imagens

Essa divisão é feita criando duas <div> internas: #opcoes-produto e #visualizacao.

<section id="produto">
  <div id="opcoes-produto"></div>
  <div id="visualizacao"></div>
</section>

No CSS, usamos CSS Grid para definir essa proporção, onde a área das imagens ocupa mais espaço que a área das opções:

#produto {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

Dentro de #opcoes-produto, começamos adicionando o título do produto com <h1>:

<h1>Pulseira loop esportiva azul-inverno para caixa de 45 mm</h1>

Logo abaixo, criamos o bloco de preços:

<div class="precos">
  <p id="precos">R$ 499,90</p>
  <a href="#" id="parcelas">Em até 12x de R$ 41,58</a>
  <p id="a-vista">R$ 449,10 à vista (10% de desconto)</p>
</div>

O href="#" indica um link navegável sem destino definido.
No CSS, ajustamos tamanhos, cores e o efeito de hover no link:

#precos {
  font-size: 17.6px;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#a-vista,
#parcelas {
  font-size: 12.8px;
}

Para criar espaçamento entre o título e os demais blocos dentro de #opcoes-produto, utilizamos Flexbox:

#opcoes-produto {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

Em seguida, criamos a <div id="opcoes">, responsável por agrupar todas as escolhas do usuário.

<div id="opcoes">
  <!-- cores, tamanhos e infos -->
</div>

No CSS, organizamos os elementos verticalmente com Flexbox:

#opcoes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

A seleção de cores é feita com inputs do tipo radio ocultos, enquanto os <label> exibem imagens clicáveis.

<div class="cores">
    <h2 id="nome-cor-selecionada">Cor - Azul-inverno</h2>
    <ul id="selecao-cores">
        <li>
            <input type="radio" name="opcao-cor" id="1-cor" checked />
            <label for="1-cor">
                <img src="./imagens/opcoes-cores/azul-inverno.jpeg" alt="Opção de cor" />
            </label>
        </li>
    </ul>
</div>

Esse padrão permite selecionar apenas uma cor, exibindo-a visualmente por meio da imagem.
Para remover o estilo padrão dos radio buttons, ocultamos os inputs:

input[type="radio"] {
  display: none;
}

Os labels passam a ser os elementos clicáveis.

Em seguida, estilizamos os labels que representam cada cor. Eles funcionam como pequenos botões circulares que envolvem as imagens das cores disponíveis.

#selecao-cores label {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Neste código, definimos uma área fixa para cada opção de cor e utilizamos Flexbox para centralizar a imagem tanto horizontal quanto verticalmente. Isso garante consistência visual entre todas as opções.

As imagens internas também recebem ajustes:

#selecao-cores label img {
  width: 32px;
  cursor: pointer;
  mix-blend-mode: color;
}

A propriedade cursor: pointer indica que o elemento é clicável, enquanto mix-blend-mode: color ajuda a harmonizar a cores da imagem com o fundo.

Depois, aplicamos um destaque visual à opção de cor que estiver selecionada. Isso é feito utilizando o seletor :checked combinado com o operador +, que seleciona o label imediatamente após o input marcado.

input[type="radio"]:checked + label {
  border: solid 2px #0066cc;
  border-radius: 50%;
}

Quando o usuário seleciona uma cor, o label correspondente recebe uma borda azul circular, criando um feedback visual claro e intuitivo.

Em seguida, replicamos essa estrutura para todas as opções de cor.

<ul id="selecao-cores">
 <li>
    <input type="radio" name="opcao-cor" id="0-cor" />
    <label for="0-cor">
      <img src="./imagens/opcoes-cores/verde-cipreste.jpeg" alt="Opção de cor" />
    </label>
  </li>

  <li>
    <input type="radio" name="opcao-cor" id="1-cor" checked />
    <label for="1-cor">
      <img src="./imagens/opcoes-cores/azul-inverno.jpeg" alt="Opção de cor" />
    </label>
  </li>

  <li>
    <input type="radio" name="opcao-cor" id="2-cor" checked />
    <label for="2-cor">
      <img src="./imagens/opcoes-cores/meia-noite.jpeg" alt="Opção de cor" />
    </label>
  </li>

  <li>
    <input type="radio" name="opcao-cor" id="3-cor" checked />
    <label for="3-cor">
      <img src="./imagens/opcoes-cores/estelar.jpeg" alt="Opção de cor" />
    </label>
  </li>

  <li>
    <input type="radio" name="opcao-cor" id="4-cor" checked />
    <label for="4-cor">
      <img src="./imagens/opcoes-cores/rosa-claro.jpeg" alt="Opção de cor" />
    </label>
  </li>
</ul>

Para alinhar tudo corretamente e garantir os espaçamentos entre os elementos:

.cores{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#selecao-cores{
    display:flex;
    gap:10px;
}

O selo “Carbon Neutral” é inserido logo abaixo das cores:

<div id="selo-carbono">
  <img src="./imagens/outros-recursos/neutralidade-c.jpeg" />
  <p>Carbon Neutral</p>
</div>

E estilizado com Flexbox:

#selo-carbono {
  display: flex;
  align-items: center;
  gap: 4px;

  & img {
    width: 25px;
  }
}

Neste trecho, o seletor #selo-carbono transforma o elemento em um contêiner flexível com display: flex, permitindo alinhar seus conteúdos horizontalmente. A propriedade align-items: center centraliza verticalmente o ícone e o texto, enquanto gap: 4px define um pequeno espaçamento entre eles.

O trecho & img utiliza o aninhamento. O caractere & representa o seletor pai (#selo-carbono), fazendo com que essa regra seja equivalente a:

#selo-carbono img {
  width: 25px;
}

A seguir, criamos a seção de tamanho da caixa do relógio. Após o fechamento da tag <div id="opcoes"> vamos criar uma <div id="tamanho caixa"> e adicionar um título e outra <div> com as opções de tamanho disponíveis:

<div id=tamanho-caixa>
    <h2>Tamanho da caixa</h2>
    <div id="opcoes-tamanho">
          <input type="radio" name="opcao-tamanho" id="0-tamanho" />
          <label for="0-tamanho">41 mm</label>

          <input type="radio" name="opcao-tamanho" id="1-tamanho" checked />
          <label for="1-tamanho">45 mm</label>
    </div>
</div>

O CSS transforma essas opções em botões grandes e clicáveis:

#tamanho-caixa{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#opcoes-tamanho{
  display: flex;
  gap: 10px;
}

#opcoes-tamanho label {
  border: solid 1px black;
  padding: 30px 50px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
}

#opcoes-tamanho input[type="radio"]:checked+label {
    border: solid 2px #0066cc;
}

O seletor #tamanho-caixa organiza a área de seleção de tamanho com Flexbox em coluna, criando um espaçamento vertical de 10px entre os elementos. Já #opcoes-tamanho também usa Flexbox, mantendo as opções alinhadas horizontalmente e com espaçamento uniforme.

No seletor #opcoes-tamanho label, é definido o visual dos botões de tamanho, com bordas arredondadas, bom espaçamento interno, cursor de clique e texto em destaque. Por fim, input[type="radio"]:checked + label aplica um estilo visual para indicar claramente a opção selecionada.

Logo abaixo, adicionamos um bloco com informações de compatibilidade:

<div id="disclaimer">
    <p>Compatível com a maioria das versões de Apple Watch.</p>
    <a href="#">
        Saiba mais sobre a compatibilidade de pulseiras ›</a>
</div>

Depois, criamos a seção de informações extras sobre o tamanho da pulseira:

<div id="info-extra">
    <h2>Tamanho da pulseira</h2>

    <div>
        <p>Tamanho único (cabe na maioria dos pulsos)</p>
        <p class="pequeno">Para pulsos de 145 a 220 mm.</p>
    </div>
</div>

E aplicamos a estilização:

#info-extra{
    display:flex;
    flex-direction: column;
    gap:10px;
}

.pequeno{
    font-size: 12.8px;
    color:#6e6e73;
}

O seletor #info-extra organiza informações adicionais em coluna usando Flexbox, com espaçamento uniforme para melhor leitura. Já a classe .pequeno estiliza textos auxiliares com fonte menor e cor cinza suave, criando hierarquia visual sem competir com o conteúdo principal.

A seção de entrega combina um ícone SVG com informações textuais:

<div class="entrega">
    <svg viewBox="0 0 25 25" class="as-svgicon as-svgicon-boxtruck as-svgicon-reduced as-svgicon-boxtruckreduced"
        role="img" aria-hidden="true" width="25">
        <path fill="none" d="M0 0h25v25H0z"></path>
        <path fill="#1d1d1f"
            d="m23.482 12.847-2.92-3.209A1.947 1.947 0 0 0 18.985 9H17V6.495a2.5 2.5 0 0 0-2.5-2.5h-11a2.5 2.5 0 0 0-2.5 2.5v9.75a2.5 2.5 0 0 0 2.5 2.5h.548A2.746 2.746 0 0 0 6.75 21.02 2.618 2.618 0 0 0 9.422 19h6.681a2.744 2.744 0 0 0 5.347-.23h.735A1.656 1.656 0 0 0 24 16.98v-2.808a1.937 1.937 0 0 0-.518-1.325ZM8.426 18.745a1.74 1.74 0 0 1-3.352 0 1.577 1.577 0 0 1 .015-1 1.738 1.738 0 0 1 3.322 0 1.578 1.578 0 0 1 .015 1ZM9.447 18a2.726 2.726 0 0 0-5.394-.255H3.5a1.502 1.502 0 0 1-1.5-1.5v-9.75a1.502 1.502 0 0 1 1.5-1.5h11a1.502 1.502 0 0 1 1.5 1.5V18Zm10.972.77a1.738 1.738 0 0 1-3.337 0 1.573 1.573 0 0 1 0-1 1.742 1.742 0 1 1 3.337 1ZM23 16.98c0 .569-.229.79-.815.79h-.735A2.73 2.73 0 0 0 17 16.165V10h1.986a.976.976 0 0 1 .838.314l2.927 3.214a.95.95 0 0 1 .249.644Zm-1.324-3.36a.512.512 0 0 1 .174.38h-3.306a.499.499 0 0 1-.544-.528V11h1.073a.76.76 0 0 1 .594.268Z">
        </path>
    </svg>

    <div class="informacoes-entrega">
        <p><b>Entrega:</b></p>
        <p>Em estoque</p>
        <p>Frete Grátis</p>
        <a href="#">Ver datas de entrega</a>
    </div>
</div>

Com o seguinte CSS:

.entrega {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.informacoes-entrega {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

O seletor .entrega usa Flexbox para alinhar ícone e textos lado a lado, com espaçamento e alinhamento pelo topo. Já .informacoes-entrega organiza os textos em coluna, com pequeno espaçamento entre as linhas para melhor leitura.

Logo abaixo da seção de entrega, adicionamos o botão de compra:

<button>Colocar na sacola</button>

button {
  background-color: #0071e3;
  color: white;
  font-size: 17.6px;
  border: none;
  padding: 8px 35px;
  align-self: start;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #057bf1;
}

O seletor button define a aparência do botão principal. A cor de fundo azul e o texto branco garantem contraste, enquanto o font-size maior destaca a ação. O border: none remove o estilo padrão do navegador e o padding aumenta a área clicável. O border-radius deixa o botão arredondado, cursor: pointer indica interatividade e align-self: start posiciona o botão no início do contêiner flex.

No seletor button:hover, a mudança da cor de fundo ao passar o mouse fornece um feedback visual simples e imediato para o usuário.

A seção para comprar depois é composta por um bloco de conteúdo informativo acompanhado de um link de ação com ícone SVG.

<div class="comprar-depois">
    <h2>Precisa de um tempo?</h2>

    <p>
        Mantenha todas as suas seleções salvando este aparelho em Itens
        salvos. Depois, você pode voltar quando quiser e continuar de
        onde parou.
    </p>

    <a class="salvar-depois" href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="1.5" stroke="currentColor" width="16" class="">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
        </svg>
        Salvar para depois</a>
</div>

Para estilizar essa seção, podemos utilizar o código CSS abaixo:

.comprar-depois{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.salvar-depois {
  display: flex;
  gap: 3px;
}

O seletor .comprar-depois utiliza Flexbox para organizar os elementos da seção em coluna, empilhando título, parágrafo e link, com espaçamento de 10px para manter uma boa organização visual.

Na lateral direita, são exibidas a imagem principal e as miniaturas. Por isso, dentro da <div> #vizualizacao, adicionamos a imagem principal e uma lista não ordenada com as demais opções de imagem.

<div id="visualizacao">
    <img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-1.jpeg" alt="Imagem Grande" />

    <ul id="selecionar-imagem">
        <li>
            <input type="radio" name="opcao-imagem" id="0-imagem" onclick="atualizarImagemSelecionada()" />
            <label for="0-imagem">
                <img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-0.jpeg" alt="Opção Imagem" />
            </label>
        </li>

        <li>
            <input type="radio" name="opcao-imagem" id="1-imagem" checked onclick="atualizarImagemSelecionada()" />
            <label for="1-imagem">
                <img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-1.jpeg" alt="Opção Imagem" />
            </label>
        </li>

        <li>
            <input type="radio" name="opcao-imagem" id="2-imagem" onclick="atualizarImagemSelecionada()" />
            <label for="2-imagem">
                <img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-2.jpeg" alt="Opção Imagem" />
            </label>
        </li>
    </ul>
</div>

Para estilizar essa seção, utilizamos o CSS abaixo:

#selecionar-imagem label img {
  width: 46px;
  cursor: pointer;
}

#selecionar-imagem {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.caixa-pequena {
  transform: scale(0.9);
}

#selecionar-imagem input[type="radio"]:checked+label {
    border-radius:0;
    border:none;
    border-bottom: solid 2px #cccccc;
}

O seletor #selecionar-imagem organiza as miniaturas em um layout horizontal usando flexbox, com espaçamento uniforme e alinhamento central. Já #selecionar-imagem label img define o tamanho das imagens e indica que elas são clicáveis por meio do cursor.

A classe .caixa-pequena reduz levemente o tamanho do elemento para criar variações visuais. Por fim, o seletor input[type="radio"]:checked + label destaca a miniatura selecionada com uma borda inferior, indicando visualmente a imagem ativa.

Conclusão

Você acabou de criar uma réplica visual completa da página do Apple Watch! Este projeto demonstra conceitos fundamentais de HTML e CSS que você pode aplicar em qualquer site moderno.

Se você quer ir além, temos um mini curso de HTML e CSS e um curso de FullStack. Além disso, se preferir esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula completa (mais de uma hora), o instrutor recria do zero a página do Apple Watch com HTML e CSS, um projeto prático para você treinar. Ele monta toda a estrutura em HTML e faz a estilização em CSS: centralizar e alinhar os elementos (com flexbox), espaçamentos, cores, bordas, border-radius e os detalhes que deixam a réplica fiel ao site original da Apple.

Neste vídeo (81 min):

• 0:00 - O projeto: recriar a página do Apple Watch com HTML e CSS.
• 12:00 - Centralizar e alinhar os elementos (align-items).
• 24:00 - Os espaçamentos entre os elementos.
• 48:00 - As cores e as opções de borda (solid, espessura).
• 72:00 - O gap, o border-radius e os detalhes finais.

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.