Pagina HTML

Item: Pagina HTML
Rating: 1

por Luan Diias 09.07.16 2:12

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá... A uns dias fiz um pedido de uma pagina HTML aqui: https://ajuda.forumeiros.com/t105720-pagina-html. E o código me passado, foi estruturada com essa imagem: https://i.imgur.com/ceFz6A6.jpg. Então gostaria que alterasse o código estruturando com essa imagem: https://i.imgur.com/B8RHrNG.png

Código passado a mim.

Código:: [size=16][/size] <html><head><title>Bem-vindo</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta http-equiv="content-script-type" content="text/javascript"><meta http-equiv="content-style-type" content="text/css"><link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/zFsxjN0.png"><link rel="stylesheet" href="http://flames.br22.com/proxima-nova.css"><meta name="title" content="Upgrade | Bem-vindo!"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><style>/* GOOGLE FONTS */[size=16][/size] @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);[size=16][/size] @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);[size=16][/size] /* GERAL */* {margin: 0;padding: 0;list-style-type: none;text-decoration: none;}body {background: #202020;color: white;}a {color: white;}.content {width: 75%;margin: 0 auto;}.none {display: none;}[size=16][/size] /* SLIDE */#slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}#slide > #slide-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;-webkit-filter: brightness(1.2) blur(3px);z-index: 9;}#slide > #slide-main {position: absolute;top: 38%;bottom: 41%;z-index: 99;text-align: center;left: 17.5%;right: 17.5%;width: 65%;}#slide > #slide-main h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 82px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 90px;}#slide > #slide-main p.paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;padding: 5px 0;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);}#slide > #slide-main .slide-button {background: rgba(0, 0, 0, 0.42);padding: 8px 20px 9px 20px;border: 1px solid white;display: inline-block;border-radius: 3px;font-family: 'Lato', 'Helvetica Neue';margin-top: 12px;margin-right: 10px;}#slide > #slide-main .slide-button.contact {margin-right: 0;margin-left: 10px;border-color: darkcyan;color: darkcyan;}[size=16][/size] /* CONTATO */#contact {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 999;display: none;}#contact > .container {text-align: center;}#contact > .container h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 62px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 80px;}#contact > .container .paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);opacity: 0;padding: 15px 0;}#contact > .container form {text-align: center;margin: 50px 0;}#contact > .container form input {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;}#contact > .container form textarea {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;height: 150px;}#contact > .container form input.button2 {width: 10%;cursor: pointer;}#contact > .container form .captcha img {padding: 12px 20px;border: 1px solid #222;background: rgba(255, 255, 255, 0.15);margin-bottom: 0px;}#contact > #contact-close {position: fixed;top: 25px;right: 25px;display: block;}#contact > #contact-close a {display: block;width: 25px;height: 24px;background-image: url(https://cdn1.iconfinder.com/data/icons/jigsoar-icons/64/_close.png);background-color: #252525;background-repeat: no-repeat;background-size: 22px;background-position: center;border: 0;border-radius: 500px;padding: 10px;cursor: pointer;-webkit-filter: grayScale();}</style><script>function contact() {$('#contact').fadeToggle();}[size=16][/size] function submit_form() {var result=$('iframe[name="rcontact"]').contents().find('#main-content .main .main-content p.center').text();$('#contact > .container .paragraph').html(result);$('#contact > .container .paragraph').animate({opacity: '1'}, 2500);if(result="O código de confirmação não corresponde ao da imagem. Tente mais tarde.") {$('#contact > .container form .captcha img').attr('src','/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62');}if(result="A tua mensagem nos foi transmitida. Ela será lida nos melhores prazos.") {setTimeout('contact()', 5000);}}</script> [size=16][/size] <meta name="viewport" content="width=device-width, initial-scale=1">[size=16][/size] <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">[size=16][/size] </head><body><div id="slide">[size=16][/size] <script>[size=16][/size] var id = 0;[size=16][/size] var imgs = new Array();[size=16][/size] imgs[0] = "http://i.imgur.com/B8RHrNG.png";[size=16][/size] imgs[2] = "http://i.imgur.com/ceFz6A6.jpg"; [size=16][/size] //Aqui apenas adicione mais imagens[size=16][/size] function troca(){[size=16][/size] if (id<imgs.length-1){[size=16][/size] id++; [size=16][/size] }else{[size=16][/size] id=0[size=16][/size] }[size=16][/size] $("#slide-bg").fadeOut(500);[size=16][/size] setTimeout("$('#slide-bg').html('<img src=\""+imgs[id]+"\" width=\"100%\" height=\"100%\" />');$('#slide-bg').fadeIn(500);",500);[size=16][/size] }[size=16][/size] var segundos = 5; //Segundos entre cada imagem[size=16][/size] setInterval("troca();",segundos*1000);[size=16][/size] </script> [size=16][/size] <div id="slide-main" class="content container">[size=16][/size] [size=16][/size] <h1 class="logotype">[size=16][/size] <font color = "33e65c">G</font>ROVES <font color = "33e65c">S</font>TREET <font color = "33e65c">F</font>AMILIES[size=16][/size] </h1>[size=16][/size] [size=16][/size] <p class="paragraph">[size=16][/size] GSF <font color = "40E0D0">SINCE</font> 2015 [size=16][/size] </p>[size=16][/size] <a href="/forum" class="slide-button">Ir ao Fórum</a> <a href="/register" class="slide-button">Criar uma nova conta</a>[size=16][/size] <br>[size=16][/size] <br>[size=16][/size] [size=16][/size] </div> [size=16][/size] [size=16][/size] <div id="slide-bg" style="opacity: 0.6; display: block; background-image: url("http://i.imgur.com/B8RHrNG.png");"><img src="http://i.imgur.com/ceFz6A6.jpg" width="100%" height="100%"></div>[size=16][/size] [size=16][/size] <div id="footer">[size=16][/size] [size=16][/size] </div>[size=16][/size] [size=16][/size] </div>[size=16][/size] [size=16][/size] [size=16][/size] <script>[size=16][/size] var slideIndex = 1;[size=16][/size] showDivs(slideIndex);[size=16][/size] [size=16][/size] function plusDivs(n) {[size=16][/size] showDivs(slideIndex += n);[size=16][/size] }[size=16][/size] [size=16][/size] function showDivs(n) {[size=16][/size] var i;[size=16][/size] var x = document.getElementsByClassName("mySlides");[size=16][/size] if (n > x.length) {slideIndex = 1} [size=16][/size] if (n < 1) {slideIndex = x.length} ;[size=16][/size] for (i = 0; i < x.length; i++) {[size=16][/size] x[i].style.display = "none"; [size=16][/size] }[size=16][/size] x[slideIndex-1].style.display = "block"; [size=16][/size] }[size=16][/size] </script>[size=16][/size] [size=16][/size] <div id="contact">[size=16][/size] [size=16][/size] <div id="contact-main" class="content container">[size=16][/size] [size=16][/size] <h1 class="logotype">[size=16][/size] fale conosco [size=16][/size] </h1>[size=16][/size] [size=16][/size] <div class="center paragraph">[size=16][/size] O código de confirmação não corresponde ao da imagem. Tente mais tarde. [size=16][/size] </div>[size=16][/size] [size=16][/size] <form action="/contact?action=submit" target="rcontact" class="report" method="post">[size=16][/size] <input name="subject" id="subject" maxlength="49" class="report-abuse-textarea" placeholder="Assunto" type="text"> <br> <br> <textarea cols="25" rows="10" name="message" id="message" class="report-abuse-textarea" placeholder="Mensagem"></textarea> <br> <br> [size=16][/size] <div class="captcha">[size=16][/size] [size=16][/size] <div class="captcha-img">[size=16][/size] <label for="reg_key" dir="ltr"> <img src="/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62" alt=""> </label> <input name="username" value="" type="hidden"> <input name="time" value="" type="hidden"> [size=16][/size] </div>[size=16][/size] <input class="inputbox tiny" name="reg_key" id="reg_key" maxlength="5" placeholder="Captcha" dir="ltr" style="margin-bottom: 5px;" type="text"> [size=16][/size] </div>[size=16][/size] <br> <br> <input class="button2" name="submit" value="Enviar" onclick="contact();submit_form();" type="submit"> <input name="time" value="" type="hidden"> [size=16][/size] </form>[size=16][/size] <iframe src="" name="rcontact" style="width: 0;height: 0;border: 0;opacity: 0;display: none;visibility: hidden;"></iframe> [size=16][/size] </div>[size=16][/size] [size=16][/size] <div id="contact-close">[size=16][/size] <a href="#" onclick="contact();"></a> [size=16][/size] </div>[size=16][/size] [size=16][/size] </div>[size=16][/size] <div id="linkforum">[size=16][/size] <a href="#" target="_blank"></a>[size=16][/size] </div><a href="http://www.forumeiros.com" target="_blank"> </a></body></html>

por REVIEW 09.07.16 3:57

Boa noite autor,
aqui está;

Código:: <title>Grove Street FamilieS</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/jTwGEvJ.png" /><link rel="stylesheet" href="http://flames.br22.com/proxima-nova.css" /><meta name="title" content="Upgrade | Bem-vindo!" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><style>/* GOOGLE FONTS */ @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); /* GERAL */* {margin: 0;padding: 0;list-style-type: none;text-decoration: none;}body {background: #202020;color: white;}a {color: white;}.content {width: 75%;margin: 0 auto;}.none {display: none;} /* SLIDE */#slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}#slide > #slide-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;-webkit-filter: brightness(1.2) blur(3px);z-index: 9;}#slide > #slide-main {position: absolute;top: 38%;bottom: 41%;z-index: 99;text-align: center;left: 17.5%;right: 17.5%;width: 65%;}#slide > #slide-main h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 82px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 90px;}#slide > #slide-main p.paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;padding: 5px 0;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);}#slide > #slide-main .slide-button {background: rgba(0, 0, 0, 0.42);padding: 8px 20px 9px 20px;border: 1px solid white;display: inline-block;border-radius: 3px;font-family: 'Lato', 'Helvetica Neue';margin-top: 12px;margin-right: 10px;}#slide > #slide-main .slide-button.contact {margin-right: 0;margin-left: 10px;border-color: darkcyan;color: darkcyan;} /* CONTATO */#contact {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 999;display: none;}#contact > .container {text-align: center;}#contact > .container h1.logotype {color: white;font-family: "proxima-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 900;font-size: 62px;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);line-height: 80px;}#contact > .container .paragraph {font-family: 'Lato';font-weight: 300;font-size: 20px;font-style: italic;text-shadow: 0 1px 2px rgba(2, 24, 116, 0.3);opacity: 0;padding: 15px 0;}#contact > .container form {text-align: center;margin: 50px 0;}#contact > .container form input {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;}#contact > .container form textarea {background: rgba(255, 255, 255, 0.15);padding: 14px 25px;border: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.35);display: inline-block;font-family: 'Lato', 'Helvetica Neue';font-size: 18px;font-style: italic;font-weight: 300;margin-bottom: 20px;color: white;width: 50%;height: 150px;}#contact > .container form input.button2 {width: 10%;cursor: pointer;}#contact > .container form .captcha img {padding: 12px 20px;border: 1px solid #222;background: rgba(255, 255, 255, 0.15);margin-bottom: 0px;}#contact > #contact-close {position: fixed;top: 25px;right: 25px;display: block;}#contact > #contact-close a {display: block;width: 25px;height: 24px;background-image: url(https://cdn1.iconfinder.com/data/icons/jigsoar-icons/64/_close.png);background-color: #252525;background-repeat: no-repeat;background-size: 22px;background-position: center;border: 0;border-radius: 500px;padding: 10px;cursor: pointer;-webkit-filter: grayScale();}</style><script>function contact() {$('#contact').fadeToggle();} function submit_form() {var result=$('iframe[name="rcontact"]').contents().find('#main-content .main .main-content p.center').text();$('#contact > .container .paragraph').html(result);$('#contact > .container .paragraph').animate({opacity: '1'}, 2500);if(result="O código de confirmação não corresponde ao da imagem. Tente mais tarde.") {$('#contact > .container form .captcha img').attr('src','/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62');}if(result="A tua mensagem nos foi transmitida. Ela será lida nos melhores prazos.") {setTimeout('contact()', 5000);}}</script> <meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" /> <div id="slide"> <script> var id = 1; var imgs = new Array(); imgs[0] = "http://i.imgur.com/xNs14OQ.jpg"; imgs[2] = "http://i.imgur.com/B8RHrNG.png"; imgs[1] = "http://i.imgur.com/8LHmd4K.jpg"; //Aqui apenas adicione mais imagens function troca(){ if (id<imgs.length-1){ id++; }else{ id=0 } $("#slide-bg").fadeOut(500); setTimeout("$('#slide-bg').html('<img src=\""+imgs[id]+"\" width=\"100%\" height=\"100%\" />');$('#slide-bg').fadeIn(500);",500); } var segundos = 5; //Segundos entre cada imagem setInterval("troca();",segundos*800); </script> <div id="slide-main" class="content container"> <h1 class="logotype"> <span style="font-family: Impact;"><span style="color: rgb(0, 255, 0);">G</span>ROVE <span style="color: rgb(0, 255, 0);">S</span>TREET <span style="color: rgb(0, 255, 0);">F</span>AMILIES </span> </h1> <p class="paragraph"> <span style="font-family: " courier="" new";"=""><span style="color: rgb(0, 255, 0);"> GSF</span><span style="color: rgb(255, 255, 255);"> </span><span style="color: rgb(255, 255, 255);">SINCE</span><span style="color: rgb(255, 255, 255);"> </span><span style="color: rgb(0, 255, 0);">2015 </span></span> </p> <a href="/forum" class="slide-button"><span style="font-family: " times="" new="" roman";"="">Ir ao Fórum</span></a> <a href="/register" class="slide-button"><span style="font-family: " times="" new="" roman";"="">Criar uma nova conta</span></a><br /><br />  </div> <div id="slide-bg" b8rhrng.png");"="" i.imgur.com="" http:="" style="opacity: 0.6; display: block; background-image: url("> <img src="http://i.imgur.com/B8RHrNG.png" style="width: 100%; height: 100%;" /> </div> <div id="footer"> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } </script>  <div id="contact"> <div id="contact-main" class="content container"> <h1 class="logotype"> fale conosco </h1> <div class="center paragraph"> O código de confirmação não corresponde ao da imagem. Tente mais tarde. </div> <form action="/contact?action=submit" target="rcontact" class="report" method="post"> <input name="subject" id="subject" maxlength="49" class="report-abuse-textarea" placeholder="Assunto" type="text" /> <br /> <br /> <textarea cols="25" rows="10" name="message" id="message" class="report-abuse-textarea" placeholder="Mensagem"></textarea> <br /> <br /> <div class="captcha"> <div class="captcha-img"> <label for="reg_key" dir="ltr"> <img src="/antirobot_pic.forum?a=262cf829fcf970a531ff7b6bccc7ba62" alt="" /> </label> <input name="username" value="" type="hidden" /> <input name="time" value="" type="hidden" /> </div> <input class="inputbox tiny" name="reg_key" id="reg_key" maxlength="5" placeholder="Captcha" dir="ltr" style="margin-bottom: 5px;" type="text" /> </div> <br /> <br /> <input class="button2" name="submit" value="Enviar" onclick="contact();submit_form();" type="submit" /> <input name="time" value="" type="hidden" /> </form> <iframe src="" name="rcontact" style="width: 0;height: 0;border: 0;opacity: 0;display: none;visibility: hidden;"></iframe> </div> <div id="contact-close"> <a href="#" onclick="contact();"></a> </div> </div> <div id="linkforum"> <a href="#" target="_blank"></a> <a href="http://www.forumeiros.com" target="_blank"> </a>