sofiasawczenko · sofiasawczenko · Aug 20, 2023 · Oct 18, 2023 · Oct 24, 2023 · Oct 24, 2023
diff --git a/aboutUs.html b/aboutUs.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="./css/aboutUs.css">
+</head>
+<body>
+    <div class="container-xxl p-5 customBGC">
+        <h1>HEADER</h1>
+        <div class="me-5 ms-5 mt-5">
+            <img src="./img/background-img.png" class="rounded-3 img-fluid" alt="">
+        </div>
+        <div class="border rounded-2 p-5 mt-5 me-5 ms-5 text-center customSectionBGC">
+            <p class="fw-bold customHeadFontSize mb-3 mt-3 pb-5">Sobre a plataforma</p>
+            <div class="p-5 ratio ratio-16x9 21x9 mt-3">
+                <iframe src="https://www.youtube.com/embed/T9B9ysMakFo" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            </div>
+
+        </div>
+        <div class="border rounded-2 p-5 mt-5 mb-5 me-5 ms-5 text-center customSectionBGC">
+            <p class="fw-bold customHeadFontSize mt-3">Sobre nós</p>
+            <p class="mt-5 mb-5 ms-5 me-5 customBodyFontSize">Nós somos a equipe mySchneider da FIAP, composta por Leandro Cavallari, João Belluzo, Sofia Sawczenko, Gabriel Tavares e Breno Perrotti. Como estudantes apaixonados por tecnologia, unimos nossas habilidades para desenvolver uma rede social completa para a Schneider Electric. Ao combinar expertise em design, arquitetura de software, experiência do usuário e desenvolvimento frontend, criamos a plataforma  "MySchneider". Nosso compromisso com a excelência e inovação nos motiva a continuar gerando soluções impactantes e com valor aos nossos clientes.</p>
+        </div>
+        <h1>FOOTER</h1>
+    </div>
+
+</body>
+</html>
diff --git a/css/aboutUs.css b/css/aboutUs.css
@@ -0,0 +1,18 @@
+.customHeadFontSize{
+    font-size: 26px;
+    font-family: Varela Round, Sans-serif;
+}
+.customBodyFontSize{
+    font-size: 18px;
+    text-align: justify;
+    font-family: Varela Round, Sans-serif;
+}
+.customBGC{
+    background-color: #F9F9F9;
+}
+.customSectionBGC{
+    background-color: white;
+}
+.customMargin{
+    margin-left: 131px;
+}
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,5 @@
+.customBodyFontSize{
+    font-size: 18px;
+    text-align: justify;
+    font-family: Varela Round, Sans-serif;
+}
diff --git a/css/perfil.css b/css/perfil.css
@@ -0,0 +1,299 @@
+/* Header */ 
+
+#headerprofile{
+  display: flex;
+  justify-content: center;
+}
+
+#ulconfig{
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  text-decoration: none;
+  list-style: none;
+
+  @media (max-width: 1000px){
+    display: none;
+  }
+}
+
+.li-text{
+  font-family: 15;
+  font-weight: 600;
+  color: #8F8F8F;
+}
+
+/* Main */
+
+.imgremove{
+  display: block;
+  @media (max-width: 1000px) {
+    display: none
+  }
+}
+.imgremoveSMALLER{
+  display: block;
+  @media(max-width: 600px){
+    display: none;
+  }
+}
+.verTodos{
+  display: flex; 
+  flex-direction: row-reverse;
+  @media(max-width: 1000px){
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+
+#imgmodifier{
+  @media (max-width: 1000px) {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+#mainperfil{
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+
+  @media (max-width: 1000px){
+    flex-direction: column;
+  }
+}
+
+#maincontainer {
+  width: min(75vw, 60rem);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.containercard {
+  display: flex;
+  flex-direction: row;
+  height: auto; 
+  max-height: 100%; 
+  border: 1px solid #E0DFDC;
+  border-radius: 8px;
+
+  @media (max-width: 1000px){
+    flex-direction: column;
+  }
+}
+
+
+#containerimgandfollowers{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+#sizeandflex{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  height: 20%;
+  margin-top: 15px;
+
+  @media (max-width: 1000px){
+    flex-direction: column;
+  }
+}
+
+#h1main{
+  font-size: 35px;
+  font-weight: 600;
+  color: #000;
+  margin-left: 20px;
+}
+
+#organizeimg{
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  @media (max-width: 1000px){
+    margin-left: 20px;
+  }
+}
+
+#pmain{
+  font-size: 14px;
+  font-weight: 350;
+  color: rgba(0,0,0,0.60);
+  width: 130px;
+  margin-top: 15px;
+}
+
+#organizetexts{
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+#pmain2{
+  font-size: 16px;
+  font-weight: 350;
+  color: rgba(0,0,0,0.90);
+}
+
+#pmain3{
+  font-size: 14px;
+  font-weight: 350;
+  color: rgba(0,0,0,0.60);
+}
+
+#pmain4{
+  font-size: 16px;
+  font-weight: 400;
+  color: #626469;
+  width: 100%;
+}
+
+/* Card 2*/
+
+#containercardtwo{
+  height: 255px;
+  border: 1px solid #E0DFDC;
+  border-radius: 8px;
+
+  @media (max-width: 1000px){
+    height: auto;
+  }
+}
+/*Card 3*/
+#containercardthree{
+  height: 400px;
+  border: 1px solid #E0DFDC;
+  border-radius: 8px;
+
+  @media (max-width: 1000px){
+    display: none;
+  }
+}
+#containercardthree_innerContainer{
+  display: flex;
+  flex-direction: row;
+  height: 255px;
+  justify-content: space-evenly;
+
+}
+#containercardthree_innerCard{
+  height: 255px;
+
+  width: 30%;
+  border: 1px solid #E0DFDC;
+  border-radius: 8px;
+}
+.icons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+}
+#containercardthree-gambeta{
+
+  display: none;
+  @media (max-width: 1000px){
+    display: block;
+    height: 400px;
+    border: 1px solid #E0DFDC;
+    border-radius: 8px;
+  }
+}
+#text-gambeta{
+  text-align: center;
+}
+.icons small{
+  font-size: 0.8rem;
+}
+#InnerCard_Header{
+  height: 30%;
+}
+#ICH_text{
+  text-align: center;
+}
+#InnerCard_Footer{
+  height: 30%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+
+}
+#InnerCard_Body{
+  height: 40%;
+}
+#containercardthree_Footer{
+  text-align: center;
+}
+/* Achievements*/
+
+.containerachievements{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  @media (max-width: 1000px){
+    flex-direction: column;
+  }
+}
+
+.containeritem{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.pachievements{
+  font-size: 15px;
+  font-weight: 600;
+  text-align: center;
+  width: 200px;
+  color: #000;
+}
+
+/* Card Super*/
+
+.containersuper{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  @media (max-width: 1000px){
+    gap: 24px;
+    justify-content: space-evenly;
+  }
+}
+.containersuperLenin{
+  display: flex; 
+  flex-direction: row; 
+  gap: 20px;
+  @media(max-width: 1000px){
+    justify-content: space-evenly;
+  }
+}
+
+#containercardtwosuper{ 
+  width: min(30vw, 50rem);
+  border: 1px solid #E0DFDC;
+  height: 568px;
+  border-radius: 8px;
+
+  @media (max-width: 1000px){
+    margin-top: 10px;
+    width: min(75vw, 30rem);
+  }
+}
+
+.pcardsuper{
+  color: #3DCD58;
+  font-size: 18px;
+  font-weight: 600;
+}
diff --git a/img/background-img.png b/img/background-img.png