API tools faq
paste
Advertisement
Kimossab

DDI 7

Kimossab
Nov 16th, 2015
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.46 KB | None | 0 0
raw download clone embed print report
  1. <!--HTML-->
  2. <html>
  3.     <head>
  4.         <link rel="stylesheet" type="text/css" href="mystyle.css">
  5.         <title>A minha pagina</title>
  6.         <script>
  7.             var textonome = "";
  8.             var textoemail = "";
  9.             var textomens = "";
  10.             var validated;
  11.             function ItsAllValid()
  12.             {
  13.                 document.getElementById("info").innerHTML = "<div class=\"correto\">Obrigado por enviar a mensagem. Irei responder assim que poss&iacute;vel.</div>";
  14.                 document.getElementById("formas").innerHTML = " <div class=\"messshow1\"><b>"+
  15.                         textonome+"</b><br><a href=\"" + textoemail+"\">"+
  16.                         textoemail+"</a><br><div class=\"messshow2\"><p>"+
  17.                         textomens+"</p></div></div>";
  18.             }
  19.             function validate()
  20.             {
  21.                 textonome = document.getElementById("Nome").value;
  22.                 textoemail = document.getElementById("Email").value;
  23.                 textomens = document.getElementById("Mensagem").value;
  24.                 validated = true;
  25.                 if(!textonome)
  26.                 {
  27.                     document.getElementById("Nome").style.borderColor = "red";
  28.                     validated=false;
  29.                 }
  30.                 else
  31.                     document.getElementById("Nome").style.borderColor = "green";
  32.                 if(!textoemail)
  33.                 {
  34.                     document.getElementById("Email").style.borderColor = "red";
  35.                     validated=false;
  36.                 }
  37.                 else
  38.                     document.getElementById("Email").style.borderColor = "green";
  39.                 if(textomens === "")
  40.                 {
  41.                     document.getElementById("Mensagem").style.borderColor = "red";
  42.                     validated=false;
  43.                 }
  44.                 else
  45.                     document.getElementById("Mensagem").style.borderColor = "green";
  46.                
  47.                 if(validated)
  48.                     ItsAllValid();
  49.                 else
  50.                     document.getElementById("info").innerHTML = "<div class=\"vazio\">Por favor, preencha todos os campos do formul&aacuterio.</div>";
  51.             }
  52.         </script>
  53.     </head>
  54.  
  55.     <body>
  56.         <script>
  57.             validate();
  58.         </script>
  59.         <div class="head1">
  60.             <div class="center1 centermargin">
  61.                 <div class="text">
  62.                     <H1 class="head">Luis Pereira</H1>
  63.                     <H3>Homepage</H3>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div class="main">
  68.             <div class="centermargin center2">
  69.             <ul id="menu" class="roundabout">
  70.                 <li><a href="#">Quem sou</a></li>
  71.                 <li>  |  </li>
  72.                 <li><a href="#">Contacte-me</a></li>
  73.                 <li>  |  </li>
  74.                 <li><a href="#">Links</a></li>
  75.             </ul>
  76.                 <div class="text">
  77.                     <div class="right">
  78.                         <img src="https://s-media-cache-ak0.pinimg.com/236x/c0/28/3b/c0283b7a4d4e80af548f00a0563d8ad2.jpg" class="prof"></img>
  79.                     </div>
  80.                     <div class="left">
  81.                         <div><H2>Quem sou</H2></div>
  82.  
  83.                         <div><b>Nome:</b> Luis Pereira</div>
  84.                         <div><b>Idade:</b> 19 anos</div>
  85.                         <div><b>Actividade:</b> estudanate</div>
  86.                         <div><b>Onde vivo:</b> Viseu</div>
  87.                     </div>
  88.  
  89.                     <hr style="margin-top:20px">
  90.  
  91.                     <div><H2>Contacte-me</H2></div>
  92.                     <div id="info"></div>
  93.                     <div id="formas">
  94.                         <fieldset>
  95.                             <legend>A sua mensagem</legend>
  96.                             <form>
  97.                                 <div class="boxleft">Nome:</div>
  98.                                 <div class="boxright"><input id="Nome" /></div>
  99.                                 <div class="boxleft">Email:</div>
  100.                                 <div class="boxright"><input id="Email"/></div>
  101.                                 <div class="boxleft">Mensagem:</div>
  102.                                 <div class="boxright"><input id="Mensagem" /></div>
  103.                                 <div class="boxright"><input type="button" value="Enviar" onClick="validate()"/></div>
  104.                             </form>
  105.                         </fieldset>
  106.                     </div>
  107.  
  108.                     <hr>
  109.  
  110.                     <div><H2>Os meus links favoritos</H2></div>
  111.                     <ul>
  112.                         <li>A bola</li>
  113.                         <li>Record</li>
  114.                         <li>O Jogo</li>
  115.                     </ul>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.         <div class="bottom">
  120.             <div class="bottomargin">
  121.                 <ul id="menu">
  122.                     <li><a href="#">Quem sou</a></li>
  123.                     <li>|</li>
  124.                     <li><a href="#">Contacte-me</a></li>
  125.                     <li>|</li>
  126.                     <li><a href="#">Links</a></li>
  127.                 </ul>
  128.             </div>
  129.         </div>
  130.     </body>
  131. </html>
  132.  
  133. <!--CSS-->
  134. body{
  135.     margin:0;
  136.     padding:0;
  137. }
  138. div.vazio{
  139.     border-style:solid;
  140.     padding:2px;
  141.     border-width:2px;
  142.     width:100%;
  143.     border-color:red;
  144.     color:red;
  145.     background-color:#AA5555;
  146. }
  147. div.correto{
  148.     border-style:solid;
  149.     padding:2px;
  150.     border-width:2px;
  151.     width:100%;
  152.     border-color:green;
  153.     color:green;
  154.     background-color:#55AA55;
  155. }
  156.  
  157. h1,h2,h3,h4,h5,h6{
  158.     padding:0;
  159.     margin:0;
  160. }
  161. h1.head{
  162.     padding-top:3%;
  163. }
  164. div{
  165.     padding:1px;
  166. }
  167. div.head1{
  168.     width:100%;
  169.     height:20%;
  170.     border-bottom-style:solid;
  171.     border-color:#5555ff;
  172.     background-color:#259ff8;
  173.     padding:0;
  174.     min-height:140px;
  175.     padding-bottom: 2px;
  176.     border-width:4px;
  177. }
  178. div.main{
  179.     background-color:#DDDDDD;
  180.     padding:0
  181. }
  182. div.centermargin{
  183.     margin-left:10%;
  184.     margin-right:10%;
  185. }
  186. div.center1{
  187.     height:100%;
  188.     background-color:#7cc5d7;
  189.     border-bottom-style:solid;
  190.     border-color:#5555ff;
  191. }
  192. div.center2{
  193.     min-height:65%;
  194.     background-color:#FFFFFF;
  195. }
  196. div.right{
  197.     float:right;
  198.     width:24%;
  199.     heigth:15%;
  200. }
  201. div.left{
  202.     width:75%;
  203.     min-height:160px
  204. }
  205. div.text{
  206.     margin-left:4%;
  207.     margin-right:4%
  208. }
  209. div.boxleft{
  210.     width:25%;
  211.     float:left;
  212. }
  213. div.boxright{
  214.     width:74%;
  215.     float:right;
  216. }
  217. div.bottom{
  218.     min-height:50px;
  219.     background-color:#aaaaaa;
  220. }
  221. div.bottomargin{
  222.     margin-left:11.5%;
  223.     margin-right:11.5%;
  224. }
  225.  
  226. img.prof{
  227.     height:150px;
  228.     width:150px;
  229.     border:5px #000000 outset;
  230. }
  231.  
  232. hr{
  233.     height:1%;
  234.     background-color:#5555ff;
  235. }
  236.  
  237. input{
  238.     width:100%;
  239. }
  240.  
  241. ul#menu li {
  242.     display:inline;
  243. }
  244.  
  245. a{
  246.     color: #FFFFFF;
  247.     text-decoration:none;
  248. }
  249.  
  250. ul.roundabout{
  251.     width:250px;
  252.     border:10px solid;
  253.     border-radius: 2em;
  254.     background-color: #5555ff;
  255.     border-color: #5555ff;
  256.     color: #FFFFFF;
  257.     margin-bottom: 0px;
  258.     margin-top: -22px;
  259.     margin-left: 5%;
  260. }
  261.  
  262. .messshow1{
  263.     padding:20px;
  264.     padding-top:10px;
  265.     padding-bottom:10px;
  266.     background-color:gray;
  267.     border-radius:15px
  268. }
  269. .messshow2{
  270.     border-radius:15px;
  271.     padding:20px;
  272.     padding-top:10px;
  273.     padding-bottom:10px;
  274.     background-color: white
  275. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!