Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Poiret+One');
- #tasks {
- display: table;
- margin: 0 auto;
- margin-top: 5%;
- margin-bottom: 155%;
- height: auto;
- }
- #task {
- display: inline-block;
- padding: 0;
- width: 30%;
- height: 70%;
- -webkit-box-shadow: 14px 19px 29px -2px rgba(0,0,0,0.15), -14px -19px 29px -2px rgba(0,0,0,0.25);
- -moz-box-shadow: 14px 19px 29px -2px rgba(0,0,0,0.15), -14px -19px 29px -2px rgba(0,0,0,0.25);
- box-shadow: 14px 19px 29px -2px rgba(0,0,0,0.15), -14px -19px 29px -2px rgba(0,0,0,0.25);
- margin-right: 2%;
- margin-bottom: 5%;
- min-height: 25%;
- float: middle;
- vertical-align: middle;
- transition: 1s;
- }
- #task:hover {
- -webkit-box-shadow: 13px 12px 33px -2px rgba(0,0,0,0.80);
- -moz-box-shadow: 13px 12px 33px -2px rgba(0,0,0,0.80);
- box-shadow: 13px 12px 33px -2px rgba(0,0,0,0.80);
- }
- #tasktitle {
- color: white;
- font-family: 'Lobster Two', sans-serif;
- }
- #uline {
- background: #bdbdbd no-repeat scroll center;
- margin: auto;
- width:80%;
- height:2px;
- margin-top: 2%;
- margin-bottom: 4%;
- }
- #uline hr {
- display: none;
- }
- #taskdescription {
- color: #8dbe41;
- width: 90%;
- float: middle;
- margin: 0 auto;
- font-size: 18px;
- font-family: 'Poiret One', sans-serif;
- }
- #taskbutton {
- font-family: 'Lobster Two';
- transition:0.2s ease;
- margin: 0 auto;
- margin-top: 3%;
- margin-bottom: 5%;
- }
- #taskbutton a {
- text-decoration: none;
- color: white;
- background-color: orange;
- padding: 0 20px;
- transition:0.2s ease;
- margin-top: 3%;
- margin-bottom: 5%;
- font-family: 'Lobster Two';
- transition:0.2s ease;
- }
- #taskbutton a:hover {
- font-size: 30px;
- -webkit-box-shadow: 8px 8px 15px 1px rgba(0,0,0,0.20);
- -moz-box-shadow: 8px 8px 15px 1px rgba(0,0,0,0.20);
- box-shadow: 8px 8px 15px 1px rgba(0,0,0,0.20);
- padding: 0 48px;
- }
- #taskimage img{
- width: 90%;
- background-color: white;
- padding: 8px;
- margin-top: 10px;
- }
- #task1, #task2 {
- height: 100%;
- border: 2px dotted white;
- }
- #flip-container {
- perspective: 1000px;
- width: 100%;
- height: 100%;
- }
- #flip-container:hover #flipper, #flip-container.hover #flipper {
- transform: rotateY(180deg);
- border: 0px none;
- }
- #flip-container, #front, #back {
- width: 100%;
- height: 100%;
- }
- #flipper {
- transition: 0.6s;
- transform-style: preserve-3d;
- width: 100%;
- height: 100%;
- position: relative;
- }
- #front, #back {
- backface-visibility: hidden;
- position: absolute;
- top: 0;
- left: 0;
- }
- #front {
- z-index: 2;
- transform: rotateY(0deg);
- }
- #back {
- transform: rotateY(180deg);
- }
- #front, #back {
- height: inherit;
- display: flex;
- justify-content: center;
- }
- #comingsoonimage, #comingsoonimage2 {
- align-self: center;
- }
- #comingsoonimage img {
- display: inline-block;
- width: 90%;
- }
- #comingsoonimage2 img {
- display: inline-block;
- width: 100%;;
- height: 100%;
- }
- #comingsoonimage2 {
- display: inline-block;
- width: 100%;;
- height: 100%;
- }
- #comingsoontext {
- font-size: 40px;
- align-self: center;
- margin: auto;
- display: inline-block;
- width: 90%;
- height: 20%;
- }
- h4, h5 {
- height: 50%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement