Skip to content

Instantly share code, notes, and snippets.

@Ushiosan23

Ushiosan23/glass-view.markdown

Last active August 22, 2019 15:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ushiosan23/db896279488dcc0df6696872dcfba9d1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ushiosan23/db896279488dcc0df6696872dcfba9d1 to your computer and use it in GitHub Desktop.
Download ZIP
Glass view
Raw
glass-view.markdown
Raw
index.pug
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title Document
body.background
.blur
.section(data-t)
h1 Title Popup
.section(data-p)
p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, nesciunt reprehenderit ipsam et ea dolores nam, eligendi exercitationem, harum eaque est fugiat velit perspiciatis consectetur dolorum quod. Molestiae, illum atque.
Raw
style.sass
*
padding: 0
margin: 0
font-family: Arial, sans-serif
box-sizing: border-box
.background
background: url("https://www.barraques.cat/pngfile/big/0-7755_nature-pier-bridge-d-river-water-sunset-night.jpg") center no-repeat fixed
background-size: cover
position: relative
display: flex
flex-flow: row wrap
justify-content: center
align-items: center
width: 100%
height: 100vh
& .blur
position: relative
width: 50%
height: 60vh
box-shadow: 3px 3px 5px rgba(#000, 0.3)
background: rgba(#ffffff, 0.2)
backdrop-filter: blur(10px)
padding: 5px 10px
& .section
position: relative
&[data-t]
text-align: center
border-bottom: solid 1px #b2b2b2
padding: 0 0 10px 0
margin-bottom: 10px
&[data-p]
text-align: justify
font-size: 14px
line-height: 1.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment