SlideShare ist ein Scribd-Unternehmen logo
1 von 37
CSS Methodology by Zohar Arad
What is CSS? ,[object Object],[object Object],[object Object]
CSS Basics - Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Selectors Selector Pattern Description Universal * Matches any element Type (element) E Matches any E element Class .class Matches any element with class="class" ID #id Matches any element with id="id" Descendant E D Matches any element D who is a descendant of element E Child E > D Matches any element D who is a direct child of element E Sibling E + D Matches any element D who is a direct sibling (adjacent) of element E Attribute E[attr] E[attr=val] E[attr~=val1 val2] E[attr|=val] Match element with attr attribute is equal to val attribute is equal to val1 or val2 attribute is not equal to val Pseudo-classes :hover, :active, :visited, :link, :first-child, :first-line, :first-letter :before, :after
CSS Basics - Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution p - 0,0,0,1   p.class - 0,0,1,1   #nav li.active - 0,1,1,1 .ie .menu a:hover - 0,0,3,1 form input[type=submit] - 0,0,0,2 inline styles ID selectors Class selectors Type selectors 1 1 1 1
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics  ,[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object]
Design Deconstruction ,[object Object],[object Object],[object Object],[object Object],[object Object]
Design Deconstruction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Break... ,[object Object]
Javascript ,[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object]
Javascript  ,[object Object]

Weitere ähnliche Inhalte

Was ist angesagt?

Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptMarc Huang
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!Syahmi RH
 
Internet tech & web prog. p4,5
Internet tech & web prog.  p4,5Internet tech & web prog.  p4,5
Internet tech & web prog. p4,5Taymoor Nazmy
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1Shawn Calvert
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!FITC
 

Was ist angesagt? (19)

Basic css
Basic cssBasic css
Basic css
 
Dominate The Theme Layer
Dominate The Theme LayerDominate The Theme Layer
Dominate The Theme Layer
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
Internet tech & web prog. p4,5
Internet tech & web prog.  p4,5Internet tech & web prog.  p4,5
Internet tech & web prog. p4,5
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Css3
Css3Css3
Css3
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Css
CssCss
Css
 

Andere mochten auch

Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end appsZohar Arad
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
Rolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyRolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyFITC
 

Andere mochten auch (6)

Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Rolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyRolling Your Own CSS Methodology
Rolling Your Own CSS Methodology
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 

Ähnlich wie CSS Methodology

Ähnlich wie CSS Methodology (20)

Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Css and its future
Css and its futureCss and its future
Css and its future
 
Css
CssCss
Css
 
Css
CssCss
Css
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
 
Webpage style with CSS
Webpage style with CSSWebpage style with CSS
Webpage style with CSS
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
CSS 101
CSS 101CSS 101
CSS 101
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 

Kürzlich hochgeladen

Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 

Kürzlich hochgeladen (20)

Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

CSS Methodology

  • 1. CSS Methodology by Zohar Arad
  • 2.
  • 3.
  • 4. CSS Basics - Selectors Selector Pattern Description Universal * Matches any element Type (element) E Matches any E element Class .class Matches any element with class="class" ID #id Matches any element with id="id" Descendant E D Matches any element D who is a descendant of element E Child E > D Matches any element D who is a direct child of element E Sibling E + D Matches any element D who is a direct sibling (adjacent) of element E Attribute E[attr] E[attr=val] E[attr~=val1 val2] E[attr|=val] Match element with attr attribute is equal to val attribute is equal to val1 or val2 attribute is not equal to val Pseudo-classes :hover, :active, :visited, :link, :first-child, :first-line, :first-letter :before, :after
  • 5.
  • 6.
  • 7. CSS Basics - Conflict Resolution p - 0,0,0,1   p.class - 0,0,1,1   #nav li.active - 0,1,1,1 .ie .menu a:hover - 0,0,3,1 form input[type=submit] - 0,0,0,2 inline styles ID selectors Class selectors Type selectors 1 1 1 1
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.