Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>Index Mirror Fashion</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\estilo.css">
    <link rel="stylesheet" type="text/css" href="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\css\reset.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
​
<body>
​
    <header class="container">
        <h1>
            <a href="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\index.html"><img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\logo.png" alt="logo mirror fashion"></a>
        </h1>
        <p id="sacola">Nenhum item na sacola de compras</p>
        <nav class="menu-opcoes">
            <ul>
                <li><a href="#">Sua Conta</a></li>
                <li><a href="#">Lista de Desejos</a></li>
                <li><a href="#">Cartão Fidelidade</a></li>
                <li><a href="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\sobre.hotel.html">Sobre</a></li>
                <li><a href="#">Ajuda</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="container-destaque">
        
        <section class="busca">
                <h2>Busca</h2>
                <form>  
                    <input type="Search">
                    <button>buscar</button>  <!--  id="lupa" type="button"><i class="fas fa-search"></i>   -->
                </form> 
        </section>
        <section class="menu-departamentos">
            <h2>DEPARTAMENTOS</h2>
            <nav>
                <ul>
                    <li><a href="#">BLUSAS E CAMISETAS</a></li>
                        <ul>
                            <li><a href="#">Manga Curta</a></li>
                            <li><a href="#">Manga Cumprida</a></li>         
                            <li><a href="#">Camisa Social</a></li>
                            <li><a href="#">Camisa Casual</a></li>  
                        </ul>       
                    <li><a href="#">CALÇAS</a></li>
                    <li><a href="#">SAIAS</a></li>
                    <li><a href="#">VESTIDOS</a></li>
                    <li><a href="#">SAPATOS</a></li>
                    <li><a href="#">BOLSAS E CARTEIRAS</a></li>
                    <li><a href="#">ACESSÓRIOS</a></li>
                </ul>
            </nav>
        </section>
        <section class="banner-destaque">
            <figure>
                    <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\destaque-home.png" alt="destaque-home">
            </figure>
        </section>
    </div>
​
​
​
​
​
​
​
    <div class="container paineis">
        <section class="painel novidades">
            <h2>Novidades</h2>  
                <ol>
                    <li>    <!-- PRIMEIRO PRODUTO-->
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto1-azul.png">
                                <figcaption>Blusinha Azul</figcaption>
                            </figure>
                        </a>
                    </li> <!-- FIM DO PRIMEIRO PRODUTO-->
                    <li>    <!-- SEGUNDO PRODUTO-->
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto1-rosa.png">
                                <figcaption>Blusina rosa</figcaption>
                            </figure>
                        </a>
                    </li> <!-- FIM DO SEGUNDO PRODUTO-->
                    <li>    
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto1-verde.png">
                                <figcaption>Blusinha Verde</figcaption>
                            </figure>
                        </a>
                    </li> 
                    <li>  
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto2-azul.png">
                                <figcaption>Blusinha Azul</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>    
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto2-rosa.png">
                                <figcaption>blusinha Rosa</figcaption>
                            </figure>
                        </a>
                    </li> 
                    <li>  
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto2-verde.png">
                                <figcaption>Blusinha Verde</figcaption>
                            </figure>
                        </a>
                    </li> 
                </ol>
        </section>      
        <section class="painel mais-vendidos">
            <h2>Mais Vendidos</h2>
                <ol>
                    <li>    <!-- PRIMEIRO PRODUTO-->
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto3-azul.png">
                                <figcaption>Jaqueta Azul</figcaption>
                            </figure>
                        </a>
                    </li> <!-- FIM DO PRIMEIRO PRODUTO-->
                    <li>    <!-- SEGUNDO PRODUTO-->
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto3-rosa.png">
                                <figcaption>Jaqueta rosa</figcaption>
                            </figure>
                        </a>
                    </li> <!-- FIM DO SEGUNDO PRODUTO-->
                    <li>    
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto3-verde.png">
                                <figcaption>Jaqueta Verde</figcaption>
                            </figure>
                        </a>
                    </li> 
                    <li>  
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto4-azul.png">
                                <figcaption>Blusa Azul</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>    
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto4-rosa.png">
                                <figcaption>Blusa Rosa</figcaption>
                            </figure>
                        </a>
                    </li> 
                    <li>  
                        <a href="#">
                            <figure>
                                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\produtos\foto5-azul.png">
                                <figcaption>Top Azul</figcaption>
                            </figure>
                        </a>
                    </li> 
                </ol>
        </section>
    </div>
​
    <footer>
        <div class="container">
            <figure>
                <img src="C:\Users\Rafael\Google Drive\Ecentry\Programação\Curso Caelum\mirrorfashion\img\logo-rodape.png" alt="logo">
            </figure>
            <ul class="social">
                <li><a href="http://facebook.com/mirrorfashion">facebook</a></li>
                <li><a href="http://twitter.com/mirrorfashion">twitter</a></li>
                <li><a href="http://plus.google.com/mirrorfashion">googleplus</a></li>
            </ul>
        </div>
    </footer>
​
​
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rafaelfranzoni01pro
0viewers