Зелёный

by helpD54

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CCS Часть №2 (Свойства текста и шрифта)</title>
    <link rel="stylesheet" href="css/style.css">
    </head>
  <body>
  
      <h1 class="first">
        Нам повезло жить в эпохе <br> альтернативной энергетики
      </h1>
      
     <div class="first next">
            <p>Альтернативная энергетика — совокупность перспективных способов получения, передачи и использования энергии (зачастую — из возобновляемых источников), которые распространены не так широко, как традиционные, однако представляют интерес из-за выгодности их использования при, как правило, низком риске причинения вреда окружающей среде.</p>
            <p>Мы предлагаем вам стать частью благого дела. Мы представляем линейку устройств для выработки экологичной энергии:</p>
      </div>
         


<table>
<tr>
  
 <td class="minicard">
        <h2>Солнечные панели</h2>    
        <p>Эффективный способ преобразования солнечной энергии в электричество:</p>
      </td>
    
      
      <td class="minicard">
        <h2>Ветрогенератор</h2>
        <p>Эффективный способ преобразования энергии ветра в электричество:</p>
      </td>
  
  
      <td class="minicard">
        <h2>Гидрогенератор</h2>
        <p>Эффективный способ преобразования солнечной энергии в электричество:</p>
      </td>
  
</tr>
</table>

     
     

</body>
</html>

CSS

.first{
  font-size: 69px;
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 1200px;
  background: rgba(148, 221, 177, 0.8);
  margin:30px auto;
  padding: 30px 15px 30px 15px;
}
.next{
  font-size: 29px;
  background: rgba(140, 140, 140, 0.3);
}

table{
  border-spacing: 25px;
}
table td{
  width: 33%;
}
h2 {
  font-size: 30px; 
}
.minicard{
  border: 1px solid black;
  text-align: center;
  border-radius: 10px;
  font-size: 20px;
  background: rgba(148, 221, 177, 0.6);
  padding:30px;
}

.minicard p{
  padding-top:20px;
}