Web - HackMD

# Web Autor: Eduardo Mendes Meireles [toc] ## Faixa1 https://reactnative.dev/ > 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>reactnative</title> </head> <body> <div class="container"> <div class="Faixa1"> <figure class="Figura1"> <img class="Borda" src="Borda.png"/> <img class="Borda2" src="Borda 2.png"/> <img class="Tela" src="Tela top.png"/> <img class="Texto" src="Texto.png"/> </figure> <div class="Caixa1" > <div class="Titulo1"> <h2> Native Development For Everyone </h2> </div> <div class="Texto1"> <p> React Native lets you create truly native apps and doesn't compromise your users' experiences. It provides a core set of platform agnostic native components like View, Text, and Image that map directly to the platform’s native UI building blocks. </p> </div> </div> </div> <div class="Faixa2"> <div class="Caixa2"> <div class="Titulo2"> <h2> Seamless Cross-Platform </h2> </div> <div class="Texto2"> <p>React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.</p></div> </div> <svg viewBox="0 0 498 452" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect height="141" rx="10" stroke="#979797" stroke-width="3" width="183" x="48.5" y="123.5"></rect><path d="M207.75 67.246l-.5.865-14 24.25" stroke="#999" stroke-width="6"></path><path d="M186.673 101.593c.05 1.106.884 1.59 1.87 1.08l10.448-5.416c1.961-1.017 2.005-2.733.094-3.836l-9.67-5.584c-1.91-1.102-3.376-.212-3.276 2z" fill="#999"></path><path d="M117.428 278.254l-.499.864-14 24.25" stroke="#999" stroke-width="6"></path><path d="M96.351 312.6c.05 1.106.884 1.591 1.87 1.08l10.448-5.416c1.961-1.017 2.006-2.733.095-3.836l-9.672-5.584c-1.908-1.102-3.375-.212-3.274 2z" fill="#999"></path><path d="M255.25 67.246l.5.865 14 24.25" stroke="#999" stroke-width="6"></path><path d="M276.327 101.593c-.05 1.106-.884 1.59-1.87 1.08l-10.448-5.416c-1.961-1.017-2.005-2.733-.094-3.836l9.67-5.584c1.91-1.102 3.376-.212 3.276 2z" fill="#999"></path><path d="M164.928 278l.5.865 14 24.25" stroke="#999" stroke-width="6"></path><path d="M186.005 312.347c-.05 1.105-.884 1.59-1.87 1.08l-10.448-5.417c-1.96-1.016-2.005-2.732-.094-3.836l9.67-5.583c1.91-1.102 3.376-.212 3.276 2z" fill="#999"></path><g transform="translate(169)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="33.486" y="33">App.js</tspan></text></g><g transform="translate(56 198)"><rect height="54" rx="8" stroke="#4077f7" width="167" x="1.5" y="0.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="27.477" y="33">Header.ios.js</tspan></text></g><g transform="translate(56 134)"><rect height="54" rx="8" stroke="#0ca40d" width="167" x="0.5" y="0.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="8.458" y="33">Header.android.js</tspan></text></g><g transform="translate(258 122)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="28.986" y="33">Body.js</tspan></text></g><g transform="translate(0 325)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="37.986" y="33">Image</tspan></text></g><g transform="translate(151 325)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 191)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 260)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 329)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 397)"><rect height="52" rx="8" stroke="#999" stroke-width="3" width="123" x="1.5" y="1.5"></rect><text fill="#3d3d3d" font-family="Helvetica" font-size="18"><tspan x="45.497" y="33">Text</tspan></text></g><path d="M318.5 186.5v241h6v-241z" fill="#999"></path><g><path d="M323 218.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 217.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 356.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 355.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 287.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 286.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g><g><path d="M323 423.5h29" stroke="#999" stroke-width="6"></path><path d="M363.284 422.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836z" fill="#999"></path></g></g></svg> </div> </body> </html> ``` > index.css ```css= @font-face{ font-family: Roboto; src: url("Fonte"); } body { font-family: Roboto; } .Figura1 { display: flex; } .Borda { width:400px; height:515.61px; } .Borda2 { width:400px; height:515.61px; margin: 0px 0px 0px -400px; } .Tela { width:400px; height:515.61px; margin: 0px 0px 0px -400px; } .Texto { margin: 0px 0px 0px -400px; width:400px; height:515.61px; } .Faixa1 { display: flex; flex-direction: row; width:1364px; height:351px; padding: 50px 0px; margin-left: 180px; } .Caixa1 { margin-top: 90px; margin-left: 200px; } .Titulo1 { margin: 0px 0px 20px; } .Faixa2 { display: flex; flex-direction: row; background-color: rgb(235, 235, 235); position: absolute; width:1600px; height:375px; margin-top:-38px; } .Texto2 { width:370px; height:350px; font-size: 17px } svg { width:400px ; height:365px; margin-top: 5px; margin-left: 250px; } .Caixa2 { margin-left: 300px; margin-top: 30px; } .Texto1 { width:350px; height:360px; font: roboto; display: flex; margin-top: -20px; } ```` ## Faixa2 https://www.typingclub.com/ ```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"> </head> <body> <div class="container"> <div class="image"> <img src="IMG TYPING CLUB.svg" width="240"/> </div> <div class="texto"> <div class="desct-t"> THE AMAZING </div> <div class="titulo"> <h1> TypingClub School Edition </h1> </div> <div class="desc"> <p> TypingClub School Edition is the most powerful and popular software used by teachers, schools and districts. </p> </div> <button class="botao"> learn more </button> </div> </div> </body> </html> ``` > index.css ```css= .container { display: flex; flex-direction: row; background-color: #262f36; padding: 100px 0px; size: 16px; } .texto { color: white; margin-left: 100px; } .image { margin-left: 500px; } .desc { margin-bottom: 30px; } button { font-size: 15px; padding: 12px 30px; width: 200px; height: 50px; background-color: white; border: solid; border: white; border-radius: 8px; } ``` ## Faixa3 https://www.figma.com/ >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>Static Template</title> </head> <body> <div class="Container"> <div class="Faixa1"> <div class="Texto"> <h1> Try Figma for free </h1> </div> <div class="Google"> <button type="button"> <span> <svg class="svg" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill-rule="evenodd" fill-opacity="1" fill="#4285f4" stroke="none"></path><path d="M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z" fill-rule="evenodd" fill-opacity="1" fill="#34a853" stroke="none"></path><path d="M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill-rule="evenodd" fill-opacity="1" fill="#fbbc05" stroke="none"></path><path d="M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.002 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z" fill-rule="evenodd" fill-opacity="1" fill="#ea4335" stroke="none"></path></svg> </span> <p1 class="tx-botao">Sign up with Google </p1> </button> </div> <div class="Texto2"> <p1> or </p1> </div> <div class="Email"> <input type="email" placeholder="email"> </div> <div style="height: 24px;"></div> <div class="Senha"> <input type="password" placeholder="password"> </div> <div style="height: 32px;"></div> <div class="Botao-Criar"> <button type="button"> <span> Create account </span> </button> </div> <div style="height: 32px;"></div> <div class="desc1"> <p1> Sign up with SAML SSO </p1> </div> <div style="height: 16px;"></div> <div class="desc2"> <div class="account"> Already have an account? <span class="login"> Log in </span> </div> </div> <div style="height: 32px;"></div> <div class="desc3"> <p1 class="termos">This site is protected by reCAPTCHA and the Google <span> Privacy Policy </span> and of <span> Service apply.</span> </p1> </div> </div> </div> </body> </html> ``` >index.css ```css= @font-face { font-family: Bold; src: url('Whyte-Bold.woff'); } @font-face { font-family: Regular; src: url('Whyte-Regular.woff'); } body { font-family: Regular; } .Container { width: 1240.91px; height: 880.91; } .Faixa1 { text-align: center; } .Google button { width: 348.01px; height: 48px; border: solid; border-radius: 7px; padding: 0px 20px; background-color: #ffffff; } .tx-botao { font-size: 16px; } .Texto2 { font-size: 16px; width: 348.01; height: 40px; margin-top: 20px; color: #666666 } .Email input{ width: 320.01px; height: 42px; border: solid; border-radius: 7px; padding: 0px 6px 0px 12px; background-color: #ffffff; font-size: 15px } .Senha input{ width: 320.01px; height: 42px; border: solid; border-radius: 7px; padding: 0px 6px 0px 12px; background-color: #ffffff; font-size: 15px; } .Botao-Criar button{ width: 340.01px; height: 46px; border: solid; border-radius: 7px; padding: 0px 6px 0px 12px; background-color: #000000; font-size: 18px; margin: 12px 0px 0px; padding: 0px 20px } .Botao-Criar span { color: #ffffff } .desc1 { color: #5551ff; font-size: 15px } .desc1 :hover{ text-decoration: underline; } .account { color: #00000099 } .login { color: #5551ff } .termos span { color: #5551ff; } .termos span :hover { text-decoration: underline !important; } .termos { color: #333333; width: 200.01; height: 30.91; } ``` ## Faixa4 https://www.figma.com/ >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>Figma</title> </head> <body> <div class="container"> <div class="Faixas"> <div class="Faixa-esquerda"> <div class="img_fx-esquerda"> <img src="https://www.figma.com/static/collaboration-bg-3ed6959fa5542100a98c7c8183fc0b41.png" height="603.99" width="590.09"/> </div> </div> <div class="Faixa-direita"> <div class="Texto-direita"> <p class="introducao"> Colaboration </p> <h1 class="title"> Team up to move even faster </h1> <p class="Texto-direita-2"> Share a link to your design files or prototypes, and get feedback in context. Or, jump into the same file with your teammates—no matter where y’all are in the world—and co-edit live.</p> <button class="botao" > Work Together</button> </div> </div> </div> </div> </body> </html> ``` >index.css ```css= @font-face { font-family: Grande; src: url('Whyte-Bold.woff2') } @font-face { font-family: Regular; src: url('Whyte-Regular.woff2') } .Faixas { display: flex; flex-direction: row; margin: 0px 143.351px 0px 143.333px; } .container { height: 846.06; width: 1516.76px; background-color: #FFC700; padding: 128px 32px; } .Faixa-direita { display: flex; margin: 0px 0px 0px 100px; width: 485.99px; height: 590.1px; } .title { height: 190.91px; width: 450px; font-size: 64px; line-height: 50px; font-family: Grande; } .introducao { height: 28px; width: 485.99; font-size: 22px; font-family: Regular; } .Texto-direita-2 { height: 112px; width: 485.99px; font-size: 22px; font-family: Regular; } .botao { width: 191.48px; height: 53.25; font-size: 18px; margin: 30px 0px 0px 0px; background-color: #FFC700; border: solid; border-radius: 5px; padding: 12px 24px 16px; font-family: Grande } ``` ## Faixa5 https://about.twitter.com/ >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"> </head> <body> <div class="container"> <!-A FONTE DO SITE TA PRIVADA, NÃO CONSEGUIR BAIXAR-> <div class="caixa1"> <div class="texto"> <h1>Twitter is what’s happening and what people are talking about right now. </h1> </div> <button class="buttom"> Go to Twitter.com </button> </div> </div> </body> </html> ``` >index.css ```css= body { background-image: url("fundoAzul.jpg"); background-size: 100%; } .container { padding-left: 400px; padding-top: 220px } .texto { font-size: 40px; width: 860px; line-height: 70px } button { font-size: 18px; padding: 14px 24px; background-color: black; color: white; border: solid; border-radius: 50px; } ``` ## Faixa6 https://aws.amazon.com/pt/ >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>Static Template</title> </head> <body> <div class="container"> <div class="faixa1"> <div class="titulo-fx1"> <h1> Soluções de nuvem híbrida da AWS </h1> </div> <div class="desc-fx1"> <p> Experiência consistente em toda a AWS e nos ambientes on-premises </p> </div> </div> <div class="faixa2"> <div class="caixa1"> <div class="imagem"> <img src="VMWareCloud.png"/> </div> <div class="titulo-fx2"> <h1> Cloud on AWS </h1> </div> <div class="desc-fx2"> <p> Migre e amplie ambientes VMware para a Nuvem AWS </p> </div> </div> <div class="caixa2"> <div class="imagem"> <img src="AWSOutposts.png"/> </div> <div class="titulo-fx2"> <h1> AWS Outposts </h1> </div> <div class="desc-fx2"> <p> Execute a infraestrutura da AWS on-premises para ter uma experiência híbrida verdadeiramente consistente </p> </div> </div> </div> </div> </body> </html> ``` >index.css ```css= body { background-image: url('FundoAzul.png'); background-repeat: no-repeat; background-size: 100%; text-align: center; } .container { padding-top: 40px; flex-wrap: wrap; } } .faixa1 { text-align: center } .faixa2 { display: flex; flex-direction: row; text-align: center; margin-left: 430px; } .titulo-fx1 { color: #ffffff; margin: 40px 0px 15px; size: 36px; } .desc-fx1 { color: #ffffff; size: 20px; } .titulo-fx2 { color: #ffffff; size: 20px; } .desc-fx2 { color: #ffffff; size: 16px; width: 445px; height: 50px; } .caixa1 { text-align: center; padding: 15px 45px 15px 20px; display: flex; flex-direction: column } .caixa2 { text-align: center; padding: 15px 20px 15px 45px; } ``` ## Faixa7 https://dotnet.microsoft.com/ >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>Static Template</title> </head> <body> <div class="container"> <div class="Faixa1"> <div class="imagem"> <img src="Teclado.svg"> </div> <div class="Texto"> <div class="Titulo"> <h2> Thank You to All the Contributors </h2> </div> <div class="descricao"> <p> .NET is open source and we are very thankful for the many contributions it receives from the community. </p> </div> <div style="height: 30px"> </div> <button class="botao"> See the Contributors </button> </div> </div> <div class="faixa2"> <div class="imagens"> <div class="imagem1"> <img src="chipotle.png" width="176.55" height="40"> </div> <div class="imagem1"> <img src="ampas.png" width="52.81" height="60"> </div> <div class="imagem1"> <img src="ge-aviation.png" width="150.28" height="50"> </div> <div class="imagem1"> <img src="ups.svg" width="50" height="60"> </div> <div class="imagem1"> <img src="stackoverflow.svg" width="204" height="40"> </div> </div> </div> </div> </div> </body> </html> ``` >index.css ```css= .Titulo h2{ width: 300px; margin: 0px 0px 8px; color: #212529; font-size: 32px; font-family: Normal; } .descricao { margin: 0px 0px 20px; font-size: 15px; width: 320px; font-family: Normal; } .botao { background-color: #bb000000; border-color: #512bd4; color: #512bd4; padding: 6px 12px; width: 172.75; height: 38; font-size: 16px; border: solid; border-width: 1px; font-family: Normal; } .Texto { margin-top: 50px; margin-left: 90px; } .imagem1 { margin: 0px 30px ; } .imagens { justify-content: space-around; display: flex; } ``` ## Faixa8 https://angular.io/ >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"> <title>Angular2</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="Container"> <div class="Faixa1"> <div class="Texto1"> <div class="Titulo1"> <h1> LOVED BY MILLIONS </h1> </div> <div class="Descricao1"> From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications. </div> </div> <div class="Imagem1"> <img src="loved-by-millions.svg" alt="angular on the map" width="455" height="228"> </div> </div> <div class="Faixa2"> <div class="Imagem2"> <img src="code-icon.svg" alt="Get Started with Angular" width="70" height="70"> </div> <div class="Texto2"> <div class="Titulo2"> <h1> TRY IT NOW </h1> </div> <div class="Descricao2"> Explore Angular's capabilities with a ready-made sample app. No setup required. </div> </div> </div> </div> </body> </html> ``` >index.css ```css= @font-face { font-family: Fina; src: url('Fina.woff2'); } @font-face { font-family: Grossa; src: url('Grossa.woff2') } @font-face { font-family: extra; src: url('Extra.woff2') } .Conteiner { align-content: center; margin-left: 400px; } .Faixa1 { display: flex; flex-direction: row; margin: 32px 210.5px; margin-top: 50px; margin-left: 400px; } .Imagem1 { width: 409.5px; height: 228px; } .Texto1{ display: flex; flex-direction: column; width: 460px; height: 162px; margin-top: 30px } .Titulo1 h1{ font-size: 20px; width: 391px; height: 24px; margin: 10px 0px 0px; color: #1976d2; font-family: Extra; } .Descricao1{ width: 391px; height: 96px; margin: 16px 0px; font-family: Extra; line-height: 30px; color: #555454; } .Faixa2 { display: flex; flex-direction: row; width: 470.63px; height: 140px; padding: 15px; box-shadow: 1px 3px 13px -2px grey; margin-left: 550px; } .Imagem2 img{ margin: 16px; width: 70px; height: 70px; margin-top: 40px; margin-left: 30px; } .Titulo2 h1{ font-size: 20px; width: 391px; height: 24px; margin: 20px 0px 0px; color: #1976d2; margin-bottom: 20px; font-family: Extra; } .Descricao2 { width:342.63px; left: 80px; line-height: 30px; font-family: Extra; color: #555454; } [[[[[[[](https://)](https://)](https://)](https://)](https://)](https://)](https://) > [] ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.