Add a new layout to about page

Adabriand Furtado
1 parent 15d19ea5
Showing 19 changed files with 205 additions and 32 deletions Show diff stats
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Black.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Bold.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-BoldItalic.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-ExtraLight.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-ExtraLightItalic.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Italic.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Light.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-LightItalic.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Regular.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-SemiBold.ttf
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-SemiBoldItalic.ttf
pybossa/themes/default/static/css/theme.css
pybossa/themes/default/static/img/about-illustration.png
pybossa/themes/default/static/img/blue-balloon.png
pybossa/themes/default/static/img/green-balloon.png
pybossa/themes/default/static/img/logo-lavid.png
pybossa/themes/default/static/img/orange-balloon.png
pybossa/themes/default/templates/_footer.html
pybossa/themes/default/templates/home/_about.html
@@ -9,8 +9,13 @@
 }
 @font-face {
-    font-family: 'Roboto';
-    src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
+    font-family: 'Roboto Medium';
+    src: url('fonts/roboto/Roboto-Medium.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Titillium Web Bold';
+    src: url('fonts/titilliumweb/TitilliumWeb-Bold.ttf') format('truetype');
 }
 html {
@@ -35,6 +40,12 @@ footer {
 footer a {
 	color: white;	
 }
+
+.wl-footer-lavid-logo {
+	max-width: 112px;
+	width: 100%;
+}
+
 @media (max-width: 768px) {
     body {
         margin: 0;
@@ -446,3 +457,120 @@ h6 small {
     vertical-align: middle;
     line-height: 80px;
 }
+
+/* About */
+.no-padding {
+	padding: 0;
+}
+
+.wl-balloon {
+	position: relative;
+	padding: 20px 50px 190px 50px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.wl-balloon-content {
+	display: table-cell;
+	vertical-align: middle;
+	height: 262px;
+	text-align: center;
+	font-size: 14px;
+}
+
+.wl-balloon-title-wrapper {
+	position: absolute;
+	bottom: 50px;
+	margin-left: 15px;
+}
+
+.wl-balloon-number {
+	font-family: 'Titillium Web Bold';
+	font-size: 60px;
+	font-weight: bold;
+	letter-spacing: -3.2px;
+}
+
+.wl-balloon-title {
+	font-family: 'Roboto Medium';
+	font-size: 18px;
+    padding-left: 70px;
+    padding-top: 37px;
+    line-height: 20px;
+}
+
+.wl-balloon.-green {
+	margin-top: 20px;
+	background-image: url('../img/green-balloon.png');
+	z-index: 3;
+}
+
+.wl-balloon.-green .wl-balloon-number {
+	color: #7ed17b;
+}
+
+.wl-balloon.-green .wl-balloon-title {
+	color: #368232;
+}
+
+.wl-balloon.-orange {
+	color: white;
+    padding-bottom: 210px;
+	background-image: url('../img/orange-balloon.png');
+	z-index: 2;
+}
+
+.wl-balloon.-orange .wl-balloon-number {
+	color: #c87433;
+}
+
+.wl-balloon.-orange .wl-balloon-title {
+	color: #8c4712;
+}
+
+.wl-balloon.-blue {
+	color: white;
+	padding-bottom: 250px;
+	background-image: url('../img/blue-balloon.png');
+	z-index: 1;
+}
+
+.wl-balloon.-blue .wl-balloon-number {
+	color: #4c96a6;
+}
+
+.wl-balloon.-blue .wl-balloon-title {
+	color: #3a7f8e;
+}
+
+.wl-about-illustration-responsive {
+	width: 200px;
+	margin-top: 25px;
+}
+
+.wl-about-illustration {
+	display: none;
+    width: 200px;
+    margin-left: 68px;
+}
+
+@media screen and (min-width: 992px) {
+	.wl-balloon.-green {
+		margin-right: -110px;
+	}
+	.wl-balloon.-orange {
+		margin-top: 220px;
+		margin-right: -110px;
+	}
+	.wl-balloon.-blue {
+		margin-top: 440px;
+		margin-right: -58px;
+	}
+	.wl-about-illustration {
+		display: block;
+	    margin-top: 100px;
+	}
+	.wl-about-illustration-responsive {
+		display: none;
+	}
+}
@@ -2,13 +2,16 @@
         <div class="row">
           <div class="col-sm-7">
             <div class="row">
-              <div class="col-xs-4 col-sm-3 col-sm-offset-1 text-center">
+              <div class="col-xs-3 text-center">
+                <a href="http://lavid.ufpb.br/"><img class="wl-footer-lavid-logo" src="{{url_for('static', filename='img/logo-lavid.png')}}"></a>
+              </div>
+              <div class="col-xs-3 text-center">
                 <a href="http://www.computacao.ufcg.edu.br/"><img src="{{url_for('static', filename='img/logocomp.png')}}" width="100%"></a>
               </div>
-              <div class="col-xs-4 col-sm-3 text-center">
+              <div class="col-xs-3 text-center">
                 <a href="http://www.lsd.ufcg.edu.br/"><img src="{{url_for('static', filename='img/logolsd.png')}}" width="100%"></a>
               </div>
-              <div class="col-xs-4 col-sm-3 text-center">
+              <div class="col-xs-3 text-center">
                 <a href="http://pybossa.com/"><img src="{{url_for('static', filename='img/pybossa.png')}}" width="100%"></a>
               </div>
             </div>
-<h2>COMO SURGIU?</h2>
-<p>
-	O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
-	dicionário de sinais utilizado pelo <a
-		href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua de
-	sinais é viva e novos sinais surgem diariamente. Para se criar um sinal
-	utilizando um software de animação leva-se de duas a quatro horas de
-	trabalho e, por esse motivo, surgiu a necessidade de através de alguns
-	cliques conseguir criar uma nova animação.
-</p>
-<h2>COMO FUNCIONA?</h2>
-<p>De forma simples e intuitiva, o WikiLibras possibilita a
-	submissão de vídeos gravados pelos usuários para cada novo sinal; a
-	criação de animações com apenas alguns cliques; a
-	avaliação de sinais criados por outros usuários na ferramenta e a
-	correção das animações, através do download e submissão da animação
-	corrigida em um software de modelagem.</p>
-<h2>POR QUE A SUA CONTRIBUIÇÃO É IMPORTANTE?</h2>
-<p>Os sinais produzidos pela comunidade WikiLibras terão diversas
-	utilidades. Entre elas, a possibilidade de criar dicionários regionais
-	de sinais. Ao enviar um novo vídeo de um sinal, o usuário também
-	informa a região onde aquele sinal é sinalizado. Dessa forma, será
-	possível agrupar essses novos sinais de acordo com a sua região.</p>
-<p>Outra utilidade é a contribuição da própria comunidade na criação
-	do dicionário de sinais. Toda a população pode contribuir na melhoria
-	do dicionário enviando novos vídeos, criando animações e avaliando
-	sinais.</p>
 \ No newline at end of file
+<div class="row">
+	<div class="col-md-4 col-xs-12 no-padding">
+		<div class="row">
+			<div class="col-md-12 text-center">
+				<img class="wl-about-illustration-responsive" src="static/img/about-illustration.png">
+			</div>
+			<div class="col-md-12">
+				<div class="wl-balloon -green">
+					<div class="wl-balloon-content">
+						O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
+						dicionário de sinais utilizado pelo <a
+							href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua
+						de sinais é viva e novos sinais surgem diariamente. Para se criar
+						um sinal utilizando um software de animação leva-se de duas a
+						quatro horas de trabalho e, por esse motivo, surgiu a necessidade
+						de através de alguns cliques conseguir criar uma nova animação.
+					</div>
+					<div class="wl-balloon-title-wrapper">
+						<div class="wl-balloon-number pull-left">01</div>
+						<div class="wl-balloon-title">
+							Surgimento e<br> motivação
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-12">
+				<img class="wl-about-illustration" src="static/img/about-illustration.png">
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4 col-xs-12 no-padding">
+		<div class="wl-balloon -orange">
+			<div class="wl-balloon-content">
+				De forma simples e intuitiva, o <strong>WikiLibras</strong>
+				possibilita a submissão de vídeos gravados pelos usuários para cada
+				novo sinal; a criação de animações com apenas alguns cliques; a
+				avaliação de sinais criados por outros usuários na ferramenta e a
+				correção das animações, através do download e submissão da animação
+				corrigida em um software de modelagem.
+			</div>
+			<div class="wl-balloon-title-wrapper">
+				<div class="wl-balloon-number pull-left">02</div>
+				<div class="wl-balloon-title">
+					Detalhes do<br> WikiLibras
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4 col-xs-12 no-padding">
+		<div class="wl-balloon -blue">
+			<div class="wl-balloon-content">
+				<strong>WikiLibras</strong> possui diversas utilidades.<br> Uma
+				delas é a possibilidade de criar dicionários regionais de sinais. Ao
+				enviar um novo vídeo de um sinal, o usuário também informa a região
+				onde aquele sinal é sinalizado. Dessa forma, será possível agrupar
+				essses novos sinais de acordo com a sua região. Outra utilidade é a
+				contribuição da própria comunidade na criação do dicionário de
+				sinais. Toda a população pode contribuir na melhoria do dicionário
+				enviando novos vídeos, criando animações e avaliando sinais.
+			</div>
+			<div class="wl-balloon-title-wrapper">
+				<div class="wl-balloon-number pull-left">03</div>
+				<div class="wl-balloon-title">
+					Utilidade do<br> WikiLibras
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
 \ No newline at end of file
	@@ -9,8 +9,13 @@		@@ -9,8 +9,13 @@
9	}	9	}
10		10
11	@font-face {	11	@font-face {
12	- font-family: 'Roboto';
13	- src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');	12	+ font-family: 'Roboto Medium';
		13	+ src: url('fonts/roboto/Roboto-Medium.ttf') format('truetype');
		14	+}
		15	+
		16	+@font-face {
		17	+ font-family: 'Titillium Web Bold';
		18	+ src: url('fonts/titilliumweb/TitilliumWeb-Bold.ttf') format('truetype');
14	}	19	}
15		20
16	html {	21	html {
	@@ -35,6 +40,12 @@ footer {		@@ -35,6 +40,12 @@ footer {
35	footer a {	40	footer a {
36	color: white;	41	color: white;
37	}	42	}
		43	+
		44	+.wl-footer-lavid-logo {
		45	+ max-width: 112px;
		46	+ width: 100%;
		47	+}
		48	+
38	@media (max-width: 768px) {	49	@media (max-width: 768px) {
39	body {	50	body {
40	margin: 0;	51	margin: 0;
	@@ -446,3 +457,120 @@ h6 small {		@@ -446,3 +457,120 @@ h6 small {
446	vertical-align: middle;	457	vertical-align: middle;
447	line-height: 80px;	458	line-height: 80px;
448	}	459	}
		460	+
		461	+/* About */
		462	+.no-padding {
		463	+ padding: 0;
		464	+}
		465	+
		466	+.wl-balloon {
		467	+ position: relative;
		468	+ padding: 20px 50px 190px 50px;
		469	+ background-repeat: no-repeat;
		470	+ background-size: 100% 100%;
		471	+}
		472	+
		473	+.wl-balloon-content {
		474	+ display: table-cell;
		475	+ vertical-align: middle;
		476	+ height: 262px;
		477	+ text-align: center;
		478	+ font-size: 14px;
		479	+}
		480	+
		481	+.wl-balloon-title-wrapper {
		482	+ position: absolute;
		483	+ bottom: 50px;
		484	+ margin-left: 15px;
		485	+}
		486	+
		487	+.wl-balloon-number {
		488	+ font-family: 'Titillium Web Bold';
		489	+ font-size: 60px;
		490	+ font-weight: bold;
		491	+ letter-spacing: -3.2px;
		492	+}
		493	+
		494	+.wl-balloon-title {
		495	+ font-family: 'Roboto Medium';
		496	+ font-size: 18px;
		497	+ padding-left: 70px;
		498	+ padding-top: 37px;
		499	+ line-height: 20px;
		500	+}
		501	+
		502	+.wl-balloon.-green {
		503	+ margin-top: 20px;
		504	+ background-image: url('../img/green-balloon.png');
		505	+ z-index: 3;
		506	+}
		507	+
		508	+.wl-balloon.-green .wl-balloon-number {
		509	+ color: #7ed17b;
		510	+}
		511	+
		512	+.wl-balloon.-green .wl-balloon-title {
		513	+ color: #368232;
		514	+}
		515	+
		516	+.wl-balloon.-orange {
		517	+ color: white;
		518	+ padding-bottom: 210px;
		519	+ background-image: url('../img/orange-balloon.png');
		520	+ z-index: 2;
		521	+}
		522	+
		523	+.wl-balloon.-orange .wl-balloon-number {
		524	+ color: #c87433;
		525	+}
		526	+
		527	+.wl-balloon.-orange .wl-balloon-title {
		528	+ color: #8c4712;
		529	+}
		530	+
		531	+.wl-balloon.-blue {
		532	+ color: white;
		533	+ padding-bottom: 250px;
		534	+ background-image: url('../img/blue-balloon.png');
		535	+ z-index: 1;
		536	+}
		537	+
		538	+.wl-balloon.-blue .wl-balloon-number {
		539	+ color: #4c96a6;
		540	+}
		541	+
		542	+.wl-balloon.-blue .wl-balloon-title {
		543	+ color: #3a7f8e;
		544	+}
		545	+
		546	+.wl-about-illustration-responsive {
		547	+ width: 200px;
		548	+ margin-top: 25px;
		549	+}
		550	+
		551	+.wl-about-illustration {
		552	+ display: none;
		553	+ width: 200px;
		554	+ margin-left: 68px;
		555	+}
		556	+
		557	+@media screen and (min-width: 992px) {
		558	+ .wl-balloon.-green {
		559	+ margin-right: -110px;
		560	+ }
		561	+ .wl-balloon.-orange {
		562	+ margin-top: 220px;
		563	+ margin-right: -110px;
		564	+ }
		565	+ .wl-balloon.-blue {
		566	+ margin-top: 440px;
		567	+ margin-right: -58px;
		568	+ }
		569	+ .wl-about-illustration {
		570	+ display: block;
		571	+ margin-top: 100px;
		572	+ }
		573	+ .wl-about-illustration-responsive {
		574	+ display: none;
		575	+ }
		576	+}
1	-<h2>COMO SURGIU?</h2>
2	-<p>
3	- O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
4	- dicionário de sinais utilizado pelo <a
5	- href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua de
6	- sinais é viva e novos sinais surgem diariamente. Para se criar um sinal
7	- utilizando um software de animação leva-se de duas a quatro horas de
8	- trabalho e, por esse motivo, surgiu a necessidade de através de alguns
9	- cliques conseguir criar uma nova animação.
10	-</p>
11	-<h2>COMO FUNCIONA?</h2>
12	-<p>De forma simples e intuitiva, o WikiLibras possibilita a
13	- submissão de vídeos gravados pelos usuários para cada novo sinal; a
14	- criação de animações com apenas alguns cliques; a
15	- avaliação de sinais criados por outros usuários na ferramenta e a
16	- correção das animações, através do download e submissão da animação
17	- corrigida em um software de modelagem.</p>
18	-<h2>POR QUE A SUA CONTRIBUIÇÃO É IMPORTANTE?</h2>
19	-<p>Os sinais produzidos pela comunidade WikiLibras terão diversas
20	- utilidades. Entre elas, a possibilidade de criar dicionários regionais
21	- de sinais. Ao enviar um novo vídeo de um sinal, o usuário também
22	- informa a região onde aquele sinal é sinalizado. Dessa forma, será
23	- possível agrupar essses novos sinais de acordo com a sua região.</p>
24	-<p>Outra utilidade é a contribuição da própria comunidade na criação
25	- do dicionário de sinais. Toda a população pode contribuir na melhoria
26	- do dicionário enviando novos vídeos, criando animações e avaliando
27	- sinais.</p>
28	\ No newline at end of file	1	\ No newline at end of file
		2	+<div class="row">
		3	+ <div class="col-md-4 col-xs-12 no-padding">
		4	+ <div class="row">
		5	+ <div class="col-md-12 text-center">
		6	+ <img class="wl-about-illustration-responsive" src="static/img/about-illustration.png">
		7	+ </div>
		8	+ <div class="col-md-12">
		9	+ <div class="wl-balloon -green">
		10	+ <div class="wl-balloon-content">
		11	+ O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
		12	+ dicionário de sinais utilizado pelo <a
		13	+ href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua
		14	+ de sinais é viva e novos sinais surgem diariamente. Para se criar
		15	+ um sinal utilizando um software de animação leva-se de duas a
		16	+ quatro horas de trabalho e, por esse motivo, surgiu a necessidade
		17	+ de através de alguns cliques conseguir criar uma nova animação.
		18	+ </div>
		19	+ <div class="wl-balloon-title-wrapper">
		20	+ <div class="wl-balloon-number pull-left">01</div>
		21	+ <div class="wl-balloon-title">
		22	+ Surgimento e<br> motivação
		23	+ </div>
		24	+ </div>
		25	+ </div>
		26	+ </div>
		27	+ <div class="col-md-12">
		28	+ <img class="wl-about-illustration" src="static/img/about-illustration.png">
		29	+ </div>
		30	+ </div>
		31	+ </div>
		32	+ <div class="col-md-4 col-xs-12 no-padding">
		33	+ <div class="wl-balloon -orange">
		34	+ <div class="wl-balloon-content">
		35	+ De forma simples e intuitiva, o <strong>WikiLibras</strong>
		36	+ possibilita a submissão de vídeos gravados pelos usuários para cada
		37	+ novo sinal; a criação de animações com apenas alguns cliques; a
		38	+ avaliação de sinais criados por outros usuários na ferramenta e a
		39	+ correção das animações, através do download e submissão da animação
		40	+ corrigida em um software de modelagem.
		41	+ </div>
		42	+ <div class="wl-balloon-title-wrapper">
		43	+ <div class="wl-balloon-number pull-left">02</div>
		44	+ <div class="wl-balloon-title">
		45	+ Detalhes do<br> WikiLibras
		46	+ </div>
		47	+ </div>
		48	+ </div>
		49	+ </div>
		50	+ <div class="col-md-4 col-xs-12 no-padding">
		51	+ <div class="wl-balloon -blue">
		52	+ <div class="wl-balloon-content">
		53	+ <strong>WikiLibras</strong> possui diversas utilidades.<br> Uma
		54	+ delas é a possibilidade de criar dicionários regionais de sinais. Ao
		55	+ enviar um novo vídeo de um sinal, o usuário também informa a região
		56	+ onde aquele sinal é sinalizado. Dessa forma, será possível agrupar
		57	+ essses novos sinais de acordo com a sua região. Outra utilidade é a
		58	+ contribuição da própria comunidade na criação do dicionário de
		59	+ sinais. Toda a população pode contribuir na melhoria do dicionário
		60	+ enviando novos vídeos, criando animações e avaliando sinais.
		61	+ </div>
		62	+ <div class="wl-balloon-title-wrapper">
		63	+ <div class="wl-balloon-number pull-left">03</div>
		64	+ <div class="wl-balloon-title">
		65	+ Utilidade do<br> WikiLibras
		66	+ </div>
		67	+ </div>
		68	+ </div>
		69	+ </div>
		70	+</div>
29	\ No newline at end of file	71	\ No newline at end of file