Created
August 3, 2020 10:34
-
-
Save chrisblakely01/ba7c9572b58c3c5d908a010bf07d3793 to your computer and use it in GitHub Desktop.
CSS for temperature control app
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
body { | |
font-family: sans-serif; | |
text-align: center; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
min-height: 100vh; | |
} | |
.app-container { | |
height: 400px; | |
width: 300px; | |
background: #2b5870; | |
border-radius: 20px; | |
box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75); | |
} | |
.temperature-display-container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 70%; | |
} | |
.temperature-display { | |
display: flex; | |
border-radius: 50%; | |
color: #ffffff; | |
height: 220px; | |
width: 220px; | |
text-align: center; | |
justify-content: center; | |
align-items: center; | |
font-size: 48px; | |
border: 3px #ffffff solid; | |
transition: background 0.5s; | |
} | |
button { | |
border-radius: 100px; | |
height: 80px; | |
width: 80px; | |
font-size: 32px; | |
color: #ffffff; | |
background: rgb(105, 104, 104); | |
border: 2px #ffffff solid; | |
} | |
button:hover { | |
background: rgb(184, 184, 184); | |
cursor: pointer; | |
} | |
button:focus { | |
outline: 0; | |
} | |
.button-container { | |
display: flex; | |
justify-content: space-evenly; | |
align-items: center; | |
} | |
.neutral { | |
background: rgb(184, 184, 184); | |
} | |
.cold { | |
background: #035aa6; | |
} | |
.hot { | |
background: #ff5200; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
good __bro go ahead ___
but my bootsrap is not workin _