Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
- #content {
- width: 90%;
- }
- #persontable, #teamstable {
- transition: 0.4s ease;
- width: 45%;
- height: auto;
- text-align: center;
- float: middle;
- margin: 2% 2% 0;
- display:inline-block;
- vertical-align:top;
- border: 1px solid #FF4646;
- background-color: #FF4646;
- }
- .item {
- transition: 0.4s ease;
- width: 100%;
- display: flex;
- float: left;
- background-color: rgba(255,100,100,1);
- margin: 1px 0px;
- }
- .topitem{
- background-image: linear-gradient(135deg, grey 0%, grey 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
- linear-gradient(-135deg, grey 0%, grey 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
- linear-gradient(45deg, grey 0%, grey 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
- linear-gradient(-45deg, grey 0%, grey 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
- linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%), linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
- background-position: top center, top center, bottom center, bottom center, top center, bottom center;
- background-size: 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 100% 1rem, 100% 1rem;
- background-repeat: repeat-x;
- transition: all .25s ease-in-out;
- background-color: rgba(255,1,1,0.4);
- }
- /*Top Image*/
- .topitem .image .circle {
- margin: 25px 0px;
- border: 4px dotted white;
- width: 7vmax;
- height: 7vmax;
- }
- .image {
- margin: 5px 0px;
- }
- .circle {
- width: 4vmax;
- height: 4vmax;
- border-radius: 50%;
- color: #fff;
- text-align: center;
- background-color: #989a8f;;
- overflow: hidden;
- margin: auto;
- }
- .circle img {
- width: auto;
- height: inherit;
- color: #fff;
- text-align: center;
- background-color: #989a8f;
- }
- .name, .image, .points {
- vertical-align:middle;
- float: left;
- width: 32%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .position, .trophy {
- overflow: hidden;
- vertical-align:middle;
- float: left;
- width: 4%;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #FF4646;
- }
- .topitem .trophy {
- -webkit-box-shadow: 2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- -moz-box-shadow: 2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- box-shadow: 2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- }
- .topitem .position {
- -webkit-box-shadow: -2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- -moz-box-shadow: -2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- box-shadow: -2px 0px 20px 0px rgba(0,0,0,0.6); /* x, y, blur, spread, colour*/
- }
- .child:hover {
- background-color: rgba(255,130,140,1);
- font-weight: bold;
- box-shadow: rgba(255,40,40,1) -1px 1px,
- rgba(255,40,40,1) -2px 2px,
- rgba(255,40,40,1) -3px 3px,
- rgba(255,40,40,1) -4px 4px,
- rgba(255,40,40,1) -5px 5px,
- rgba(255,40,40,1) -6px 6px;
- transform: translate3d(6px, -6px, 0);
- transition-delay: 0s;
- transition-duration: 0.4s;
- transition-property: all;
- transition-timing-function: line;
- }
- .topcontainer {
- display: block;
- transition: 0.4s ease;
- width: 100%;
- height: auto;
- }
- .topcontainer .image {
- vertical-align:middle;
- float: left;
- width: 100%;
- }
- .topcontainer .name{
- position: relative;
- width: 100%;
- height: 2vmax;
- margin-bottom: 2vmax;
- }
- .trophy .trophyimage {
- display: flex;
- display: inline-block;
- }
- .topitem .position, .topitem .trophy {
- font-family: 'Baloo Bhaina', sans-serif;
- transition: 0.5s;
- width: 30%;
- }
- .topitem .position h6, .topitem .trophy h3 { transition: 0.5s; }
- .topitem:hover .position, .topitem:hover .trophy {
- transition: 1s;
- width: 60%;
- }
- .topitem .name h6 {
- transition: 0.8s;
- font-size: 2.5vmax;
- font-family: 'Lobster Two', sans-serif;
- }
- .topitem:hover .name h6{
- transition: 1s;
- font-size: 1.5vmax;
- }
- .trophyimage img, .trophyimage {
- vertical-align:middle;
- float: middle;
- width: 82%;
- }
- .trophytext { margin-top: 10%; line-height: 100%;}
- .topitem:hover .position h6, .topitem:hover .trophy h3 {
- transition: 1s;
- font-size: 1vmax;
- line-height: 120%;
- }
- .topitem:hover .position h6, .topitem:hover .trophy h3 {
- transition: 1s;
- font-size: 2vmax;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement