PROJETO FINALIZADO , ainda quero fazer outro arquivo .html e fazer as paginas extras | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

</head>
<body>
    <header> 
        <div class="caixa">
            <h1><img src="logo.png" class="logoprincipal"></h1>
            <nav>
                <ul">
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
                <li><a href="http://www.mimaquia.com.br">Site Oficial</a></li>
                </ul> 
            </nav>
        </div>
    </header>
    <div>
        <img src="banner.png" class="banner1">
    </div>
    <main>
        <ul class="produtos">
            <li>
                <h2>Milk Make</h2>
                <img src="produtos/1.png" class="produto1">
                <p>Copo de Milk Make da Moana</p>
                <p class="preco">R$ 49,90</p>
            </li>
            <li>
                <h2>Espatula de argila</h2>
                <img src="produtos/2.png" class="produto2">
                <p>Espatulá para Argila e cremes diversos</p>
                <p class="preco">R$ 9,90</p>
            </li>
            <li>
                <h2>Kit SkinCare</h2>
                <img src="produtos/3.png" class="produto3">
                <p>Kit de cuidados de SkinCare</p>
                <p class="preco">R$ 60,00</p>
            </li>
        </ul>
    </main>
    <footer>
        <img src="logo.png" class="logoDoRodape">
        <p class="copyright">&copy; mimaquia.com.br  Ltda</p>
        <p class="textorodape">Fundadora: Liliana dimas</p>
        <p class="textorodape">Co Fundador: Chico Sherman</p>
        <p class="textorodape">Tel: (21) 97065-5014</p>

    </footer>
</body>

header{ background: rgb(200, 100, 255); padding: 20px 0; } .caixa{ position: relative; width: 1080px; margin: 0 auto;

} nav{ position: absolute; top: 100px; right:0px; }

nav li{ display:inline; margin: 0 0 0 15px;

} nav a { text-transform: uppercase; color: rgb(0,0,0); font-weight: bold; font-size: 22px; text-decoration: none; } nav a:hover{ color: rgb(255,200,25); text-decoration: underline; }

.produtos{

width: 1080px;
margin: 20px auto;

} .produtos li { display:inline-block; width:30%; text-align:center; vertical-align:top; margin: 20px 1.5%; padding:20px 20px; box-sizing: border-box; border: 3px solid rgb(255,100,200); border-radius:15px;

} .produtos h2{ font-size: 20px; font-weight:bold; padding: 0 0 20px 0; animation:neon 2s infinite; } .produtos li:hover h2{ font-size:25px;

} .produtos p { font-style:italic; padding: 10px 0 0 0; }

.produtos li:active{ border-color:rgb(255,0,0);

} .preco { font-size:25px; font-weight:bold; font-style:italic; } .produto1{ width:90%; } .produto2{ width:90%; } .produto3{ width:90%; }

.logoprincipal{ width: 20%; padding:20px 0 20px 0; } .banner1{ display:block; text-align:center; margin: 20px auto;

} footer{ text-align:center; background:url("bg.png"); padding: 50px 0; } .logoDoRodape{ padding: 20px; auto; width:10%; } .textorodape{ color: rgb(219, 219, 219); font-size:13px; margin:5px; } .copyright{ font-size:20px; color:rgb(219, 219, 219);

}