Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sofia perfil #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Sofia perfil #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1511e5c
Feito
GabrielMikas Aug 20, 2023
bf4acbb
responsive perfil
GabrielMikas Oct 18, 2023
7542461
ssfd
GabrielMikas Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions aboutUs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 18 additions & 0 deletions css/aboutUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.customBodyFontSize{
font-size: 18px;
text-align: justify;
font-family: Varela Round, Sans-serif;
}
260 changes: 260 additions & 0 deletions css/perfil.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,260 @@
/* 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: 500px;
border: 1px solid #E0DFDC;
border-radius: 8px;

@media (max-width: 1000px){
height: auto;
}
}
#containercardthree_innerContainer{
display: flex;
flex-direction: row;
height: 100%;
justify-content: space-evenly;

}
#containercardthree_innerCard{
height: 255px;

width: 30%;
border: 1px solid #E0DFDC;
border-radius: 8px;
}
#InncerCard_Footer{
height: 1px;
}
/* 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;
}
Binary file added img/background-img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/index.css">
<title>Document</title>
</head>
<body>
<div class="container-xxl">
<button class="btn btn-primary">
<a href="./aboutUs.html" class="link-light link-offset-2 link-underline link-underline-opacity-0">
<h1>Clique aqui para começar a sua jornada!</h1>
</a>

</button>


<div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#SobreProjeto">Sobre o projeto</button>
<div class="modal fade" id="SobreProjeto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Sobre o projeto</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="p-3">
<p class="customBodyFontSize">O projeto mySchneider foi construído utilizando HTML + Javascript, sem a utilização de frameworks ou bibliotecas adicionais.<br>
A estilização foi realizada com uma junção de Bootstrap v5.3 + CSS.<br>
As escolhas de design foram tomadas de modo a priorizar a USABILIDADE e INTUITIVIDADE do sistema.
</p>
<h2>Quem somos?</h2>
<p class="customBodyFontSize">A mySchneider foi desenvolvida por um grupo de 5 desenvolvedores estudantes da FIAP, cujas participações na idealização e realização do projeto foram comparativamente equivalentes:</p>
<p class="customBodyFontSize">Breno: Responsável pela codificação da tela "Ranking" e pela pós produção do video pitch</p>
<p class="customBodyFontSize">Gabriel: Responsável pela roteirização do video pitch e pela codificação da página "Sobre o Projeto"</p>
<p class="customBodyFontSize">João: Responsável pela codificação da páginas de login e "Fórum"</p>
<p class="customBodyFontSize">Leandro: Responsável pela codificação da página "Inicio" e direção de projeto</p>
<p class="customBodyFontSize">Sofia: Responsável pela codificação da página "Perfil" e realização do protótipo no Figma</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#VideoPitch">Video Pitch</button>
<div class="modal fade" id="VideoPitch" tabindex="-1" aria-labelledby="VideoPitch" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Video Pitch</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<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>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
Loading