diff --git a/power-apps/glass-effect-template/README.md b/power-apps/glass-effect-template/README.md
new file mode 100644
index 0000000..f6e865c
--- /dev/null
+++ b/power-apps/glass-effect-template/README.md
@@ -0,0 +1,313 @@
+# Glass Effect Template
+
+This screen showcases a glass-effect design using the HTML component in Power Apps. It features a prominent main card in the center displaying a profile.
+![View of the paste code button](./assets/maincard.png)
+
+The KPI section uses emoji icons creatively to represent key metrics, adding a visual and intuitive touch. Each KPI is displayed within a card, featuring the metric value alongside its corresponding emoji.
+![View of the paste code button](./assets/KPIs.png)
+
+This snippet helps create a visually engaging layout using simple Power Apps elements.
+
+## Authors
+
+Snippet|Author(s)
+--------|---------
+Leonardo Russo | [GitHub](https://github.com/leorrusso)
+
+## Code
+
+```yaml
+- conMain:
+ Control: GroupContainer
+ Variant: manualLayoutContainer
+ Properties:
+ Height: =1366
+ Width: =768
+ Children:
+ - imgBackground:
+ Control: Image
+ Properties:
+ Image: ="https://images.pexels.com/photos/3617500/pexels-photo-3617500.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=3"
+ Height: =Parent.Height
+ ImagePosition: =ImagePosition.Fill
+ Width: =Parent.Width
+ - Gallery1:
+ Control: Gallery
+ Variant: galleryHorizontal
+ Properties:
+ Items: =["home","calendar","code","cog"]
+ Height: =144
+ ShowScrollbar: =false
+ TemplateSize: =188
+ Transition: =Transition.Pop
+ Width: =768
+ Y: =1222
+ Children:
+ - HtmlText1_2:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n\n
\n \n
\n \n \n
\""
+ AutoHeight: =true
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Fill: =RGBA(0, 0, 0, 0)
+ Font: =Font.'Segoe UI'
+ Height: =95
+ Width: =97
+ X: =54
+ Y: =15
+ - Label2:
+ Control: Label
+ Properties:
+ Text: ="GLASS EFFECT"
+ Color: =RGBA(255, 255, 255, 0.88)
+ FontWeight: =FontWeight.Semibold
+ Height: =117
+ PaddingLeft: =40
+ Size: =28
+ Width: =734
+ X: =33
+ Y: =23
+ - htmKPI1:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
❤️
97\n\n \n Lightning\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =53
+ Y: =747
+ - cardGroup:
+ Control: Group
+ Children:
+ - Button1_1:
+ Control: Classic/Button
+ Properties:
+ Text: =""
+ BorderColor: =Color.White
+ BorderStyle: =BorderStyle.None
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =353
+ HoverFill: =RGBA(250,250,250,0.1)
+ PressedFill: =
+ Width: =657
+ X: =61
+ Y: =353
+ - userImage:
+ Control: Image
+ Properties:
+ Image: ="https://avatars.githubusercontent.com/u/62526027?v=4"
+ BorderColor: =RGBA(255, 255, 255, 1)
+ BorderThickness: =1
+ Height: =88
+ RadiusBottomLeft: =180
+ RadiusBottomRight: =180
+ RadiusTopLeft: =180
+ RadiusTopRight: =180
+ Transparency: =0.1
+ Width: =94
+ X: =579
+ Y: =429
+ - Button1:
+ Control: Classic/Button
+ Properties:
+ Text: ="Get in touch"
+ BorderColor: =Color.White
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =52
+ HoverFill: =RGBA(250,250,250,0.1)
+ PaddingLeft: =28
+ Width: =196
+ X: =477
+ Y: =616
+ - HtmlText1:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n\n\n \n \n
LEONARDO RUSSO
\n
Power Apps Addict
\n \n \n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Fill: =RGBA(0, 0, 0, 0)
+ Font: =Font.'Segoe UI'
+ Height: =394
+ Width: =686
+ X: =61
+ Y: =353
+ - htmKPI2:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
\U0001F680
32\n\n \n Rockets\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =275
+ Y: =747
+ - htmKPI3:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
\U0001F4B8
24%\n\n \n Flying Money\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =497
+ Y: =747
+ - galTopButtons:
+ Control: Gallery
+ Variant: galleryHorizontal
+ Properties:
+ Items: =["Apps", "BI", "Flow"]
+ Height: =116
+ ShowScrollbar: =false
+ TemplatePadding: =20
+ TemplateSize: =198
+ Transition: =Transition.Pop
+ Width: =673
+ X: =53
+ Y: =119
+ Children:
+ - btnTop:
+ Control: Classic/Button
+ Properties:
+ Text: =ThisItem.Value
+ BorderColor: =Color.White
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =52
+ HoverFill: =RGBA(250,250,250,0.1)
+ Width: =196
+ Y: =24
+ - imgPowerAppsa:
+ Control: Image
+ Properties:
+ Image: |-
+ ="data:image/svg+xml;utf8, "&
+ EncodeUrl("
+ ")
+ Height: =64
+ Width: =64
+ X: =654
+ Y: =49
+ - icoGitHub:
+ Control: Image
+ Properties:
+ OnSelect: =Launch("https://github.com/leorrusso")
+ Image: ="https://icongr.am/fontawesome/github.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =90
+ Y: =614
+ - icoLinkedin:
+ Control: Image
+ Properties:
+ OnSelect: ="https://www.linkedin.com/in/leonardorrusso/"
+ Image: ="https://icongr.am/fontawesome/linkedin.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =137
+ Y: =614
+ - icoInstagrama:
+ Control: Image
+ Properties:
+ OnSelect: ="https://www.instagram.com/powerappsleo/"
+ Image: ="https://icongr.am/fontawesome/instagram.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =186
+ Y: =615
+ - icoPaperPlane:
+ Control: Image
+ Properties:
+ OnSelect: =Launch("mailto:leonardo.russo@ltechsp.onmicrosoft.com")
+ Image: ="https://icongr.am/fontawesome/paper-plane.svg?size=128&color=fafafa"
+ Height: =45
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =9
+ Width: =37
+ X: =488
+ Y: =618
+
+```
+
+## Minimal path to awesome
+
+1. Open your canvas app in **Power Apps**
+1. Copy the contents of the **[YAML-file](./source/glass.pa.yaml)** or copy it from the code above.
+1. Right click on the screen where you want to add the snippet and select "Paste YAML"
+![View of the paste code button](./assets/pastecode.png)
+
+This will add the containers to your screen and you can delete the containers you don't want to use.
+
+![View of the pasted containers](./assets/screen-glass.png)
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+
diff --git a/power-apps/glass-effect-template/assets/KPIs.png b/power-apps/glass-effect-template/assets/KPIs.png
new file mode 100644
index 0000000..386ba8d
Binary files /dev/null and b/power-apps/glass-effect-template/assets/KPIs.png differ
diff --git a/power-apps/glass-effect-template/assets/bottom-navbar.png b/power-apps/glass-effect-template/assets/bottom-navbar.png
new file mode 100644
index 0000000..f1df35d
Binary files /dev/null and b/power-apps/glass-effect-template/assets/bottom-navbar.png differ
diff --git a/power-apps/glass-effect-template/assets/componentPasteCode.png b/power-apps/glass-effect-template/assets/componentPasteCode.png
new file mode 100644
index 0000000..aeaa109
Binary files /dev/null and b/power-apps/glass-effect-template/assets/componentPasteCode.png differ
diff --git a/power-apps/glass-effect-template/assets/maincard.png b/power-apps/glass-effect-template/assets/maincard.png
new file mode 100644
index 0000000..f5adf43
Binary files /dev/null and b/power-apps/glass-effect-template/assets/maincard.png differ
diff --git a/power-apps/glass-effect-template/assets/pastecode.png b/power-apps/glass-effect-template/assets/pastecode.png
new file mode 100644
index 0000000..15edc66
Binary files /dev/null and b/power-apps/glass-effect-template/assets/pastecode.png differ
diff --git a/power-apps/glass-effect-template/assets/sample.json b/power-apps/glass-effect-template/assets/sample.json
new file mode 100644
index 0000000..508b447
--- /dev/null
+++ b/power-apps/glass-effect-template/assets/sample.json
@@ -0,0 +1,49 @@
+[
+ {
+ "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+ "name": "pnp-powerplatform-snippets-glass-effect-template",
+ "version": "1.0.0.0",
+ "source": "pnp",
+ "creationDateTime": "2024-10-30T00:00:00.000Z",
+ "updateDateTime": "2024-10-30T00:00:00.000Z",
+ "title": "Glass Effect Template",
+ "shortDescription": "This snippet showcases a mobile screen using effect using glass effect.",
+ "longDescription": [
+ "This screen showcases a glass-effect design using the HTML text component in Power Apps. It features a prominent main card in the center displaying a profile, with navigation buttons at the top. At the bottom, there’s a navbar for additional navigation options. This snippet helps create a visually engaging layout using simple Power Apps elements."
+ ],
+ "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/glass-effect-template/",
+ "products": [
+ "Power Platform",
+ "Power Apps",
+ "powerplatform-snippets",
+ "power-apps-snippets"
+ ],
+ "tags": [],
+ "categories": [],
+ "metadata": [
+ {
+ "key": "Product",
+ "value": "Power Apps"
+ },
+ {
+ "key": "Type",
+ "value": "Snippet"
+ }
+ ],
+ "thumbnails": [
+ {
+ "type": "image",
+ "order": 100,
+ "url": "https://raw.githubusercontent.com/leorrusso/powerplatform-snippets/main/power-apps/glass-effect-template/assets/screen-glass.png",
+ "alt": "Preview PNG"
+ }
+ ],
+ "authors": [
+ {
+ "gitHubAccount": "leorrusso",
+ "name": "Leonardo Russo",
+ "pictureUrl": "https://avatars.githubusercontent.com/u/62526027?v=4&size=64https://avatars.githubusercontent.com/u/62526027?v=4&size=64"
+ }
+ ]
+ }
+ ]
\ No newline at end of file
diff --git a/power-apps/glass-effect-template/assets/screen-glass.png b/power-apps/glass-effect-template/assets/screen-glass.png
new file mode 100644
index 0000000..a01bb87
Binary files /dev/null and b/power-apps/glass-effect-template/assets/screen-glass.png differ
diff --git a/power-apps/glass-effect-template/source/glass.pa.yaml b/power-apps/glass-effect-template/source/glass.pa.yaml
new file mode 100644
index 0000000..06af73c
--- /dev/null
+++ b/power-apps/glass-effect-template/source/glass.pa.yaml
@@ -0,0 +1,275 @@
+- conMain:
+ Control: GroupContainer
+ Variant: manualLayoutContainer
+ Properties:
+ Height: =1366
+ Width: =768
+ Children:
+ - imgBackground:
+ Control: Image
+ Properties:
+ Image: ="https://images.pexels.com/photos/3617500/pexels-photo-3617500.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=3"
+ Height: =Parent.Height
+ ImagePosition: =ImagePosition.Fill
+ Width: =Parent.Width
+ - Gallery1:
+ Control: Gallery
+ Variant: galleryHorizontal
+ Properties:
+ Items: =["home","calendar","code","cog"]
+ Height: =144
+ ShowScrollbar: =false
+ TemplateSize: =188
+ Transition: =Transition.Pop
+ Width: =768
+ Y: =1222
+ Children:
+ - HtmlText1_2:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n\n\n \n
\n \n \n
\""
+ AutoHeight: =true
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Fill: =RGBA(0, 0, 0, 0)
+ Font: =Font.'Segoe UI'
+ Height: =95
+ Width: =97
+ X: =54
+ Y: =15
+ - Label2:
+ Control: Label
+ Properties:
+ Text: ="GLASS EFFECT"
+ Color: =RGBA(255, 255, 255, 0.88)
+ FontWeight: =FontWeight.Semibold
+ Height: =117
+ PaddingLeft: =40
+ Size: =28
+ Width: =734
+ X: =33
+ Y: =23
+ - htmKPI1:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
❤️
97\n\n \n Lightning\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =53
+ Y: =747
+ - cardGroup:
+ Control: Group
+ Children:
+ - Button1_1:
+ Control: Classic/Button
+ Properties:
+ Text: =""
+ BorderColor: =Color.White
+ BorderStyle: =BorderStyle.None
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =353
+ HoverFill: =RGBA(250,250,250,0.1)
+ PressedFill: =
+ Width: =657
+ X: =61
+ Y: =353
+ - userImage:
+ Control: Image
+ Properties:
+ Image: ="https://avatars.githubusercontent.com/u/62526027?v=4"
+ BorderColor: =RGBA(255, 255, 255, 1)
+ BorderThickness: =1
+ Height: =88
+ RadiusBottomLeft: =180
+ RadiusBottomRight: =180
+ RadiusTopLeft: =180
+ RadiusTopRight: =180
+ Transparency: =0.1
+ Width: =94
+ X: =579
+ Y: =429
+ - Button1:
+ Control: Classic/Button
+ Properties:
+ Text: ="Get in touch"
+ BorderColor: =Color.White
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =52
+ HoverFill: =RGBA(250,250,250,0.1)
+ PaddingLeft: =28
+ Width: =196
+ X: =477
+ Y: =616
+ - HtmlText1:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n\n\n \n \n
LEONARDO RUSSO
\n
Power Apps Addict
\n \n \n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Fill: =RGBA(0, 0, 0, 0)
+ Font: =Font.'Segoe UI'
+ Height: =394
+ Width: =686
+ X: =61
+ Y: =353
+ - htmKPI2:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
\U0001F680
32\n\n \n Rockets\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =275
+ Y: =747
+ - htmKPI3:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: "=\"\n
\U0001F4B8
24%\n\n \n Flying Money\n
\n \n \n \n\n\n
\""
+ DisabledBorderColor: =RGBA(56, 56, 56, 1)
+ Height: =233
+ Width: =241
+ X: =497
+ Y: =747
+ - galTopButtons:
+ Control: Gallery
+ Variant: galleryHorizontal
+ Properties:
+ Items: =["Apps", "BI", "Flow"]
+ Height: =116
+ ShowScrollbar: =false
+ TemplatePadding: =20
+ TemplateSize: =198
+ Transition: =Transition.Pop
+ Width: =673
+ X: =53
+ Y: =119
+ Children:
+ - btnTop:
+ Control: Classic/Button
+ Properties:
+ Text: =ThisItem.Value
+ BorderColor: =Color.White
+ BorderThickness: =1
+ Fill: =RGBA(0, 0, 0, 0)
+ Height: =52
+ HoverFill: =RGBA(250,250,250,0.1)
+ Width: =196
+ Y: =24
+ - imgPowerAppsa:
+ Control: Image
+ Properties:
+ Image: |-
+ ="data:image/svg+xml;utf8, "&
+ EncodeUrl("
+ ")
+ Height: =64
+ Width: =64
+ X: =654
+ Y: =49
+ - icoGitHub:
+ Control: Image
+ Properties:
+ OnSelect: =Launch("https://github.com/leorrusso")
+ Image: ="https://icongr.am/fontawesome/github.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =90
+ Y: =614
+ - icoLinkedin:
+ Control: Image
+ Properties:
+ OnSelect: ="https://www.linkedin.com/in/leonardorrusso/"
+ Image: ="https://icongr.am/fontawesome/linkedin.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =137
+ Y: =614
+ - icoInstagrama:
+ Control: Image
+ Properties:
+ OnSelect: ="https://www.instagram.com/powerappsleo/"
+ Image: ="https://icongr.am/fontawesome/instagram.svg?size=128&color=fafafa"
+ Height: =57
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =8
+ Width: =49
+ X: =186
+ Y: =615
+ - icoPaperPlane:
+ Control: Image
+ Properties:
+ OnSelect: =Launch("mailto:leonardo.russo@ltechsp.onmicrosoft.com")
+ Image: ="https://icongr.am/fontawesome/paper-plane.svg?size=128&color=fafafa"
+ Height: =45
+ PaddingBottom: =8
+ PaddingLeft: =8
+ PaddingRight: =8
+ PaddingTop: =9
+ Width: =37
+ X: =488
+ Y: =618