From 36cb04d76fd126bddfae4bfedfba501b2bbfadb1 Mon Sep 17 00:00:00 2001
From: Felipe da Silva <silvacontatoweb@gmail.com>
Date: Fri, 23 Mar 2018 12:07:08 -0300
Subject: [PATCH] [FEATURE] :fullscreen css

---
 fullscreen.md | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 fullscreen.md

diff --git a/fullscreen.md b/fullscreen.md
new file mode 100644
index 000000000..3d6739d9e
--- /dev/null
+++ b/fullscreen.md
@@ -0,0 +1,104 @@
+### Fullscreen
+
+The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
+
+#### HTML
+
+```html
+<div class="container">
+  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
+  <div class="element" id="element">
+    <p>I'm in fullscreen mode!</p>
+  </div>
+  <br>
+  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
+</div>
+```
+
+#### CSS
+
+```css
+.container {
+  margin: 40px auto;
+  max-width: 700px;
+}
+
+.element {
+  padding: 20px;
+  height: 300px;
+  width: 100%;
+  background-color: skyblue;
+}
+
+.element p {
+  text-align: center;
+  color: white;
+  font-size: 3em;
+}
+
+.element:-ms-fullscreen p {
+  visibility: visible;
+}
+
+.element:fullscreen {
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__sinppet-fullscreen">
+    <div class="container">
+	  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
+	  <div class="element" id="element">
+	    <p>I'm in fullscreen mode!</p>
+	  </div>
+	  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
+	</div>
+  </div>
+</div>
+
+<style>
+.container {
+  margin: 40px auto;
+  max-width: 700px;
+}
+
+.element {
+  padding: 20px;
+  height: 300px;
+  width: 100%;
+  background-color: skyblue;
+}
+
+.element p {
+  text-align: center;
+  color: white;
+  font-size: 3em;
+}
+
+.element:-ms-fullscreen p {
+  visibility: visible;
+}
+
+.element:fullscreen {
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
+}
+</style>
+
+#### Explanation
+
+1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode.
+
+#### Browser support
+
+<span class="snippet__support-note">92%<</span>
+
+* https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
+
+<!-- tags: animation -->