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>
 
#sacola{
    background-image: url("C:/users/rafael/google Drive/ecentry/programação/Curso Caelum/mirrorfashion/img/sacola.png");
    background-repeat: no-repeat;
    background-position: top right;
​
    font-size: 14px;
    padding-right: 35px;
    text-align: right;
    width: 260px; 
}
.menu-opcoes ul{
    font-size: 15px;
}
.menu-opcoes a {
    color: #003366;
}
body{
    font-family: "lucida Sans Unicode", "lucida Grande", "Sans Serif"; 
    width: 940px;
}
.menu-opcoes ul li{
    display: inline;   /* display inline é a forma de colocar o menu em linha. */
    margin-left: 20px;
}
#sacola{
    padding-top: 20px;
}
#lupa{
    position: absolute;
    top: 104px;
    left: 146px;
}
.container{
    margin: 0px;
    widows: 940px;
}
header{
    position: relative;
}
.menu-opcoes{
    position: absolute;
    bottom: 0px;
    right: 0px;
}
#sacola{
    position: absolute;
    top: 0px;
    right: 0px;
}
#menu{
    float: right;
    margin-top: 0px;
}
.busca, .menu-departamentos{
    float: left;
    clear: left;
}
.busca,
.menu-departamentos{
    background-color: #dcdcdc;
    /**font-weight: bold;*/
    margin-right: 10px;
    width: 230px;
}
.busca h2,
.busca form,
.menu-departamentos h2{
    margin: 10px;
}
.menu-departamentos li{
    background-color: white;
    margin-bottom: 1px;
    padding: 5px 10px;
}
.menu-departamentos a{
    color: #333;
    text-decoration: none;
}
.busca input[type=search]{
    width: 170px;
}
.busca button{
    background-image: url("C:/Users/Rafael/Google Drive/Ecentry/Programação/Curso Caelum/mirrorfashion/img/busca.png");
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    border: none;
    background-repeat: no-repeat;
}
.cantainer-destaque{
    margin-top: 10px;
}
.menu-departamentos{
    margin-top: 10px;
    padding-bottom: 10px;
}
.painel{
    margin: 10px 0px;
    padding: 10px;
    width: 445px;
}
.novidades{
    float: left;    
}
.mais-vendidos{
    float: right;
}
.painel li{
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    padding-top: 10px;
}
.painel img{
    width: 140px;       //*segundo a apostila o seletor deveria ser .painel li mas não funciona*/
}
/** até aqui deveria estar com as imagens já do tamanho certo */
.painel h2{
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.painel a{
    color: #333;
    font-size: 14px;
    text-decoration: none;
    text-align: center;         /** não está funcionando */
}
.novidades {
    background-color: #dcdcf5;
}
.mais-vendidos{
    background-color: #dcdcf5;
}
footer {
    background-image: url("C:/Users/Rafael/Google Drive/Ecentry/Programação/Curso Caelum/mirrorfashion/img/fundo-rodape.png");
}
.social a{
    width: 32px;
    height: 32px;
    display: block;
    text-indent: -999999px;
}
.social a[href*="http://facebook.com/mirrorfashion"]{
    background-image: url("C:/Users/Rafael/Google Drive/Ecentry/Programação/Curso Caelum/mirrorfashion/img/facebook.png");
​
}
.social a[href*="http://twitter.com/mirrorfashion"]{
    background-image: url("C:/Users/Rafael/Google Drive/Ecentry/Programação/Curso Caelum/mirrorfashion/img/twitter.png");
}
.social a[href*="http://plus.google.com/mirrorfashion"]{
    background-image: url("C:/Users/Rafael/Google Drive/Ecentry/Programação/Curso Caelum/mirrorfashion/img/googleplus.png");
}
footer{
    clear: both;
}
footer{
    padding: 20px 0;
}
footer .container{
    position: relative;
}
.social{
    position: absolute;
    top: 12px;
    right: 0;
}
.social li{
    float: left;
    margin-left: 25px;
}
.menu-opcoes a:hover{
    color: #007dc6;
}
.menu-opcoes a:active{
    color: RED;
}
.menu-departamentos li ul{
    display: none;
}
.menu-departamentos li:hover ul{
    display: block;
} 
.menu-departamentos ul ul li{
    background-color: #dcdcdc;
}
.menu-departamentos li li a:before {
    content: '- ';
}
 
​
Output

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

Dismiss x
public
Bin info
rafaelfranzoni01pro
0viewers