perfil terminado

assets/css/perfil.css

@@ -4,6 +4,9 @@
 	box-sizing: border-box;
 	font-family: arial, sans-serif;
 }
+body {
+	background-color: #365277;
+}
 .header {
 	display: flex;
 	justify-content: space-between;
@@ -36,13 +39,15 @@
 	width: 100px;
 	border-radius: 50%;
 }
-.user-p h4 {
-	color: #ccc;
+.user-p h1 {
+	color: #fff;
+	font-size: 16px;
+	font-weight: bold, italic;
 	padding: 5px 0;
 
 }
 .side-bar {
-	width: 250px;
+	width: 150px;
 	background: #4E77AD; 
 	min-height: 100vh;
 	transition: 500ms width;
@@ -52,13 +57,9 @@
 }
 .section-1 {
 	width: 100%;
-	background: url("../img/bg.jpg");
-	background-size: cover;
-	background-position: center;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	flex-direction: column;
 }
 .section-1 h1 {
 	color: #fff;
@@ -89,7 +90,7 @@
 }
 .side-bar ul li a {
 	text-decoration: none;
-	color: #eee;
+	color: #fff;
 	cursor: pointer;
 	letter-spacing: 1px;
 }
@@ -118,8 +119,12 @@
 }
 
 #profile {
-	max-width: 400px;
-	margin: 0 auto;
+	max-width: 100px;
+	margin: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
   }
 
   label {
@@ -146,14 +151,48 @@
 }
 
 #imgPhoto {
+	display: flex;
+	align-items: center;
+	justify-content: center;
     margin-top: 10%;
-    width: 250px;
-    height: 250px;
+    width: 100px;
+    height: 100px;
     padding:2px;
-
 	border: 1px solid #706f6f;
     border-radius: 50%;
     cursor: pointer;
     transition: background .3s;
 }
+.area-quadrado {
+	display: flex;
+	align-items: center;
+	height: 100vh;
+	justify-content: center;
+
+}
+.quadrado {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background: #fff;
+	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.212);
+	border-radius: 30px;
+	width: 300px;
+	height: 460px;
+	padding: 35px;
+}
 
+button{
+    margin: 0 10px;
+    padding: .6em 1.2em;
+    font-size: 1.1em;
+    border: none;
+    background-color: #1457ae;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: .5s;
+}
+button:hover{
+    transform: scale(1.1);
+}

assets/css/style-1.css

@@ -114,7 +114,7 @@ header { /* menu */
 }
 
 h1.texto-h1 {
-    font-size: 40px;
+    font-size: 30px;
 
 }
 

index.html

@@ -67,10 +67,6 @@ <h1>Login</h1>
     </div>
 
     </section>  
-
-
-
-      <script src="/assets/js/main.js"></script>
 </body><!-- corpo-->
 
 </html>

pages/ajuda.html

@@ -94,11 +94,6 @@ <h2 class="faq_header-title">Perguntas Frequentes</h2>
 
 
      </section>
-
-
-
-
-    <script src="/assets/js/main.js"></script>
 
 </body>
 

pages/esqueceu.html

@@ -60,10 +60,6 @@ <h1 class="texto-h1">Esqueceu a senha</h1>
 
     </section>  
 
-
-
-
-      <script src="/assets/js/main.js"></script>
 </body><!-- corpo-->
 
 </html>

pages/perfil.html

@@ -28,53 +28,70 @@ <h2 class="u-name">
 		<nav class="side-bar">
 			<div class="user-p">
 
-					<a href="#">
-						<i class="fa-solid fa-user" aria-hidden="true"></i>
+					<a href="#" aria-label="icone do user">
+						<i class="fa-solid fa-user" style="color: #ffffff;" aria-hidden="true"></i>
 					</a>
 
-				<h4>CONTA</h4>
+				<h1>CONTA</h1>
 			</div>
 			<ul>
-
 				<li>
-					<a href="/pages/contatos.html">
+					<a href="#" aria-label="icone">
+						<i class="fa-solid fa-paw" aria-hidden="true"></i>
+						<span>Adoção</span>
+					</a>
+				</li>
+
+				<li>
+					<a href="#" aria-label="icone">
+						<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
+						<span>Perdidos</span>
+					</a>
+				</li>
+
+				<li>
+					<a href="/pages/contatos.html" aria-label="icone">
 						<i class="fa-solid fa-envelope" aria-hidden="true"></i>
 						<span>Contato</span>
 					</a>
 				</li>
 				<li>
-					<a href="/pages/sobre.html">
+					<a href="/pages/sobre.html" aria-label="icone">
 						<i class="fa fa-info-circle" aria-hidden="true"></i>
 						<span>Sobre</span>
 					</a>
 				</li>
 
 				<li>
-					<a href="/pages/ajuda.html">
+					<a href="/pages/ajuda.html" aria-label="icone">
 						<i class="fa-solid fa-circle-question" aria-hidden="true"></i>
 						<span>Ajuda</span>
 					</a>
 				</li>
 
 				<li>
-					<a href="/pages/perfil.html">
+					<a href="/pages/perfil.html" aria-label="icone">
 						<i class="fa fa-cog" aria-hidden="true"></i>
-						<span>Editar Perfil</span>
+						<span>Editar</span>
 					</a>
 				</li>
 				<li>
-					<a href="#">
+					<a href="#" aria-label="icone">
 						<i class="fa fa-power-off" aria-hidden="true"></i>
 						<span>Sair</span>
 					</a>
 				</li>
 			</ul>
 		</nav>
 		<section class="section-1">
+			<div class="area-quadrado">
+
+         <div class="quadrado">
 
+
 			<div class="max-width">
 				<div class="imageContainer">
-					<img src="camera.png" alt="Selecione uma imagem" id="imgPhoto">
+					<img src="#" alt="Selecione uma imagem" id="imgPhoto">
 				</div>
 			</div>
 
@@ -85,9 +102,18 @@ <h4>CONTA</h4>
 
 
 				<div id="profileInfo">
-				  <p><strong>Nome:</strong> <span id="name"></span></p>
-				  <p><strong>E-mail:</strong> <span id="email"></span></p>
-				  <p><strong>Biografia:</strong> <span id="bio"></span></p>
+				  <p><strong>Nome:</strong> 
+					<br>
+				  <span id="name"></span></p>
+
+				  <p><strong>E-mail:</strong> 
+					<br>
+				 <span id="email"></span></p>
+
+				  <p><strong>Biografia:</strong> 
+					<br>
+				  <span id="bio"></span></p>
+
 				  <button id="editButton">Editar</button>
 				</div>
 				<div id="profileForm" style="display: none;">
@@ -104,7 +130,8 @@ <h4>CONTA</h4>
 				</div>
 
 			  </div>
-
+			  </div>
+			</div>
 		</section>
 	</div>
 	<script src="/assets/js/main.js"></script>

pages/registro.html

@@ -69,9 +69,7 @@ <h1>Cadastro</h1>
     </div>
 
     </section>  
-
-
-       <script src="/assets/js/main.js"></script>
+
 </body><!-- corpo-->
 
 </html>

pages/sobre.html

@@ -109,12 +109,7 @@ <h2 class="faq_header-title"> SOBRE</h2>
 
         </details>
 
-     </section>
-
-
-
-
-       <script src="/assets/js/main.js"></script>             
+     </section>          
 </body>
 
 </html>