# Session Two autor: Guilherme Oliveira Verissimo turma: InfoC número: 21 [toc] https://k6kf1.csb.app/src/pages/home/index.html #### HTML >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="index.css" /> <title>Home | Moonchain Capital</title> </head> <body> <div class="Container-Moonchain"> <div class="faixa-1"> <div class="cabecalho"> <div class="logo-icon"> <img class="logo" src="../../assets/images/logo.webp"/> <div class="texto-logo">Moonchain Capital</div> </div> <div class="links-cabecalho"> <div class="textos-links"> <div class="link">Home</div> <div class="link">Services</div> <div class="link">FAQ</div> <div class="link">Contact</div> <div class="link">Subscribe</div> </div> <div class="icons-links"> <img src="../../assets/images/facebook.webp"/> <img src="../../assets/images/twitter.webp"/> <img src="../../assets/images/linkedn.webp"/> </div> </div> </div> <div class="conteudo"> <div class="textos-conteudo"> <div class="titulo-faixa-1">Cryptocurrency <br> Consulting Services</div> <div class="descricao-faixa-1"> I'm a paragraph. Click here to add your own text and edit <br> me. Let your users get to know you. </div> <button class="botao-faixa-1">See Our Services</button> </div> <img src="../../assets/images/imagem.webp"/> </div> </div> <div class="faixa-2"> <div class="titulo-faixa-2"> Our Services </div> <div class="conteudo-faixa-2"> <div class="box-esquerda"> <div class="box-faixa-2"> <img src="../../assets/images/coin.webp"/> <div class="titulo-box"> Coin Acquisition </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> <div class="box-faixa-2"> <img src="../../assets/images/exchanges.webp"/> <div class="titulo-box"> Exchanges </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> </div> <div class="box-meio"> <div class="box-faixa-2"> <img src="../../assets/images/mining.webp"/> <div class="titulo-box"> Currency Mining </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> <div class="box-faixa-2"> <img src="../../assets/images/block.webp"/> <div class="titulo-box"> Blockchain Tech </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> </div> <div class="box-direita"> <div class="box-faixa-2"> <img src="../../assets/images/initial.webp"/> <div class="titulo-box"> Initial Coin Offerings </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> <div class="box-faixa-2"> <img src="../../assets/images/storing.webp"/> <div class="titulo-box"> Storing Your Coins </div> <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div> </div> </div> </div> <div> <button class="botao-faixa-2"> Contact Us Today </button> </div> </div> <div class="faixa-3"> <div class="textos-faixa-3"> <div class="titulo-faixa-3"> About Moonchain </div> <div class="sibtitulo-faixa-3"> Strategic Crypto Consultants Since 2015 </div> <div class="texto-faixa-3"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and <br> make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. </div> </div> <div class="conteudo-faixa-3"> <div class="box-esquerda"> <div class="box-faixa-3"> <div class="faixa2-imagem-1"> <img src="../../assets/images/jordan.webp"/> </div> <div class="faixa2-imagem-2"> <img src="../../assets/images/Jordan2.webp"/> </div> <div class="titulo-box-3"> Jordan Foster </div> <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div> </div> </div> <div class="box-meio"> <div class="box-faixa-3"> <div class="faixa2-imagem-1"> <img src="../../assets/images/jesse.webp"/> </div> <div class="faixa2-imagem-2"> <img src="../../assets/images/Jesse2.webp"/> </div> <div class="titulo-box-3"> Jesse Dunn </div> <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div> </div> </div> <div class="box-direita"> <div class="box-faixa-3"> <div class="faixa2-imagem-1"> <img src="../../assets/images/calvin.webp"/> </div> <div class="faixa2-imagem-2"> <img src="../../assets/images/Calvin2.webp"/> </div> <div class="titulo-box-3"> Calvin Wang </div> <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div> </div> </div> </div> </div> <div class="faixa-4"> <div class="conteudo-faixa-4"> <img class="icon-faixa-4" src="../../assets/images/aspas.webp"/> <div class="texto-faixa-4"> “I'm a testimonial. Click to edit me and add text that says something nice about you and your services. Let your customers <br> review you and tell their friends how great you are.” </div> <div class="texto-rodape"> Carl Calvert | Joji.set </div> </div> </div> <div class="faixa-5"> <div class="conteudo-faixa-5"> <div class="top-faixa-5"> <div class="titulo-faixa-5"> FAQ </div> <div class="descricao-faixa-5"> Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general. </div> </div> <div class="perguntas"> <div class="perguntas-faixa-5"> <div class="texto-1-faixa-5"> How do I buy cryptocurrency in my country? </div> <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div> </div> <div class="perguntas-faixa-5"> <div class="texto-1-faixa-5"> Do I have to pay taxes on any profits I make from Bitcoin? </div> <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div> </div> <div class="perguntas-faixa-5"> <div class="texto-1-faixa-5"> Is it possible to create my own cryptocurrency? </div> <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div> </div> </div> </div> </div> <div class="faixa-6"> <div class="conteudo-daixa-6"> <div class="titulo-faixa-6"> Contact </div> <div class="inputs"> <div class="inputs-top-faixa-6"> <input placeholder="Name"/> <input class="input-email" placeholder="Email"/> </div> <div class="inputs-bottom-faixa-6"> <input placeholder="Subject"/> <textarea placeholder="Type your message here"></textarea> <div class="botao-config"> <button> Submit </button> </div> </div> </div> </div> </div> <div class="faixa-7"> <div class="titulo-faixa-7"> Subscribe to Our Newsletter </div> <div class="inputs/botao"> <div class="inputs-top-faixa-7"> <input placeholder="Name"/> <input class="input-email" placeholder="Email Address"/> <div class="botao-config"> <button class="botao-faixa-7"> Submit </button> </div> </div> </div> <div class="textos-faixa-7"> <div class="subtitulo-faixa-7"> Moonchain Capital </div> <div class="informacoes"> info@mysite.com <br> 123-456-7890 <br> 500 Terry Francois Street San Francisco, CA 94158 </div> </div> <div class="icons-faixa-7"> <img src="../../assets/images/facebook.webp"/> <img src="../../assets/images/twitter.webp"/> <img src="../../assets/images/linkedn.webp"/> </div> </div> <div class="mini-faixa-8"> <div class="texto-faixa-8"> ©2023 by Moonchain Capital. <br> Proudly created with Wix.com </div> </div> </div> </body> </html> ``` #### CSS COMPLETO >index.css ```css= @font-face { font-family: a; src: url('../../assets/fonts/a.woff2'); } @font-face { font-family: b; src: url('../../assets/fonts/b.woff'); } @font-face { font-family: c; src: url('../../assets/fonts/c.woff2'); } @font-face { font-family: d; src: url('../../assets/fonts/d.woff2'); } .cabecalho { display: flex; justify-content: space-between; margin: 30px 70px; } .logo-icon { display: flex; flex-direction: row; } .texto-logo { margin-top: 27px; margin-left: 19px; font-size: 22px; font-family: a; color: #181818; } .links-cabecalho { margin-right: 10px; display: flex; flex-direction: row; } .textos-links, .icons-links { margin-top: 27px; } .textos-links { display: flex; flex-direction: row; } .link { margin: 0px 10px; font-family: b; font-size: 14px; color: #2d2d2d; } .icons-links img { margin-left: 2px; margin-right: 2px; } .icons-links { margin-top: 25px; } .conteudo { display: flex; justify-content: space-evenly; margin-left: 40px; font-family: b; } .textos-conteudo { margin-top: 205px; } .titulo-faixa-1 { font-family: a; font-size: 50px; color: #842ae3; } .descricao-faixa-1 { font-family: b; margin-top: 30px; font-size: 18px; color: #181818; } .conteudo button { margin-top: 51px; background-color: #842ae3; border: none; font-size: 14px; border-radius: 22px; padding: 15px 20px; color: white; } /*faixa-2*/ .faixa-2 { display: flex; flex-direction: column; align-items: center; margin-top: 145px; padding-top: 120px; background-color: #eeeeee; width: 1580px; height: 1090px; margin-left: -5px; } .titulo-faixa-2 { font-size: 28px; font-family: a; color: #842ae3; } .conteudo-faixa-2 { display: flex; flex-direction: row; margin-top: 110px; } .box-faixa-2 { text-align: center; margin-left: 51px; margin-right: 51px; margin-bottom: 73px; } .titulo-box { font-size: 20px; margin-top: 60px; color: #842ae3; font-family: b; } .texto-box { font-size: 14px; margin-top: 40px; line-height: 25px; color: #181818; font-family: b; } .faixa-2 button { margin-top: 51px; background-color: #842ae3; border: none; font-size: 14px; border-radius: 22px; padding: 15px 20px; color: white; } .faixa2-imagem-2 { display: none; } /*faixa-3*/ .faixa-3 { margin-top: 120px; display: flex; flex-direction: column; text-align: center; align-items: center; } .titulo-faixa-3 { font-size: 40px; font-family: a; color: #842ae3; } .sibtitulo-faixa-3 { margin-top: 39px; font-size: 18px; color: #181818; font-style: italic; font-family: b; } .texto-faixa-3 { font-size: 15px; line-Height: 28px; color: #181818; margin-top: 35px; font-family: b; } .conteudo-faixa-3 { display: flex; flex-direction: row; text-align: center; margin-top: 100px; } .box-faixa-3 { margin-left: 20px; margin-right: 20px; } .titulo-box-3 { color:#842ae3; font-size: 22px; font-family: a; margin-top: 50px; } .texto-box-3 { font-size: 15px; line-Height: 28px; margin-top: 35px; font-family: b; color: #181818; } /*faixa-4*/ .faixa-4 { margin-top: 160px; text-align: center; font-family: b; background-color: #27f5ce; width: 1580px; height: 528px; margin-left: -5px; } .conteudo-faixa-4 img { margin-top: 148px; } .conteudo-faixa-4 { margin-right: 4px; } .texto-faixa-4 { margin-top: 70px; line-height: 25px; color: #181818; font-size: 14px; } .texto-rodape { margin-top: 40px; color: #181818; font-size: 15px; } /*faixa-5*/ .faixa-5 { background-color: #eeeeee; width: 1580px; height: 1090px; display: flex; flex-direction: row; justify-content: center; margin-left: -5px; } .titulo-faixa-5 { font-size: 40px; color: #842ae3; font-family: c; padding-top: 135px; } .top-faixa-5 { text-align: center; } .descricao-faixa-5 { font-size: 18px; color: #181818; font-family: b; margin-top: 35px; } .perguntas { margin-top: 130px; margin-left: -21; } .texto-1-faixa-5 { font-size: 22px; color: #842ae3; font-family: a; margin-bottom: 42px; } .texto-2-faixa-5 { line-height: 28px; font-size: 15px; color: #181818; font-family: b; margin-bottom: 68px; } /*faixa-6*/ .faixa-6 { display: flex; justify-content: center; } .titulo-faixa-6 { font-size: 40px; color: #842ae3; font-family: a; margin-top: 120px; text-align: center; } .inputs-top-faixa-6 input { border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 1px solid black; width: 465px; height: 42; font-size: 15px; } .inputs-bottom-faixa-6 input { border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 1px solid black; width: 940px; height: 42; font-size: 15px; margin-top: 10px; } .input-email { margin-left: 6px; } .inputs-bottom-faixa-6 { display: flex; flex-direction: column; } .inputs-bottom-faixa-6 button{ width: 940px; height: 50; border: none; background-color: #181818; color: white; font-family: b; font-size: 18px; margin-top: 40px; } textarea { border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 1px solid black; width: 940px; height: 126px; resize: none; font-size: 15px; font-family: b; color: #181818; margin-top: 23px; } ::-webkit-input-placeholder { color: #181818; } /*faixa-7*/ .faixa-7 { text-align: center; } .titulo-faixa-7 { color: #842ae3; font-size: 40px; font-family: a; margin-top: 150px; } .inputs-top-faixa-7 input { border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 1px solid black; width: 409px; height: 35; font-size: 15px; margin-top: 160px; } .faixa-7 button { background-color: #181818; color: white; font-family: b; font-size: 18px; border: none; padding: 7px 23px; } .subtitulo-faixa-7 { font-size: 22px; color: #181818; font-family: a; margin-top: 150px; } .informacoes { font-size: 15px; font-family: b; color: #181818; line-Height: 28px; margin-top: 28px; } .icons-faixa-7 { margin-top: 27px; } /*faixa-8*/ .mini-faixa-8 { background-color:#eeeeee; width: 1580px; height: 70px; margin-left: -5px; } .texto-faixa-8 { padding-top: 7px; font-size: 15px; font-family: b; color: #181818; line-Height: 28px; margin-top: 28px; text-align: center; } @media (max-width: 1024px) { .Container-Moonchain { height: auto; width: 100vw; } /*faixa1*/ .cabecalho, .logo-icon, .links-cabecalho, .textos-links, .icons-links, .conteudo, .textos-conteudo { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0px; margin: 0px; width: 100vw; } .faixa-1 { height: auto; width: 100vw; } .logo-icon img { width: 5em; margin-top: 2em; } .conteudo img { width: 90vw; } .texto-logo { font-size: 1.8em; } .textos-links { display: none; } .icons-links img { width: 2.2em; margin-top: 3em; } .titulo-faixa-1 { margin-top: 1.6em; font-size: 2em; } .descricao-faixa-1 { font-size: 1.2em; } .faixa-1 button { padding: 1.3em 2em; font-size: 0.9em; border-radius: 2em; } /*faixa2*/ .faixa-2 { height: auto; width: 100%; background-size: 100vw; } .conteudo-faixa-2 { display: flex; flex-direction: column; } .titulo-faixa-2 { font-size: 1.8em; } .box-faixa-2 img { width: 5em; } .titulo-box { font-size: 1.5em; } .texto-box { font-size: 1.1em; } .faixa-2 button { padding: 1.3em 2em; font-size: 0.9em; border-radius: 2em; margin-bottom: 4em; } /*faixa3*/ .faixa-3 { height: auto; width: 100vw; } .conteudo-faixa-3 { display: flex; flex-direction: column; } .titulo-faixa-3 { font-size: 2em; } .sibtitulo-faixa-3 { font-size: 1.1em; } .texto-faixa-3 { font-size: 1.1em; } .faixa2-imagem-1 { display: none; } .faixa2-imagem-2 { display: block; } .faixa2-imagem-2 img { width: 100vw; margin-top: 5em; } .titulo-box-3 { font-size: 1.5em; } .texto-box-3 { font-size: 1.2em; line-Height: 2em; margin-bottom: -2em; } /*faixa4*/ .faixa-4 { height: auto; width: 100vw; } .faixa-4 img { width: 5em; margin-top: 3em; } .texto-faixa-4 { font-size: 1em; } .texto-rodape { font-size: 1.2em; padding-bottom: 2.6em; } /*faixa5*/ .faixa-5 { height: auto; width: 100vw; } .titulo-faixa-5 { font-size: 2em; margin-top: -2em; } .descricao-faixa-5 { font-size: 1.2em; line-Height: 1.8em; } .perguntas { padding-left: 1.7em; } .texto-1-faixa-5 { font-size: 1.7em; } .texto-2-faixa-5 { font-size: 1.1em; line-Height: 1.8em; } /*faixa6*/ .faixa-6 { height: auto; width: 100vw; display: flex; justify-content: center; } .titulo-faixa-6 { font-size: 2em; } .inputs input { display: flex; flex-direction: column; width: 90vw; font-size: 1.2em; border-bottom: 1px solid black; margin-top: 2em; } .input-email { margin-left: 0.1em; } .inputs-bottom-faixa-6 textarea { width: 90vw; font-size: 1.2em; margin-top: 1em; } .inputs-bottom-faixa-6 button { width: 14em; height: 2.2em; font-size: 1.5em; margin-top: 2em; } /*faixa7*/ .faixa-7 { height: auto; width: 100vw; } .titulo-faixa-7 { font-size: 2em; } .inputs-top-faixa-7 { display: flex; flex-direction: column; margin-left: 0.8em; margin-left: 2em; } .inputs-top-faixa-7 input { display: flex; flex-direction: column; width: 90vw; font-size: 1.2em; border-bottom: 1px solid black; margin-top: 2em; } .inputs-top-faixa-7 button { width: 14em; height: 2em; font-size: 1.5em; margin-top: 2em; } .botao-config { display: flex; justify-content: center; } .subtitulo-faixa-7 { font-size: 1.8em; } .informacoes { font-size: 1.1em; line-height: 2.5em; } .icons-faixa-7 img { width: 2em; } /*faixa8*/ .mini-faixa-8 { height: auto; width: 100vw; } .texto-faixa-8 { font-size: 1em; line-Height: 1.7em; padding-top: 1.1em; } } ``` #### CSS @MEDIA ```css= @media (max-width: 1024px) { .Container-Moonchain { height: auto; width: 100vw; } /*faixa1*/ .cabecalho, .logo-icon, .links-cabecalho, .textos-links, .icons-links, .conteudo, .textos-conteudo { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0px; margin: 0px; width: 100vw; } .faixa-1 { height: auto; width: 100vw; } .logo-icon img { width: 5em; margin-top: 2em; } .conteudo img { width: 90vw; } .texto-logo { font-size: 1.8em; } .textos-links { display: none; } .icons-links img { width: 2.2em; margin-top: 3em; } .titulo-faixa-1 { margin-top: 1.6em; font-size: 2em; } .descricao-faixa-1 { font-size: 1.2em; } .faixa-1 button { padding: 1.3em 2em; font-size: 0.9em; border-radius: 2em; } /*faixa2*/ .faixa-2 { height: auto; width: 100%; background-size: 100vw; } .conteudo-faixa-2 { display: flex; flex-direction: column; } .titulo-faixa-2 { font-size: 1.8em; } .box-faixa-2 img { width: 5em; } .titulo-box { font-size: 1.5em; } .texto-box { font-size: 1.1em; } .faixa-2 button { padding: 1.3em 2em; font-size: 0.9em; border-radius: 2em; margin-bottom: 4em; } /*faixa3*/ .faixa-3 { height: auto; width: 100vw; } .conteudo-faixa-3 { display: flex; flex-direction: column; } .titulo-faixa-3 { font-size: 2em; } .sibtitulo-faixa-3 { font-size: 1.1em; } .texto-faixa-3 { font-size: 1.1em; } .faixa2-imagem-1 { display: none; } .faixa2-imagem-2 { display: block; } .faixa2-imagem-2 img { width: 100vw; margin-top: 5em; } .titulo-box-3 { font-size: 1.5em; } .texto-box-3 { font-size: 1.2em; line-Height: 2em; margin-bottom: -2em; } /*faixa4*/ .faixa-4 { height: auto; width: 100vw; } .faixa-4 img { width: 5em; margin-top: 3em; } .texto-faixa-4 { font-size: 1em; } .texto-rodape { font-size: 1.2em; padding-bottom: 2.6em; } /*faixa5*/ .faixa-5 { height: auto; width: 100vw; } .titulo-faixa-5 { font-size: 2em; margin-top: -2em; } .descricao-faixa-5 { font-size: 1.2em; line-Height: 1.8em; } .perguntas { padding-left: 1.7em; } .texto-1-faixa-5 { font-size: 1.7em; } .texto-2-faixa-5 { font-size: 1.1em; line-Height: 1.8em; } /*faixa6*/ .faixa-6 { height: auto; width: 100vw; display: flex; justify-content: center; } .titulo-faixa-6 { font-size: 2em; } .inputs input { display: flex; flex-direction: column; width: 90vw; font-size: 1.2em; border-bottom: 1px solid black; margin-top: 2em; } .input-email { margin-left: 0.1em; } .inputs-bottom-faixa-6 textarea { width: 90vw; font-size: 1.2em; margin-top: 1em; } .inputs-bottom-faixa-6 button { width: 14em; height: 2.2em; font-size: 1.5em; margin-top: 2em; } /*faixa7*/ .faixa-7 { height: auto; width: 100vw; } .titulo-faixa-7 { font-size: 2em; } .inputs-top-faixa-7 { display: flex; flex-direction: column; margin-left: 0.8em; margin-left: 2em; } .inputs-top-faixa-7 input { display: flex; flex-direction: column; width: 90vw; font-size: 1.2em; border-bottom: 1px solid black; margin-top: 2em; } .inputs-top-faixa-7 button { width: 14em; height: 2em; font-size: 1.5em; margin-top: 2em; } .botao-config { display: flex; justify-content: center; } .subtitulo-faixa-7 { font-size: 1.8em; } .informacoes { font-size: 1.1em; line-height: 2.5em; } .icons-faixa-7 img { width: 2em; } /*faixa8*/ .mini-faixa-8 { height: auto; width: 100vw; } .texto-faixa-8 { font-size: 1em; line-Height: 1.7em; padding-top: 1.1em; } } ```
{"metaMigratedAt":"2023-06-16T00:09:48.723Z","metaMigratedFrom":"Content","title":"Session Two","breaks":true,"contributors":"[{\"id\":\"31e7052c-d777-4fb0-b189-63fab945e035\",\"add\":25694,\"del\":0}]"}
Expand menu