SCSS
$facebook-color: #173062;
$twitter-color: #2274b2;
$linkedin-color: #075e86;
$dribbble-color: #ae2258;
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
div[class*=box] {
height: 33.33%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box-1 {
background-color: $facebook-color;
}
.box-2 {
background-color: $twitter-color;
}
.box-3 {
background-color: $dribbble-color;
}
* {
box-sizing: border-box;
transition: .15s ease-in-out;
}
.logo {
display: inline-block;
position: relative;
left: 0;
top: 0;
padding: 30px;
font-size: 45px;
line-height: 45px;
height: 105px;
width: 105px;
text-align: center;
overflow: hidden;
border-radius: 4px;
margin: 20px 20px 20px 0;
color: white;
box-shadow: 2px 2px 5px rgba(0,0,0,.25);
}
.logo:active {
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
left: 0px;
top: 0px;
}
.facebook {
background: #3b5998;
background: linear-gradient(135deg, #3b5998 0%,#3b5998 100%);
}
.facebook:hover {
cursor: pointer;
background: #3b5998;
background: linear-gradient(135deg, #3b5998 0%,#173062 100%);
}
.logo:hover .fa-facebook {
text-shadow:
1px 1px 0px $facebook-color,
2px 2px 0px $facebook-color,
3px 3px 0px $facebook-color,
4px 4px 0px $facebook-color,
5px 5px 0px $facebook-color,
6px 6px 0px $facebook-color,
7px 7px 0px $facebook-color,
8px 8px 0px $facebook-color,
9px 9px 0px $facebook-color,
10px 10px 0px $facebook-color,
11px 11px 0px $facebook-color,
12px 12px 0px $facebook-color,
13px 13px 0px $facebook-color,
14px 14px 0px $facebook-color,
15px 15px 0px $facebook-color,
16px 16px 0px $facebook-color,
17px 17px 0px $facebook-color,
18px 18px 0px $facebook-color,
19px 19px 0px $facebook-color,
20px 20px 0px $facebook-color,
21px 21px 0px $facebook-color,
22px 22px 0px $facebook-color,
23px 23px 0px $facebook-color,
24px 24px 0px $facebook-color,
25px 25px 0px $facebook-color,
26px 26px 0px $facebook-color,
27px 27px 0px $facebook-color,
28px 28px 0px $facebook-color,
29px 29px 0px $facebook-color,
30px 30px 0px $facebook-color,
31px 31px 0px $facebook-color,
32px 32px 0px $facebook-color,
33px 33px 0px $facebook-color,
34px 34px 0px $facebook-color,
35px 35px 0px $facebook-color,
36px 36px 0px $facebook-color,
37px 37px 0px $facebook-color,
38px 38px 0px $facebook-color,
39px 39px 0px $facebook-color,
40px 40px 0px $facebook-color,
41px 41px 0px $facebook-color,
42px 42px 0px $facebook-color,
43px 43px 0px $facebook-color,
44px 44px 0px $facebook-color,
45px 45px 0px $facebook-color,
46px 46px 0px $facebook-color,
47px 47px 0px $facebook-color,
48px 48px 0px $facebook-color,
49px 49px 0px $facebook-color,
50px 50px 0px $facebook-color,
51px 51px 0px $facebook-color,
;
}
.twitter {
background: #55acee;
background: linear-gradient(135deg, #55acee 0%,#55acee 100%);
}
.twitter:hover {
cursor: pointer;
background: #55acee;
background: linear-gradient(135deg, #55acee 0%,#2274b2 100%);
}
.logo:hover .fa-twitter {
text-shadow:
1px 1px 0px $twitter-color,
2px 2px 0px $twitter-color,
3px 3px 0px $twitter-color,
4px 4px 0px $twitter-color,
5px 5px 0px $twitter-color,
6px 6px 0px $twitter-color,
7px 7px 0px $twitter-color,
8px 8px 0px $twitter-color,
9px 9px 0px $twitter-color,
10px 10px 0px $twitter-color,
11px 11px 0px $twitter-color,
12px 12px 0px $twitter-color,
13px 13px 0px $twitter-color,
14px 14px 0px $twitter-color,
15px 15px 0px $twitter-color,
16px 16px 0px $twitter-color,
17px 17px 0px $twitter-color,
18px 18px 0px $twitter-color,
19px 19px 0px $twitter-color,
20px 20px 0px $twitter-color,
21px 21px 0px $twitter-color,
22px 22px 0px $twitter-color,
23px 23px 0px $twitter-color,
24px 24px 0px $twitter-color,
25px 25px 0px $twitter-color,
26px 26px 0px $twitter-color,
27px 27px 0px $twitter-color,
28px 28px 0px $twitter-color,
29px 29px 0px $twitter-color,
30px 30px 0px $twitter-color,
31px 31px 0px $twitter-color,
32px 32px 0px $twitter-color,
33px 33px 0px $twitter-color,
34px 34px 0px $twitter-color,
35px 35px 0px $twitter-color,
36px 36px 0px $twitter-color,
37px 37px 0px $twitter-color,
38px 38px 0px $twitter-color,
39px 39px 0px $twitter-color,
40px 40px 0px $twitter-color,
;
}
.dribbble {
background: #ea4c89;
background: linear-gradient(135deg, #ea4c89 0%,#ea4c89 100%);
}
.dribbble:hover {
cursor: pointer;
background: #ea4c89;
background: linear-gradient(135deg, #ea4c89 0%,#ae2258 100%);
}
.logo:hover .fa-dribbble {
text-shadow:
1px 1px 0px $dribbble-color,
2px 2px 0px $dribbble-color,
3px 3px 0px $dribbble-color,
4px 4px 0px $dribbble-color,
5px 5px 0px $dribbble-color,
6px 6px 0px $dribbble-color,
7px 7px 0px $dribbble-color,
8px 8px 0px $dribbble-color,
9px 9px 0px $dribbble-color,
10px 10px 0px $dribbble-color,
11px 11px 0px $dribbble-color,
12px 12px 0px $dribbble-color,
13px 13px 0px $dribbble-color,
14px 14px 0px $dribbble-color,
15px 15px 0px $dribbble-color,
16px 16px 0px $dribbble-color,
17px 17px 0px $dribbble-color,
18px 18px 0px $dribbble-color,
19px 19px 0px $dribbble-color,
20px 20px 0px $dribbble-color,
21px 21px 0px $dribbble-color,
22px 22px 0px $dribbble-color,
23px 23px 0px $dribbble-color,
24px 24px 0px $dribbble-color,
25px 25px 0px $dribbble-color,
26px 26px 0px $dribbble-color,
27px 27px 0px $dribbble-color,
28px 28px 0px $dribbble-color,
29px 29px 0px $dribbble-color,
30px 30px 0px $dribbble-color,
31px 31px 0px $dribbble-color,
32px 32px 0px $dribbble-color,
33px 33px 0px $dribbble-color,
34px 34px 0px $dribbble-color,
35px 35px 0px $dribbble-color,
36px 36px 0px $dribbble-color,
37px 37px 0px $dribbble-color,
38px 38px 0px $dribbble-color,
39px 39px 0px $dribbble-color,
40px 40px 0px $dribbble-color,
;
}
1 Response