API tools faq
paste
Advertisement
Kimossab

DDI1/2

Kimossab
Oct 5th, 2015
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.44 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.     </head>
  7.  
  8.     <body>
  9.         <div class="head1">
  10.             <div class="center1 centermargin">
  11.                 <div class="text">
  12.                     <H1 class="head">Luis Pereira</H1>
  13.                     <H3>Homepage</H3>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         <div class="main">
  18.             <div class="centermargin center2">
  19.             <ul id="menu" class="roundabout">
  20.                 <li><a href="#">Quem sou</a></li>
  21.                 <li>  |  </li>
  22.                 <li><a href="#">Contacte-me</a></li>
  23.                 <li>  |  </li>
  24.                 <li><a href="#">Links</a></li>
  25.             </ul>
  26.                 <div class="text">
  27.                     <div class="right">
  28.                         <img src="https://s-media-cache-ak0.pinimg.com/236x/c0/28/3b/c0283b7a4d4e80af548f00a0563d8ad2.jpg" class="prof"></img>
  29.                     </div>
  30.                     <div class="left">
  31.                         <div><H2>Quem sou</H2></div>
  32.  
  33.                         <div><b>Nome:</b> Luis Pereira</div>
  34.                         <div><b>Idade:</b> 19 anos</div>
  35.                         <div><b>Actividade:</b> estudanate</div>
  36.                         <div><b>Onde vivo:</b> Viseu</div>
  37.                     </div>
  38.  
  39.                     <hr>
  40.  
  41.                     <div><H2>Contacte-me</H2></div>
  42.                     <fieldset>
  43.                         <legend>A sua mensagem</legend>
  44.                         <form>
  45.                             <div class="boxleft">Nome:</div>
  46.                             <div class="boxright"><input /></div>
  47.                             <div class="boxleft">Email:</div>
  48.                             <div class="boxright"><input /></div>
  49.                             <div class="boxleft">Mensagem:</div>
  50.                             <div class="boxright"><input /></div>
  51.                             <div class="boxright"><input type="submit" value="Enviar" /></div>
  52.                         </form>
  53.                     </fieldset>
  54.  
  55.                     <hr>
  56.  
  57.                     <div><H2>Os meus links favoritos</H2></div>
  58.                     <ul>
  59.                         <li>A bola</li>
  60.                         <li>Record</li>
  61.                         <li>O Jogo</li>
  62.                     </ul>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <div class="bottom">
  67.             <div class="bottomargin">
  68.                 <ul id="menu">
  69.                     <li><a href="#">Quem sou</a></li>
  70.                     <li>|</li>
  71.                     <li><a href="#">Contacte-me</a></li>
  72.                     <li>|</li>
  73.                     <li><a href="#">Links</a></li>
  74.                 </ul>
  75.             </div>
  76.         </div>
  77.     </body>
  78. </html>
  79. <!-->CSS:<-->
  80. body{
  81.     margin:0;
  82.     padding:0;
  83. }
  84.  
  85. h1,h2,h3,h4,h5,h6{
  86.     padding:0;
  87.     margin:0;
  88. }
  89. h1.head{
  90.     padding-top:3%;
  91. }
  92. div{
  93.     padding:1px;
  94. }
  95. div.head1{
  96.     width:100%;
  97.     height:20%;
  98.     border-bottom-style:solid;
  99.     border-color:#5555ff;
  100.     background-color:#259ff8;
  101.     padding:0;
  102.     min-height:140px;
  103.     padding-bottom: 2px;
  104.     border-width:4px;
  105. }
  106. div.main{
  107.     background-color:#DDDDDD;
  108.     padding:0
  109. }
  110. div.centermargin{
  111.     margin-left:10%;
  112.     margin-right:10%;
  113. }
  114. div.center1{
  115.     height:100%;
  116.     background-color:#7cc5d7;
  117.     border-bottom-style:solid;
  118.     border-color:#5555ff;
  119. }
  120. div.center2{
  121.     min-height:65%;
  122.     background-color:#FFFFFF;
  123. }
  124. div.right{
  125.     float:right;
  126.     width:24%;
  127.     heigth:15%
  128. }
  129. div.left{
  130.     width:75%;
  131.     min-height:160px
  132. }
  133. div.text{
  134.     margin-left:4%;
  135.     margin-right:4%
  136. }
  137. div.boxleft{
  138.     width:25%;
  139.     float:left;
  140. }
  141. div.boxright{
  142.     width:74%;
  143.     float:right;
  144. }
  145. div.bottom{
  146.     min-height:50px;
  147.     background-color:#aaaaaa;
  148. }
  149. div.bottomargin{
  150.     margin-left:11.5%;
  151.     margin-right:11.5%;
  152. }
  153.  
  154. img.prof{
  155.     margin-top:5px;
  156.     height:150px;
  157.     width:150px;
  158.     border:5px #000000 outset;
  159. }
  160.  
  161. hr{
  162.     height:1%;
  163.     background-color:#5555ff;
  164. }
  165.  
  166. input{
  167.     width:100%
  168. }
  169.  
  170. ul#menu li {
  171.     display:inline;
  172. }
  173.  
  174. a{
  175.     color: #FFFFFF
  176. }
  177.  
  178. ul.roundabout{
  179.     width:250px;
  180.     border:10px solid;
  181.     border-radius: 2em;
  182.     background-color: #5555ff;
  183.     border-color: #5555ff;
  184.     color: #FFFFFF;
  185.     margin-bottom: 0px;
  186.     margin-top: -22px;
  187.     margin-left: 5%;
  188. }
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!