1 versão tela de perfil

FGA0138-MDS-Ajax · Nov 3, 2023 · 1d1ffb7 · 1d1ffb7
1 parent 07f157e
commit 1d1ffb7
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 16 deletions.
diff --git a/frontend/src/pages/Perfil.jsx b/frontend/src/pages/Perfil.jsx
@@ -6,12 +6,13 @@ function  Perfil () {
         <div className="fundo-Perfil">
             <div className="main-perfil">
                 <div className="left-perfil">
-                    <span>Editar Perfil</span>
-                    <span>Gerenciador de Falta</span>
-                    <button>Voltar</button>
+                    <h2> UNB </h2>
+                    <span className="Editar-perfil"> Editar Perfil</span><br></br><br></br><br></br><br></br><br></br>
+                    <span className="Geren-falt">Gerenciador de Falta</span><br></br>
+                    <button className="button-Perfil">Voltar</button>
                 </div>
                <div className="right-perfil">
-                    <h3>Materias Semestre</h3>
+                    <h3>Materias Semestre </h3>
 
                 </div> 
             </div>

diff --git a/frontend/src/stylesheets/Perfil.css b/frontend/src/stylesheets/Perfil.css
@@ -20,25 +20,115 @@ html {
 body {
   background: linear-gradient(180deg, #0a0e19 0%, rgba(10, 14, 25, 0) 100%);
 }
-
+/*Tela-de-fundo*/
 .fundo-Perfil{
 
     background-color: white;
-    width: 50%;
-    height: 50%;
+    width:100%;
+    height: 100%;
+    margin: 0 auto;
+    background-color: #0d1117;
+    border-radius: 30px 30px 30px 30px;
 }
+/*Principal*/
 .main-perfil{
-    background-color: green;
-    width: 80%;
-    height: 40%;
-}
+  width: 1520px;
+  height: 735px;
+  display: flex;
 
-.left-Perfil{
-    background-color: red;
-    color: green;
 }
 
-.h3{
-    font-size: 50%;
+/*Parte-esquerda*/
+ .left-Perfil{
+  display: flex;
+  width: 50%;
+  height: 50%;
+
+
+}
+h2{
+  display: flex;
+     margin-bottom: 40%;
+    height: 25%;
+    margin-left: 100px;
+    margin-top: -20%;
     color: white;
+    text-align: center;
+    font-family: 'fonts/Inter';
+    font-size: 35px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 3.85px;
+    display: flex;
+    flex-direction: column;
+justify-content: center;
+}
+
+.Editar-perfil{
+  margin-left: 100px;
+   color: white;
+    text-align: center;
+    font-family: 'fonts/Inter';
+    font-size: 23px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 2.64px;
+
+}
+.Geren-falt{
+  flex-direction: column;
+  display: flex;
+  margin-left: 70px;
+   color: white;
+    text-align: center;
+    font-family: 'fonts/Inter';
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 2.64px;
+
+}
+.button-Perfil{
+  color: white;
+  margin-top: 270px;
+  margin-left: 120px;
+  font-size: 23px;
+  display: flex;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: normal;
+  font-weight: 500;
+  justify-content: center;
+border: none;
+border-radius: 10px;
+display: flex;
+align-items: center;
+background: #0d1117;
+
+}
+.button-Perfil button{
+  text-decoration: none;
+
+}
+
+/*Parte-direita*/
+.right-perfil{
+  border-radius: 30px;
+  margin-left: 15%;
+  width: 65%;
+  height: 80%;
+  background-color:white;
+  text-align: center;
+  margin-top: 100px;
+
+}
+
+h3{
+    font-size: 100%;
+    color: black;
+    text-align: center;
+
 }