Prototyping event community secondary page

Fabio Teixeira
1 parent 4aac2da9
Showing 3 changed files with 125 additions and 29 deletions Show diff stats
images/icone_pin.png
pagina_comunidade.css
style.css
@@ -534,10 +534,11 @@ ul#itens-legend-grafic{
 /*********************** Página de eventos da comunidade *******************/
 #event-card {
+  float: left;
   border-top: 1px dotted #D3D6D3;
   padding-top: 33px;
   width: 494px;
-  height: 216px;
+  height: 173px;
   /*background-image: url('images/evento-teste.jpg');*/
   background-repeat: no-repeat;
 }
@@ -553,29 +554,27 @@ ul#itens-legend-grafic{
 .about-event {
   position: relative;
   float: left;
+  height: 160px;
   width: 300px;
   max-width: 300px;
-  height: inherit;
 }
-.about-event span {
+.about-event > span {
   font-family: arial;
   display: block;
   max-width: inherit;
-  margin-left: 40px;
+  margin-left: 20px;
+  padding-left: 21px; 
+  line-height: 13px;
+  margin-right: 11px;
 }
 .about-event .event-date {
   font-weight: bold;
-  letter-spacing: 0.56px;
+  letter-spacing: 0.49px;
   margin-top: 3px;
 }
-.about-event .event-link {
-  margin-top: 16px;
-  letter-spacing: 0.34px;
-}
-
 .about-event .event-address {
   margin-top: 19px;
 }
@@ -584,22 +583,8 @@ ul#itens-legend-grafic{
   display: block;
   margin-left: 0px;
   margin-top: 4.4px;
-}
-
-.about-event .event-address #area {
-  letter-spacing: 0.54px;
-}
-
-.about-event .event-address #district {
-  letter-spacing: 0.7px;
-}
-
-.about-event .event-address #city {
-  letter-spacing: 0.68px;
-}
-
-.about-event .event-address #cep {
-  letter-spacing: 0.65px;
+  line-height: 14px;
+  letter-spacing: 0.5px;
 }
 /*
@@ -609,15 +594,125 @@ ul#itens-legend-grafic{
 */
 #community-page {
+  width: 494px;
   height: 716px;
-  background-image: url('images/teste.png');
+  /*background-image: url('images/pagina-comunidade-teste.png');*/
   background-repeat: no-repeat;
 }
 #community-page h1 {
-  margin-bottom: 16px;
+  margin-bottom: 17px;
   text-align: left;
   font-size: 32px;
   line-height: 30px;
-  letter-spacing: 0.1px;
+  padding-left: 1px;
+}
+
+.event-date {
+  background: url('images/calendar-icon.png') no-repeat left center;
+}
+
+.event-link {
+  background: url('images/calendar-icon.png') no-repeat left center;
+  margin-top: 18px;
+  letter-spacing: 0.48px;
+}
+
+.event-address {
+  background: url('images/icone_pin.png') no-repeat left top;
+}
+
+.event-body {
+  float: left;
+}
+
+.event-body h2 {
+  margin-left: 2px !important;
+  width: 494px;
+  letter-spacing: -0.4px;
+  line-height: 26px;
+  margin-bottom: -3px !important;
+}
+
+.event-body .event-content p {
+  font-size: 15px;
+  font-family: Arial;
+  margin-top: 20px;
+  width: 494px;
+  padding-left: 2px;
+  line-height: 22px;
+}
+
+/********** event side box **********/
+
+.community-side-box {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #D3D6DE;
+  border-radius: 7px;
+  margin-bottom: 27px;
+  overflow: hidden;
+}
+
+.community-logo {
+  content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
+  /*content: url('images/bg-bloco-de-trilhas.png');*/
+  width: 100%;
+  border-bottom: 3px solid #3E67B1;
+}
+
+.community-name {
+  font-family: Arial;
+  font-size: 14px;
+  font-weight: 700;
+  padding-top: 13px;
+  text-align: center; 
+  height: 100%;
+  background-color: #ECEDF1;
+}
+
+.community-name p {
+  line-height: 17px;
+  letter-spacing: 0px;
+}
+
+.community-side-box table {
+  background-color: #ECEDF1;
+}
+
+.community-side-box table th {
+  font-weight: 700;
+  text-align: left;
+  font-family: Arial;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding-top: 9px;
+  padding-left: 13px;
+  padding-bottom: 0px;
+  letter-spacing: -1px;
+  border-bottom: 1px solid #D3D6DE;
+}
+
+.community-side-box table td {
+  text-align: left;
+  border-bottom: 1px solid #D3D6DE;
+  height: 42px;
+  padding-top: 9px;
+  padding-left: 13px;
+}
+
+.another-events-date {
+  color: #2C4B6B;
+  font-weight: 700;
+}
+
+.another-event {
+  color: #172738;
+}
+
+/************************** PÁGINA BLOG **************************/
+
+#community-blog {
+  background-image: url('images/blog-teste.png');
+  background-repeat: no-repeat; 
 }
 \ No newline at end of file
@@ -753,6 +753,7 @@ p {
 }
 .block-outer {
+    float: left;
     margin-bottom: 45px;
     clear: both;
 }
	@@ -534,10 +534,11 @@ ul#itens-legend-grafic{		@@ -534,10 +534,11 @@ ul#itens-legend-grafic{
534	/********************* Página de eventos da comunidade *****************/	534	/********************* Página de eventos da comunidade *****************/
535		535
536	#event-card {	536	#event-card {
		537	+ float: left;
537	border-top: 1px dotted #D3D6D3;	538	border-top: 1px dotted #D3D6D3;
538	padding-top: 33px;	539	padding-top: 33px;
539	width: 494px;	540	width: 494px;
540	- height: 216px;	541	+ height: 173px;
541	/background-image: url('images/evento-teste.jpg');/	542	/background-image: url('images/evento-teste.jpg');/
542	background-repeat: no-repeat;	543	background-repeat: no-repeat;
543	}	544	}
	@@ -553,29 +554,27 @@ ul#itens-legend-grafic{		@@ -553,29 +554,27 @@ ul#itens-legend-grafic{
553	.about-event {	554	.about-event {
554	position: relative;	555	position: relative;
555	float: left;	556	float: left;
		557	+ height: 160px;
556	width: 300px;	558	width: 300px;
557	max-width: 300px;	559	max-width: 300px;
558	- height: inherit;
559	}	560	}
560		561
561	-.about-event span {	562	+.about-event > span {
562	font-family: arial;	563	font-family: arial;
563	display: block;	564	display: block;
564	max-width: inherit;	565	max-width: inherit;
565	- margin-left: 40px;	566	+ margin-left: 20px;
		567	+ padding-left: 21px;
		568	+ line-height: 13px;
		569	+ margin-right: 11px;
566	}	570	}
567		571
568	.about-event .event-date {	572	.about-event .event-date {
569	font-weight: bold;	573	font-weight: bold;
570	- letter-spacing: 0.56px;	574	+ letter-spacing: 0.49px;
571	margin-top: 3px;	575	margin-top: 3px;
572	}	576	}
573		577
574	-.about-event .event-link {
575	- margin-top: 16px;
576	- letter-spacing: 0.34px;
577	-}
578	-
579	.about-event .event-address {	578	.about-event .event-address {
580	margin-top: 19px;	579	margin-top: 19px;
581	}	580	}
	@@ -584,22 +583,8 @@ ul#itens-legend-grafic{		@@ -584,22 +583,8 @@ ul#itens-legend-grafic{
584	display: block;	583	display: block;
585	margin-left: 0px;	584	margin-left: 0px;
586	margin-top: 4.4px;	585	margin-top: 4.4px;
587	-}
588	-
589	-.about-event .event-address #area {
590	- letter-spacing: 0.54px;
591	-}
592	-
593	-.about-event .event-address #district {
594	- letter-spacing: 0.7px;
595	-}
596	-
597	-.about-event .event-address #city {
598	- letter-spacing: 0.68px;
599	-}
600	-
601	-.about-event .event-address #cep {
602	- letter-spacing: 0.65px;	586	+ line-height: 14px;
		587	+ letter-spacing: 0.5px;
603	}	588	}
604		589
605	/*	590	/*
	@@ -609,15 +594,125 @@ ul#itens-legend-grafic{		@@ -609,15 +594,125 @@ ul#itens-legend-grafic{
609	*/	594	*/
610		595
611	#community-page {	596	#community-page {
		597	+ width: 494px;
612	height: 716px;	598	height: 716px;
613	- background-image: url('images/teste.png');	599	+ /background-image: url('images/pagina-comunidade-teste.png');/
614	background-repeat: no-repeat;	600	background-repeat: no-repeat;
615	}	601	}
616		602
617	#community-page h1 {	603	#community-page h1 {
618	- margin-bottom: 16px;	604	+ margin-bottom: 17px;
619	text-align: left;	605	text-align: left;
620	font-size: 32px;	606	font-size: 32px;
621	line-height: 30px;	607	line-height: 30px;
622	- letter-spacing: 0.1px;	608	+ padding-left: 1px;
		609	+}
		610	+
		611	+.event-date {
		612	+ background: url('images/calendar-icon.png') no-repeat left center;
		613	+}
		614	+
		615	+.event-link {
		616	+ background: url('images/calendar-icon.png') no-repeat left center;
		617	+ margin-top: 18px;
		618	+ letter-spacing: 0.48px;
		619	+}
		620	+
		621	+.event-address {
		622	+ background: url('images/icone_pin.png') no-repeat left top;
		623	+}
		624	+
		625	+.event-body {
		626	+ float: left;
		627	+}
		628	+
		629	+.event-body h2 {
		630	+ margin-left: 2px !important;
		631	+ width: 494px;
		632	+ letter-spacing: -0.4px;
		633	+ line-height: 26px;
		634	+ margin-bottom: -3px !important;
		635	+}
		636	+
		637	+.event-body .event-content p {
		638	+ font-size: 15px;
		639	+ font-family: Arial;
		640	+ margin-top: 20px;
		641	+ width: 494px;
		642	+ padding-left: 2px;
		643	+ line-height: 22px;
		644	+}
		645	+
		646	+/******** event side box ********/
		647	+
		648	+.community-side-box {
		649	+ width: 100%;
		650	+ height: 100%;
		651	+ border: 1px solid #D3D6DE;
		652	+ border-radius: 7px;
		653	+ margin-bottom: 27px;
		654	+ overflow: hidden;
		655	+}
		656	+
		657	+.community-logo {
		658	+ content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
		659	+ /content: url('images/bg-bloco-de-trilhas.png');/
		660	+ width: 100%;
		661	+ border-bottom: 3px solid #3E67B1;
		662	+}
		663	+
		664	+.community-name {
		665	+ font-family: Arial;
		666	+ font-size: 14px;
		667	+ font-weight: 700;
		668	+ padding-top: 13px;
		669	+ text-align: center;
		670	+ height: 100%;
		671	+ background-color: #ECEDF1;
		672	+}
		673	+
		674	+.community-name p {
		675	+ line-height: 17px;
		676	+ letter-spacing: 0px;
		677	+}
		678	+
		679	+.community-side-box table {
		680	+ background-color: #ECEDF1;
		681	+}
		682	+
		683	+.community-side-box table th {
		684	+ font-weight: 700;
		685	+ text-align: left;
		686	+ font-family: Arial;
		687	+ font-size: 14px;
		688	+ text-transform: uppercase;
		689	+ padding-top: 9px;
		690	+ padding-left: 13px;
		691	+ padding-bottom: 0px;
		692	+ letter-spacing: -1px;
		693	+ border-bottom: 1px solid #D3D6DE;
		694	+}
		695	+
		696	+.community-side-box table td {
		697	+ text-align: left;
		698	+ border-bottom: 1px solid #D3D6DE;
		699	+ height: 42px;
		700	+ padding-top: 9px;
		701	+ padding-left: 13px;
		702	+}
		703	+
		704	+.another-events-date {
		705	+ color: #2C4B6B;
		706	+ font-weight: 700;
		707	+}
		708	+
		709	+.another-event {
		710	+ color: #172738;
		711	+}
		712	+
		713	+/************************ PÁGINA BLOG ************************/
		714	+
		715	+#community-blog {
		716	+ background-image: url('images/blog-teste.png');
		717	+ background-repeat: no-repeat;
623	}	718	}
624	\ No newline at end of file	719	\ No newline at end of file
	@@ -753,6 +753,7 @@ p {		@@ -753,6 +753,7 @@ p {
753	}	753	}
754		754
755	.block-outer {	755	.block-outer {
		756	+ float: left;
756	margin-bottom: 45px;	757	margin-bottom: 45px;
757	clear: both;	758	clear: both;
758	}	759	}