diff --git a/postbox.css b/postbox.css new file mode 100644 index 0000000..e70df01 --- /dev/null +++ b/postbox.css @@ -0,0 +1,113 @@ + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } \ No newline at end of file