index.html


<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./script.js" defer></script>
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
    <title>iPhone - Apple (Brasil)</title>
</head>
<body>
    <div class="menuSuperior">
        <img class="logo" src="./img/logo.png" alt="img-logo-apple" href="http://127.0.0.1:5500/index.html">
        <ul>
            <li>Mac</li>
            <li>iPhone</li>
            <li>iPad</li>
            <li>Watch</li>
            <li>Airpods</li>
            <li>Acessórios</li>
            <li>Suporte</li>
        </ul>
    </div>
    <div class="caixa">
        <div>
            <h1 class="titulo_iphone">iPhone 14</h1>
        
            <h2 class="subtitulo">Tão poderoso. Tão ao seu alcance...</h2>
            
            <p class="paragrafo">
                Em dois tamanhos perfeitos, agora com toque de amarelo.
            </p>

            <h3 class="preco">A partir de R$ 633,90/mês ou R$ 7.599,00</h3>
            
            
            <button class="botao_comprar">Comprar</button>
            
            <p class="escolha-cor">Escolha uma cor:</p>
            
            <span></span> </span>
            <div>
                <button onclick="trocaCor('#81a5c4'); trocaImagem('./img/iphone-azul.png')" class="azul troca-cor" ></button>
                <button onclick="trocaCor('#f7da47'); trocaImagem('./img/iphone-amarelo.png')" class="amarelo troca-cor" ></button>
                <button onclick="trocaCor('#c1c1c1'); trocaImagem('./img/iphone-branco.png')" class="branco troca-cor"></button>
                <button onclick="trocaCor('#272d33'); trocaImagem('./img/iphone-preto.png')" class="preto troca-cor"></button>
                <button onclick="trocaCor('#b50012'); trocaImagem('./img/iphone-vemelho.png')" class="vermelho troca-cor"></button>
                <button onclick="trocaCor('#ede7f1'); trocaImagem('./img/iphone-roxo.png')" class="roxo troca-cor"></button>
            </div>
        </div>
        <img id="iphone" src="./img/iphone-amarelo.png" alt="imagem-iPhone">
        <div class="circulo"></div>
        
    </div>
    
</body>
</html>