# Session One: Recomeçar Html autora: Letícia Rocha💕 [toc] ## Faixas do site > index.html ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../comum/comum.css"> <link rel="stylesheet" href="index.css"> <title>Home | Moonchain Capital</title> </head> <body> <div class="container-site"> <div class="faixa-1"> <div class="f1-cabecalho"> <div class="f1-logo"> <img src="../../assets/images/logo.webp"> <div>Moonchain Capital</div> </div> <div class="f1-menu"> <div class="f1-menu-item"> Home </div> <div class="f1-menu-item"> Services </div> <div class="f1-menu-item"> FAQ </div> <div class="f1-menu-item"> Contacts </div> <div class="f1-menu-item"> Subscribe </div> <div class="f1-menu-item"> <img src="../../assets/images/Facebook.webp"> </div> <div class="f1-menu-item"> <img src="../../assets/images/Twitter.webp"> </div> <div class="f1-menu-item"> <img src="../../assets/images/LinkedIn.webp"> </div> </div> </div> <div class="f1-conteudo"> <div class="f1-conteudo-textos"> <div class="f1-conteudo-titulo"> Cryptocurrency Consulting Services </div> <div class="f1-conteudo-descricao"> I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you. </div> <div class="f1-conteudo-botao"> <a href="#"> See our Services </a> </div> </div> <div class="f1-conteudo-imagem"> <img src="../../assets/images/mineracaodados.webp"> </div> </div> </div> </div> </body> </html> ``` > index.css ```css= .container-site { display: flex; flex-direction: column; font-family: Font3; font-size: 14px; } .faixa-1 { display: flex; flex-direction: column; padding: 30px 70px 150px 70px; } .f1-cabecalho { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .f1-logo { display: flex; flex-direction: row; align-items: center; } .f1-logo div { font: 22px Font1; } .f1-logo img { height: 80px; width: 80px; margin-right: 10px; } .f1-menu { display: flex; flex-direction: row; align-items: center; } .f1-menu-item { padding: 10px; cursor: pointer; } .f1-menu-item img { width: 20px; height: 20px; } .f1-conteudo { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0px 40px 0px 100px; } .f1-conteudo-textos { width: 500px; } .f1-conteudo-titulo { font: 50px Font1; color: #842AE3; line-height: 70px; } .f1-conteudo-descricao { font-size: 18px; line-height: 30px; margin: 40px 0px 60px 0px; } .f1-conteudo-botao a{ color:white; padding: 15px 20px; border-radius: 25px; background-color: #842AE3; cursor: pointer; } a:hover { background-color: #b074ec; transition: 0.3s; } .f1-conteudo-imagem img { width: auto; height: 740px; } ``` Perdi o que eu tinha feito sozinha😔. Fui fazendo olhando o vídeo que vc mandou, se não tiver problema...