Atualização: Modificações no CSS e adição de imagens

Nesta atualização, foram feitas várias melhorias no site: - Modificações significativas no CSS para aprimorar o layout e a aparência visual. - Adição de novas imagens para enriquecer o conteúdo e melhorar a experiência do usuário. - Correções de bugs menores e ajustes de estilo para garantir a consistência em diferentes dispositivos. Detalhes das alterações: - Atualização dos arquivos CSS para melhorar a estilização e a responsividade. - Inclusão de novas imagens nos diretórios apropriados (/images) para suporte de novos recursos. - Refatoração de código para otimização e manutenção futura do site. Essas atualizações visam aprimorar a usabilidade e o aspecto estético do site, oferecendo uma experiência mais agradável aos visitantes. Todos os arquivos foram revisados e testados para garantir a qualidade das mudanças implementadas.
danieldemac · Nov 20, 2023 · 657c880 · 657c880
1 parent a421518
commit 657c880
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 29 deletions.
diff --git a/contato.html b/contato.html
@@ -3,6 +3,7 @@
 
 <head>
   <title>Contato</title>
+  <link rel="shortcut icon" href="images/particles01.jfif">
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/reset.css">
   <link rel="stylesheet" type="text/css" href="css/styles2.css">
@@ -12,7 +13,7 @@
 </head>
 
 <body>
-  <header>
+  <header class="header">
     <nav>
       <ul>
         <li><a href="index.html">Início</a></li>
@@ -50,9 +51,9 @@ <h2>Desenvolvedor:</h2>
     <li>⚡ Tenho habilidades em HTML, CSS e JavaScript.</li>
     <li>📚 Possuo boas habilidades na língua inglesa.</li>
     <li>🌐 Desenvolvimento web com PHP, Laravel e Voyager.</li>
-    <li>🔭 Atualmente, estou trabalhando com PHP e Laravel.</li>
+    <li>💼 Atualmente, estou trabalhando com PHP e Laravel.</li>
     <li>💻 Tenho experiência em Java, C# e Python.</li>
-    <li>🔭 Desenvolvimento de aplicativos, personalização com Voyager e trabalho em equipe para atender aos requisitos do projeto.</li>
+    <li>🔭 Desenvolvimento de softwares.</li>
   </ul>
   </div>
 

diff --git a/css/styles2.css b/css/styles2.css
@@ -9,9 +9,11 @@ ul {
 
 /* Estilos do header e da navegação */
 header {
-  background-color: #f8f8f8; /* Cor de fundo do cabeçalho */
-  padding: 20px;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  background-color: #f1f1f1;
 }
 
 nav ul {
@@ -99,7 +101,7 @@ p {
 }
 
 .texto ul li {
-  font-size: 14px; /* Tamanho da fonte da lista */
+  font-size: 16px; /* Tamanho da fonte da lista */
   margin-bottom: 8px; /* Espaçamento inferior entre os itens da lista */
   line-height: 1.4; /* Altura da linha para melhor legibilidade */
 }
@@ -110,4 +112,28 @@ p {
   display: inline-block;
   width: 1em; /* Tamanho do bullet */
   margin-left: -1em; /* Alinha o bullet corretamente */
-}
+}
+.title {
+  font-weight: bold;
+  font-size: 20px;
+  text-decoration: underline;
+}
+h2 {
+  font-weight: bold;
+  font-size: 20px;
+ }
+ .center {
+  text-align: center;
+  background-color: #333;
+  color: #fff;
+}
+
+.center .bold-text {
+  font-weight: bold;
+  font-size: 16px;
+}
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+ }
diff --git a/images/particles01.jfif b/images/particles01.jfif
diff --git a/images/particles02.jfif b/images/particles02.jfif
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<link rel="shortcut icon" href="images/particles01.jfif">
 	<meta charset="UTF-8">
 	<title>Simulação de Partículas - Fenômeno Emergente</title>
 	<link rel="stylesheet" type="text/css" href="css/reset.css">

diff --git a/sobre.html b/sobre.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Sobre</title>
+	<title>Sobre a Simulação </title>
+	<link rel="shortcut icon" href="images/particles01.jfif">
 	<meta charset="utf-8">
 	<script src="voltartopo.js"></script>
 	<link rel="stylesheet" type="text/css" href="css/reset.css">
@@ -10,7 +11,7 @@
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@200&display=swap" rel="stylesheet">
 </head>
-<header>
+<header class="header">
 	<nav>
 		<ul>
 			<li><a href="index.html">Início</a></li>
@@ -19,28 +20,31 @@
 		</ul>
 	</nav>
 </header>
-<body>
-	<div class="container">
-
-<header>
-		<h1>Explicação do Trabalho</h1>
-</header>
+<div class="container">
 
+
 <body>
 	<hr>
+	<h1 class="title" align="center">Explicando a Simulação &#x1F7E2; &#x1F534; &#x1F7E1; &#x1F535;</h1>
 	<div class="texto">
 		<br>
 		<h2>Sobre:</h2>
-			<p>O presente trabalho foi elaborado com o propósito de atender aos requisitos da disciplina de Usabilidade, Desenvolvimento Web, Mobile e Jogos do curso de Ciências da Computação, no terceiro período da Universidade UniFG. O objetivo principal deste trabalho é oferecer aos alunos a oportunidade de adquirir conhecimentos acerca de um fenômeno emergente, assim como aprender a desenvolver uma simulação utilizando código JavaScript e HTML. Desta forma, os alunos poderão explorar tanto os aspectos teóricos como os práticos relacionados às áreas de programação e linguagem de marcação. Ao final deste trabalho, espera-se que os conceitos abordados tenham sido devidamente assimilados para serem aplicados em futuros projetos.</p>
-			<h2>Introdução à simulação:</h2>
-			<p>A simulação desenvolvida baseia-se nos princípios da Lei de Coulomb, que descreve a interação eletrostática entre partículas carregadas com cargas positivas ou negativas. O código da simulação foi implementado utilizando JavaScript e HTML.</p>
-			<p>A Lei de Coulomb é uma lei fundamental da física que estabelece a relação entre a força elétrica e as cargas elétricas de duas partículas. De acordo com essa lei, a força elétrica entre duas cargas pontuais é diretamente proporcional ao produto das cargas e inversamente proporcional ao quadrado da distância entre elas.</p>
-			<p>A fórmula matemática que representa a Lei de Coulomb é a seguinte:</p>
-			<code class="center">F = k * (q1 * q2) / r^2</code>
-	</div>
+			<p>&emsp;O presente trabalho foi elaborado com o propósito de atender aos requisitos da disciplina de Usabilidade, Desenvolvimento Web, Mobile e Jogos do curso de Ciências da Computação, no terceiro período da Universidade UniFG. O objetivo principal deste trabalho é oferecer aos alunos a oportunidade de adquirir conhecimentos acerca de um fenômeno emergente, assim como aprender a desenvolver uma simulação utilizando código JavaScript e HTML. Desta forma, os alunos poderão explorar tanto os aspectos teóricos como os práticos relacionados às áreas de programação e linguagem de marcação. Ao final deste trabalho, espera-se que os conceitos abordados tenham sido devidamente assimilados para serem aplicados em futuros projetos.</p>
+
+			<div class="image-container">
+				<img width="300" height="300" src="images/particles01.jfif" alt="Partículas">
+			  </div>
+		</div>
 	<hr>
 	<div class="texto">
-	<p>Onde:</p>
+			<h2>Introdução à simulação:</h2>
+			<p>&emsp;A simulação desenvolvida baseia-se nos princípios da Lei de Coulomb, que descreve a interação eletrostática entre partículas carregadas com cargas positivas ou negativas. O código da simulação foi implementado utilizando JavaScript e HTML.</p>
+			<p>&emsp;A Lei de Coulomb é uma lei fundamental da física que estabelece a relação entre a força elétrica e as cargas elétricas de duas partículas. De acordo com essa lei, a força elétrica entre duas cargas pontuais é diretamente proporcional ao produto das cargas e inversamente proporcional ao quadrado da distância entre elas.</p>
+			<p>&emsp;A fórmula matemática que representa a Lei de Coulomb é a seguinte:</p>
+			<p class="center">F = k * (q1 * q2) / r^2</p>
+
+	<h2>Onde:</h2>
+	<br>
 		<ul>
 			<li>F é a força elétrica entre as duas cargas, medida em Newtons (N)</li>
 			<li>k é a constante eletrostática, que depende do meio onde as cargas estão interagindo e é medida em N.m²/C²</li>
@@ -50,13 +54,16 @@ <h2>Introdução à simulação:</h2>
 	</div>
 	<hr>
 	<div class="texto">
-		<p>A Lei de Coulomb pode ser aplicada para determinar a força elétrica entre duas cargas pontuais de sinais diferentes (uma positiva e outra negativa), ou entre duas cargas de mesmo sinal (ambas positivas ou ambas negativas), que se repelem. A força elétrica resultante é atrativa quando as cargas possuem sinais opostos e repulsiva quando as cargas possuem o mesmo sinal.</p>
+		<p>&emsp;A Lei de Coulomb pode ser aplicada para determinar a força elétrica entre duas cargas pontuais de sinais diferentes (uma positiva e outra negativa), ou entre duas cargas de mesmo sinal (ambas positivas ou ambas negativas), que se repelem. A força elétrica resultante é atrativa quando as cargas possuem sinais opostos e repulsiva quando as cargas possuem o mesmo sinal.</p>
 
-		<p>Utilizando esse conhecimento, criei a simulação adicionando várias interações e controladores em tempo real. Agora, cada uma dessas partículas interagem de acordo com regras específicas de atração e repulsão. Essas interações criam padrões e comportamentos complexos, demonstrando o fenômeno emergente.</p>
+		<p>&emsp;Utilizando esse conhecimento, criei a simulação adicionando várias interações e controladores em tempo real. Agora, cada uma dessas partículas interagem de acordo com regras específicas de atração e repulsão. Essas interações criam padrões e comportamentos complexos, demonstrando o fenômeno emergente.</p>
+		<div class="image-container">
+			<img width="600" height="600" src="images/particles02.jfif" alt="Partículas">
+		  </div>
+		<p>&emsp;A visão computacional de Stephen Wolfram também é aplicada nesse projeto. Ele propõe que o universo pode ser entendido como um sistema computacional, onde regras simples e repetidas levam à emergência de complexidade e caos. Através dessa abordagem, podemos explorar as propriedades emergentes e observar como a complexidade surge a partir de processos simples.</p>
 
-		<p>A visão computacional de Stephen Wolfram também é aplicada nesse projeto. Ele propõe que o universo pode ser entendido como um sistema computacional, onde regras simples e repetidas levam à emergência de complexidade e caos. Através dessa abordagem, podemos explorar as propriedades emergentes e observar como a complexidade surge a partir de processos simples.</p>
-
-		<p>É importante ressaltar que a simulação desenvolvida neste projeto serve como um exemplo introdutório, permitindo que os alunos compreendam os conceitos básicos e a aplicação da programação em simulações de fenômenos naturais.</p>
+		<p>&emsp;É importante ressaltar que a simulação desenvolvida neste projeto serve como um exemplo introdutório, permitindo que os alunos compreendam os conceitos básicos e a aplicação da programação em simulações de fenômenos naturais.</p>
+
 	</div>
 	<hr>