timer91.github.io/index.css at master · Timer91/timer91.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@font-face {
    font-family: 'hallo_sansregular';
    src: url('tmp/font/hallo_sans-webfont.eot');
    src: url('tmp/font/hallo_sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('tmp/font/hallo_sans-webfont.woff') format('woff'),
         url('tmp/font/hallo_sans-webfont.ttf') format('truetype'),
         url('tmp/font/hallo_sans-webfont.svg#hallo_sansregular') format('svg');
    font-weight: normal;
    font-style: normal; }

html, body { width:100%; height:100%; }
body, p, ul, li { margin:0; padding:0; }
body { font:14px sans-serif; font-family:"hallo_sansregular"; color:#fff; background-color:rgb(226, 226, 226); }
a:-webkit-any-link { text-decoration:none !important; }

div#title { position:relative; top:38%; margin-top:-150px; text-align:center; }
div#title span {
  padding: 0.2em 0.7em;
  font-size:99px;
  text-shadow:1px 1px rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: 0 2px 0px rgba(255, 255, 255, 0.28);
     -moz-box-shadow: 0 2px 0px rgba(255, 255, 255, 0.28);
          box-shadow: 0 2px 0px rgba(255, 255, 255, 0.28);
  border-bottom:2px solid rgba(0, 0, 0, 0.17); }


div#socials {
  position:relative;
  top:60%;
  width:900px; height:190px;
  margin:auto; }
div#socials a {
  display:block;
  float:left;
  position:relative;
  width:25%; height:100%; }
  div#socials a div {
    top:0;
    width:100%; height:100%;
    text-align:center;
    -webkit-transition:background 0.2s ease-in-out;
       -moz-transition:background 0.2s ease-in-out;
        -ms-transition:background 0.2s ease-in-out;
         -o-transition:background 0.2s ease-in-out;
            transition:background 0.2s ease-in-out; }
  div#socials a div:hover { background:rgba(49,75,91,0.6); }
  div#socials a div img {
    z-index:3;
    /*position:absolute;
    top:28%;*/
    margin-top:27%;
    max-height:33%;
    margin:27% auto 0 auto;
    -webkit-transition:transform 0.5s ease;
       -moz-transition:transform 0.5s ease;
        -ms-transition:transform 0.5s ease;
         -o-transition:transform 0.5s ease;
            transition:transform 0.5s ease; }
  div#socials a div span {
    z-index:2;
    display:block;
    opacity:0;
    text-decoration:none !important;
    font-family:monospace;
    font-size:14px;
    color:white;
    margin-top:40px;
    -webkit-transition:opacity 0.3s ease-in, margin-top 0.5s ease;
       -moz-transition:opacity 0.3s ease-in, margin-top 0.5s ease;
        -ms-transition:opacity 0.3s ease-in, margin-top 0.5s ease;
         -o-transition:opacity 0.3s ease-in, margin-top 0.5s ease;
            transition:opacity 0.3s ease-in, margin-top 0.5s ease; }
    div#socials a div:hover span { opacity:1; margin-top:15px; }
  div#socials a div:hover img {
    -webkit-transform:scale(1.3) translateY(-15px);
       -moz-transform:scale(1.3) translateY(-15px);
        -ms-transform:scale(1.3) translateY(-15px);
         -o-transform:scale(1.3) translateY(-15px);
            transform:scale(1.3) translateY(-15px); }