Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- background-color: #232323;
- margin: 0;
- font-family: "Montserrat", "Avenir";
- }
- #container {
- margin: 20px auto;
- max-width: 600px;
- }
- h1 {
- text-align: center;
- line-height: 1.1;
- font-weight: normal;
- color: white;
- background: steelblue;
- margin: 0;
- text-transform: uppercase;
- padding: 20px 0;
- }
- #colorDisplay {
- font-size: 200%;
- }
- #message {
- display: inline-block;
- width: 20%;
- }
- #stripe {
- background: white;
- height: 30px;
- text-align: center;
- color: black;
- }
- .selected {
- color: white;
- background: steelblue;
- }
- button {
- border: none;
- background: none;
- text-transform: uppercase;
- height: 100%;
- font-weight: 700;
- color: steelblue;
- letter-spacing: 1px;
- font-size: inherit;
- transition: all 0.3s;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- outline: none;
- }
- button:hover {
- color: white;
- background: steelblue;
- }
- .heart {
- background: purple;
- display: inline-block;
- height: 60px;
- margin: 50px;
- position: relative;
- top: 0;
- transform: rotate(-45deg);
- width: 60px;
- float: left;
- transition: background 0.6s;
- -webkit-transition: background 0.6s;
- -moz-transition: background 0.6s;
- }
- .heart:before,
- .heart:after {
- content: "";
- background: purple;
- border-radius: 50%;
- height: 60px;
- position: absolute;
- width: 60px;
- float: left;
- transition: background 0.6s;
- -webkit-transition: background 0.6s;
- -moz-transition: background 0.6s;
- }
- .heart:before {
- top: -30px;
- left: 0;
- }
- .heart:after {
- left: 30px;
- top: 0;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement