Agrinho/index.html at main · GLiT3E/Agrinho · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Conexão do Campo e da Cidade</title>
  <style>
    body {
      margin: 0;
      font-family: 'Georgia', serif;
      background-color: #f8f6f3;
      color: #2c2c2c;
      line-height: 1.8;
    }

    header {
      background-color: #1d2b2a;
      color: #fefefe;
      padding: 80px 20px;
      text-align: center;
    }

    header h1 {
      font-size: 3.5em;
      margin-bottom: 10px;
    }

    header p {
      font-size: 1.5em;
      font-style: italic;
    }

    .section {
      max-width: 1000px;
      margin: auto;
      padding: 60px 20px;
    }

    .section h2 {
      font-size: 2.5em;
      margin-bottom: 20px;
      color: #3a3a3a;
    }

    .section p {
      font-size: 1.25em;
      margin-bottom: 20px;
    }

    .highlight {
      font-weight: bold;
      color: #7a4e2d;
    }

    .image {
      width: 100%;
      max-width: 900px;
      height: auto;
      margin: 30px auto;
      display: block;
      border-radius: 12px;
    }

    .campo { background-color: #fdfaf6; }
    .cidade { background-color: #f1f6f9; }
    .conexao { background-color: #fff2e6; }

    footer {
      background-color: #1d2b2a;
      color: white;
      text-align: center;
      padding: 40px 20px;
      font-size: 1em;
    }

    @media (min-width: 768px) {
      .dual-column {
        display: flex;
        gap: 40px;
      }

      .dual-column > div {
        flex: 1;
      }
    }
  </style>
</head>
<body>

  <header>
    <h1>Conexão do Campo e da Cidade</h1>
    <p>Equilibrando raízes e progresso</p>
  </header>

  <section class="section campo">
    <h2>A Riqueza da Vida no Campo</h2>
    <div class="dual-column">
      <div>
        <p>A vida no campo é marcada por um <span class="highlight">ritmo calmo</span>, conectado aos ciclos da natureza. Ali, o nascer e o pôr do sol definem as jornadas. A produção agrícola, o cuidado com os animais e o respeito pelo meio ambiente fazem parte da rotina diária.</p>
        <p>O campo representa <span class="highlight">sabedoria tradicional</span>, comunidades unidas e valores que resistem ao tempo. Muitos habitantes cultivam não apenas alimentos, mas também histórias, saberes e modos de vida que preservam nossa herança cultural.</p>
        <p>Além disso, o campo está se modernizando com <span class="highlight">tecnologia rural</span>, energia limpa e agroecologia. Cada vez mais, o campo é sinônimo de inovação sustentável.</p>
      </div>
      <div>
        <img class="image" src="Imgs/Campo.webp" alt="Paisagem rural com lavouras e fazenda" />
      </div>
    </div>
  </section>

  <section class="section cidade">
    <h2>O Ritmo Acelerado da Cidade</h2>
    <div class="dual-column">
      <div>
        <img class="image" src="imgs/Cidade.webp" alt="Paisagem urbana moderna com luzes" />
      </div>
      <div>
        <p>Nas cidades, o tempo é precioso. A vida urbana é caracterizada por <span class="highlight">velocidade, produtividade e conexão</span>. As pessoas estão em constante movimento, entre trabalho, estudo, cultura e serviços.</p>
        <p>Por outro lado, os centros urbanos oferecem <span class="highlight">acesso à saúde, educação e inovação tecnológica</span>, sendo vitais para o crescimento econômico e científico da sociedade.</p>
        <p>No entanto, o excesso de estímulos e o afastamento da natureza geram desafios como estresse e poluição. Por isso, as cidades também buscam maneiras de se <span class="highlight">reconectar com o essencial</span>.</p>
      </div>
    </div>
  </section>

  <section class="section conexao">
    <h2>Campo e Cidade: Uma Aliança Vital</h2>
    <p>Campo e cidade dependem um do outro. A cidade consome o que o campo produz. O campo evolui com os recursos e conhecimentos que vêm da cidade. Essa <span class="highlight">interdependência</span> exige cooperação, respeito mútuo e políticas que valorizem ambos.</p>
    <p>Fortalecer essa conexão é criar pontes entre o passado e o futuro, entre a terra e a tecnologia. Programas de apoio ao produtor rural, incentivo ao consumo consciente e investimento em logística e educação são passos essenciais.</p>
    <p>Somente com essa união poderemos construir um país mais <span class="highlight">justo, equilibrado e sustentável</span> para todos.</p>
    <img class="image" src="imgs/Campo e Cidade.gif" alt="Estrada entre campo e cidade simbolizando conexão" />
  </section>

</body>
</html>