Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

nav {
  float: left;
  width: 30%;
  height: 500px;
  background: #ccc;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px;
}


section:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  background-color: #777;
  padding: 100px;
  text-align: center;
  color: white;
}

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<header>
  <h2>Protectia mediului</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="http://apmdj-old.anpm.ro/" style="font-size:25px;">Agentia pentru protectia mediului </a></li>
      <li><a href="https://ro.wikipedia.org/wiki/Protec%C8%9Bia_mediului" style="font-size:25px;">Protectia mediului</a></li>
      <li><a href="https://blog.blablacar.ro/blablalife/reinventam-calatoritul/protejarea-mediului" style="font-size:25px;">Cum putem sa protejam mediul inconjurator?</a></li>
    </ul>
  </nav>

  <article>
    <h1 style="font-size:25px;">Importanta protectiei mediului:</h1>
    <p style="font-size:25px;">Mediul înconjurător reprezintă spaţiul în care ne desfăşurăm toate activităţile la un randament normal, acesta cuprinzând solul, aerul, apa, celelalte vietăţi, precum şi toate relaţiile care asigură un echilibru între toate aceste elemente.</p>
    <p style="font-size:25px;">În prezent, activităţile omului afectează sănătatea planetei mai mult decat în orice altă epocă din istorie. Pe măsură ce probleme precum încălzirea globală devin din ce în ce mai alarmante, oameni de ştiinţă, guverne şi companii industriale îşi intensifică eforturile pentru a întreprinde ceva în acest sens.</p>
    <p style="font-size:25px;">Solutiile la care s-au gandit forurile si organizatiile de specialitate sunt la indemana oricarui cetatean de rand, caruia ii pasa de protectia mediului si crede intr-o dezvoltare durabila a societatii.
Reciclarea deseurilor, folosirea produselor ecologice, calatoriile cu bicileta</p>
<p style="font-size:25px;">Stim cu totii ca omul este singurul animal care isi distruge mediul in care traieste. Prin diversele sale actiunile, omul a reusit sa modifice intr-un mod ingrijorator caracteristicile mediului inconjurator, punand astfel in pericol viata generatiilor urmatoare. </p>
</article>
</section>

<footer>
  <image src="porc.jpg" height="300" width="500">
</footer>

</body>
</html>