estilização do site de parques

3 years ago · fdf08161d4
--- a/css/estilo.css
+++ b/css/estilo.css
@ -1,3 +1,33 @@
 * {
     margin: 0 auto;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Open Sans', sans-serif;
 }
 
 #menu-h {
     background-color:rgb(41, 41, 43);
 }
 
 #menu-h ul{
     max-width: 850px;
     list-style:none;
     padding: 0;
 
 }
 
 #menu-h ul li{
     display: inline;
 }
 
 #menu-h ul li a{
     color: #fff;
     text-decoration: none;
     display: inline-block;
     padding: 20px 40px;
     transition: .6s;
 }


 body {
     color: black;
@ -11,10 +41,52 @@
  width:800px;
  margin-left:auto;
  margin-right:auto;
  height:300px;
 }

 table, tr, th  {
   border:30px solid blue;
 }

 
 section {
  border:0px solid black;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
 }

 section h2 {
  padding:20px;
 }

 section p{
  padding:20px;
  font-size: 20px;
  line-height:2.5rem;
  text-decoration:justify;
 }

 form {
  width: 800px;
  height: 200px;
  margin: 10px;
  display:inline-block;  
  top: 30px;
  line-height:30px;
  position:relative;
  
 } 

 #formulario label{
  position:absolute;
  left:20px;
  margin-right:5px;
 }

 #formulario input.campo_nome {
  position:absolute;
  left:95px;
  top:25px;
  width: auto;

 }
--- a/extensao.html
+++ b/extensao.html
@ -5,6 +5,9 @@
  </head>
  
  <body>
    <div>
      <h1>Tabela de animais e sua quantidade</h1>
    </div>
    <table>
      <thead>
         <tr>
@ -38,6 +41,8 @@
        
      </tfoot>
    </table>
    <br>
    <br>
     <iframe src="salvar.html" name="meu-iframe" width="500"     height="800">Salvo com sucesso</iframe>

  </body>
--- a/parques-naturais.html
+++ b/parques-naturais.html
@ -2,10 +2,31 @@
 <html>

  <head>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/estilo.css">
  </head>

  <body>
   <header>
     <nav id="menu-h">
         <ul>
             <li><a href="index.html">Home</a></li>
            <li><a href="./webroot/index.html">Retornar ao primeiro site</a></li>
             <li><a href="#">entrar</a></li>
         </ul>
      </nav>
    </header> 
    <section id=parques>
      <h2>Parques naturais</h2>
      <p>Os parques naturais são áreas protegidas que possuem importantes valores naturais, culturais e recreativos. Eles são criados para proteger ecossistemas e paisagens naturais, bem como para oferecer oportunidades para atividades recreativas ao ar livre, como caminhadas, observação de vida selvagem e camping.

 Essas áreas são gerenciadas com o objetivo de preservar a biodiversidade, a vida selvagem e os habitats naturais. Além disso, muitos parques naturais têm como objetivo proteger locais de importância histórica ou cultural.

 Os parques naturais podem ser gerenciados pelo governo ou por organizações sem fins lucrativos. Muitos países possuem leis que protegem essas áreas e estabelecem regulamentos para a sua gestão.

 Algumas das áreas protegidas mais conhecidas do mundo incluem o Parque Nacional de Yellowstone nos Estados Unidos, o Parque Nacional de Banff no Canadá, o Parque Nacional Kruger na África do Sul, o Parque Nacional da Chapada Diamantina no Brasil e o Parque Nacional Torres del Paine no Chile.

 Os parques naturais são importantes porque permitem que as pessoas experimentem a beleza da natureza e aprendam sobre a importância da conservação. Eles também são importantes para a pesquisa científica e para a conservação de espécies ameaçadas de extinção.</p>
    </section>
    <table cellspacing="5" cellpadding="10" border="2">
      <thead>
        <th>Parques Naturais</th>
@ -45,22 +66,17 @@
           <td colspan="2">48.518,26 hectares</td>
        </tr>
      </tfoot>
      </section>
    </table>
     <form action="extensao.html">
       <div>
         <label> Nome do animal</label>
         <input type="text" name="nome" />
       </div>
       <div>
         <label for="numero" >Quantidade</label>
         <input type="number" id="numero" name="numero" min="0" max="200">
       </div>
       <div>
         <label for="parque" >Parque</label>
         <input id="parque" type="text" name="parque" />
       </div>
       <div>
          <select>
    <div id="area">
   <form id="formulario" action="extensao.html">
     <fieldset>
         <legend>Formulário</legend>
         <label> Nome do animal</label><input class="campo_nome"  type="text" name="nome" /><br>
         <label for="numero" >Quantidade</label><input class="campo_numero" type="number" id="numero" name="numero" min="0" max="200"><br>
         <label for="parque" >Parque</label><input class="campo_parque " id="parque" type="text" name="parque" /><br>
         <label>Mensagem:</label><br><textarea class="msg" cols="35" rows="8"></textarea><br>
         <select>
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
@ -89,39 +105,14 @@
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
 </select>
       </div>
       <div>
 </select><br>
         <label>
           <input type="checkbox" name="autoriza" /> Voc&ecirc; autoriza.
         </label>
       </div>
       <button>Enviar</button>
     </fieldset>
     </form>
    </div>
  </body>

 </html>