Last active
August 1, 2020 09:37
-
-
Save abhishek2x/5ff1059124a0d344dbf4bb590e8e5cca to your computer and use it in GitHub Desktop.
Basic CSS Styling for localStorage demonstration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
box-sizing: border-box; | |
background: url("oh-la-la.jpeg") center no-repeat; | |
background-size: cover; | |
min-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
font-family: Futura, "Trebuchet MS", Arial, sans-serif; | |
} | |
*, | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
} | |
svg { | |
fill: white; | |
background: rgba(0, 0, 0, 0.1); | |
padding: 20px; | |
border-radius: 50%; | |
width: 200px; | |
margin-bottom: 50px; | |
} | |
.wrapper { | |
padding: 20px; | |
max-width: 350px; | |
background: rgba(255, 255, 255, 0.95); | |
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); | |
} | |
h2 { | |
text-align: center; | |
margin: 0; | |
font-weight: 200; | |
} | |
.plates { | |
margin: 0; | |
padding: 0; | |
text-align: left; | |
list-style: none; | |
} | |
.plates li { | |
border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |
padding: 10px 0; | |
font-weight: 100; | |
display: flex; | |
} | |
.plates label { | |
flex: 1; | |
cursor: pointer; | |
} | |
.plates input { | |
display: none; | |
} | |
.plates input + label:before { | |
content: "⬜️"; | |
margin-right: 10px; | |
} | |
.plates input:checked + label:before { | |
content: "🌮"; | |
} | |
.add-items { | |
margin-top: 20px; | |
} | |
.add-items input { | |
padding: 10px; | |
outline: 0; | |
border: 1px solid rgba(0, 0, 0, 0.1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment