Site atualizado

css/style.css

@@ -1,29 +1,78 @@
 /* Projeto Agrinho 2024 */
 
-/* Tema: Agrinho: do campo à cidade, colhendo oportunidades */
+/* Tema do Projeto: Agrinho, do campo à cidade, colhendo oportunidades. */
+
+/*-------------------------------------------*/
 
 html {background: #e7e7e7e7;
       background-repeat: no-repeat;
-      font-family: "Orbitron", sans-serif;
-      display: flex;
-      font-size: 15px;}
+      font-family:'Orbitron', sans-serif;
+      align-items: center;
+      font-size: 20px;}
+/* definição da cor de fundo, fontes e demais parâmetros do html */
 
 body {margin: 0px; padding: 0px;}
+/* definição de espaçamento do conteúdo contido no body da página */
+
+@keyframes glow { 0% {box-shadow: 0px 0px 30px magenta;}
+            25% {box-shadow: 0px 0px 15px purple;}
+            50% {box-shadow: 0px 0px 30px lime;}
+            75% {box-shadow: 0px 0px 15px purple;}
+            100% {box-shadow: 0px 0px 30px magenta;}
+}
+/* animação para acrescentar detalhes em alguns botões e imagens */
+
+.T1 {color: cyan; background: grey;
+         box-shadow: 0px 0px 15px cyan;
+         text-shadow: 0px 0px 15px blue;
+         padding: 10px;
+         cursor: default;
+         width: 80%;
+         position: relative; top: 40px;
+         font-size: 25px;}
+/* título principal */
+
+hr {color: black; position: relative; top: 40px;}
+/* definições para separações (em linhas) */
+
+.T2 {color: lime; background: black;
+         box-shadow: 0px 0px 15px lime;
+         text-shadow: 0px 0px 15px lime;
+         padding: 10px;
+         border-radius: 25%;
+         cursor: default;
+         width: 80%;
+         position: relative; top: 40px;
+         font-size: 25px;}
+/* título secundário */
 
-.orbitron-font {font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-weight: 20px; font-style: normal;}
+#A1 {color: black; cursor: default;
+     width: 90%;
+     position: relative; top: 40px;}
+/* apresentação do projeto */
 
-.header {background: #e7e7e7e7; padding: 15px; width: 100%; height: 10%; display: flex; position: static; text-shadow: 0px 0px 15px black;}
+#Te1 {color: black; position: relative;
+      position: relative; top: 40px;
+      top: -150px; cursor: default; width: 90%;}
 
-.icones {width: 30px; height: 30px; padding-right: 30px; padding-left: 30px;}
+#Te2 {color: black; 
+      cursor: default;
+      position: relative; top: 40px;
+      font-size: 9px; width: 90%;}
+/* fonte matriz da página e políticas de privacidade/termos de serviço, etc */
 
-.Titulo-Principal {color: cyan; background-color: #e7e7e7e7;
-                   align-items: bottom; width: 100%; height: 60px; text-align: top;
-                   position: relative; border-top: solid 2px black;}
+a {color: white;}
+/* padrão de cor branca para links */
 
-.background {width: 100%; height: 200%; z-index: -1;}
+a:hover {color: cyan;}
+/* padrão de cor ciano para links clicados */
 
-.Titulo1 {position: relative; top: -100px; font-size: 30px; text-shadow: 0px 0px 15px blue}
+/*-------------------------------------------*/
 
-.Desenvolvimento {width: 90%; position: relative; color: black; text-align: center; top: 200px;}
+/* Proporções Extras */
 
-.Titulo2 {color: #4e4500; text-shadow: 0px 0px 15px yellow;}
+@media screen and (min-width: 900px){
+   .Botao_superior {height: 3%; width: 3%;}
+   .Projetos_img {height: 50%; width: 50%;}
+   #I1,#I2 {height: 50%; width: 50%;}
+}

css/style2.css

@@ -0,0 +1,52 @@
+/* Header Projeto Agrinho 2024 */
+
+/*-------------------------------------------*/
+
+ul {margin: 0;}
+/* espaçamento interno para listagems do header */
+
+#logo {font-size: 10px;
+       font-weight: bold;
+       background: grey;
+       color: cyan;
+       text-shadow: 0px 0px 15px lime;
+       width: 100px;
+       padding: 10px;
+       box-shadow: 0px 0px 15px cyan;
+       text-shadow: 0px 0px 15px blue;
+       border-radius: 10%;
+       cursor: default;}
+/* Nome do Projeto no header*/
+
+#header {box-sizing: border-box;
+         height: 10px;
+         width: 100%;
+         padding: 1rem;
+         display: flex;
+         box-shadow: 0px 0px 15px cyan;
+         border: solid 2px black;
+         align-items: center;
+         justify-content: space-between;
+         background: #157205e7;
+         position: fixed;
+         top: -3px;
+         z-index: 2;}
+/* definições para criação e espaçamento do header */
+
+#menu {display: flex;
+       list-style: none;
+       gap: .5rem;}
+/* Definições para o menu do header */
+
+#menu a {display: block;
+         font-size: 15px;
+         text-decoration: none;
+         padding: .5rem;}
+/* definições para os links do menu */
+
+/*-------------------------------------------*/
+
+@media screen and (max-width: 900px){
+  #menu a {font-size: 5px;}
+}
+/* definições para mobile-first, alterando o tamanho da fonte do menu para abranger mais espaço entre as "abas" */

extra/info.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="edge">
+  <meta name="author" content="IzaacCoding36">
+  <meta name="description" content="Informações sobre o site do Projeto Agrinho de 2024, com o tema 'Agrinho, do campo à cidade, colhendo oportunidades.'>
+  <meta name="keywords" content="Desenvolvimento, Info.">
+  <meta name="viewport" content="width=device-width, initial-scale= 1.0">
+  <link rel="shortcut icon" type="Image/jpg" href="img/favicon.ico">
+  <base href="index.html">
+  <title>Projeto Agrinho - Info</title>
+  </head>
+  <body>
+    <center>
+      <h1>Informações sobre o site do meu Projeto Agrinho 2024</h1>
+      <hr>
+      <p>Esse é um site onde é debatido relações entre o campo e a cidade e seus desenvolvimentos em conjunto.</p>
+      <p>O site é disponibilizado por: ---</p>
+      <p>Licença: ---</p>
+      <p>Política de Privacidade: ---<a href=""></a></p>
+      <p>Dados administrados por: @IzaacCoding36</p>
+      <hr>
+      <h2>Versões</h2>
+      <hr>
+      <p>Última atualização do site: ---</p>
+      <p>Site desenvolvido e publicado em: ---</p>
+      <hr>
+      <p>®2024 Projeto Agrinho 2024, @IzaacCoding36. Todos os direitos reservados. Conteúdo sujeito a disponibilidade.</p>
+      <hr>
+      <h4><a href="">Retornar</a></h4>
+      <style>html {background: #e7e7e7e7; cursor: default;}</style>
+    </center>
+  </body>

index.html

@@ -1,38 +1,44 @@
 <!DOCTYPE html>
 <html lang="pt-br">
-<head>
+  <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="edge">
   <meta name="author" content="IzaacCoding36">
   <meta name="description" content="Esse é um site onde é debatido relações entre o campo e a cidade e seus desenvolvimentos em conjunto.">
   <meta name="keywords" content="HTML, CSS, Projetos, Desenvolvimento, Website, Futuro, Agrinho">
   <meta name="viewport" content="width=device-width, initial-scale= 1.0">
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="shortcut icon" type="Image/jpg" href="img/favicon.ico">
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="./css/style2.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
   <base href="index.html">
-  <title>Projeto Agrinho</title>
-</head>
-<body>
-  <center>
-  <section>
-    <div class="header">
-      <header>
-        <span><img class="icones" src="img/linguagem.svg"></img>Linguagem: Português</span>
-        <span><img class="icones" src="img/tema-claro.svg"></img>Tema: Claro</span>
-      </header>
-    </div>
-    <div class="Titulo-Principal" class="orbitron-font">
-      <img class="background" src="img/Untitled.png">
-      <h1 class="Titulo1">Agrinho: do campo à cidade, colhendo oportunidades</h1>
-    </div>
-  </section>
-  <section>
-    <div class="Desenvolvimento">
-      <p>Olá, este site foi criado para apresentar e discutir um assunto muito importante que geralmente reflete em nosso dia a dia, o campo e seus ramos do setor agroeconômico em relação com a vida urbana, adentrando várias perspectivas de inovação entre ambos. Vamos começar?</p>
-      <h1 class="Titulo2">O Campo</h1>
-    </div>
-  </section>
-  </center>
-</body>
+  <title>Projeto Agrinho 2024</title>
+  </head>
+  <body>
+    <center>
+    <header id="header">
+      <p id="logo">Projeto Agrinho</p>
+      <nav id="nav">
+        <ul id="menu" role="menu">
+          <li><a href="">Tema: Claro</a></li>
+          <li><a href="">Linguagem: PT-BR</a></li>
+          <li><a href="extra/info.html">Info</a></li>
+          <li><a href="">Referências</a></li>
+        </ul>
+      </nav>
+    </header>
+    <h1 class="T1">Agrinho: do campo à cidade, colhendo oportunidades</h1>
+    <h6 id="A1">Olá, seja bem-vindo à este site, aqui, você verá vários conceitos sobre o campo e seus ramos que se correlacionam com a cidade, refletindo e abrindo amplas gamas de oportunidades para aqueles que se interessam e buscam um futuro inovador.</h6>
+    <h6 id="A1">Vamos começar?</h6>
+    <hr>
+    <h1 class="T2">Relação Campo-Cidade</h1>
+    <hr>
+    <h6 id="A1">bla bla bla</h6>
+    <hr>
+    <p id="Te2">®2024 Projeto Agrinho, @IzaacCoding36. Todos os direitos reservados. Conteúdo sujeito a disponibilidade.</p>
+    <p id="Te2">Esse é um site onde é debatido relações entre o campo e a cidade e seus desenvolvimentos em conjunto em relação com o projeto desenvolvido.</p>
+    </center>
+  </body>
+</html>