rhudea.github.com/index.html at master · rhudea/rhudea.github.com · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>

<html>
    <head>
       <link href='http://fonts.googleapis.com/css?family=Dosis|Titan+One' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" href="stylesheets/reset.css" type="text/css">
        <style>
            body {
                background-image: url(assets/subtle_freckles.png);
            }
            #presentation {
                width: 40em;
                background-color: white;
                margin-left: auto;
                margin-right: auto;
                box-shadow: -5px 0 5px -3px rgba(0, 0, 0, 0.5), 5px 0 5px -3px rgba(0, 0, 0, 0.5), 0 5px 5px -3px rgba(0, 0, 0, 0.5);
                padding: 30px;
                margin-top: 30px;
                background-image: url(assets/px_by_Gre3g.png);
                border-radius: 10px;
            }
            h1 {
                font-family: 'Titan One', sans-serif;
                font-weight: 400;
                text-align: center;
                text-transform: uppercase;
                text-shadow: 0px 0px 25px rgba(0,0,0,0.2);
	            line-height: 0.9em;
                font-size: 60px;
                color: rgb(240,242,235);

            }

            ul {
                font-family: 'Dosis', sans-serif;
                font-weight: 400;
                line-height: 0.9em;
                font-size: 18px;
                margin-top: 50px;
                color: rgb(240,242,235);
            }

            ul a:link, ul a:visited {
                text-decoration: none;
                color: rgb(240,242,235);
            }

            ul a.pres {
                color: rgb(212,238,94);
            }

            ul a.conf {
                color: rgb(212,238,94);

            }

            ul a:hover {
                color: rgb(203,232,107);
                color: rgb(255,66,66);
            }

            .drop-shadow {
               position:relative;
               width:90%;
            }

            .drop-shadow:before,
            .drop-shadow:after {
               content:"";
               position:absolute;
               z-index:-1;
               bottom:15px;
               left:10px;
               width:50%;
               height:20%;
               max-width:300px;
               -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
               -o-transform:rotate(-3deg);
               transform:rotate(-3deg);
            }

            .drop-shadow:after{
               right:10px;
               left:auto;
               -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
               -o-transform:rotate(3deg);
               transform:rotate(3deg);
             }

            sup {
                vertical-align: super;
                font-size: smaller;
            }

        </style>
    </head>
    <body>
        <div id="box">
            <div id="presentation" class="drop-shadow">
                <h1>Presentations</h1>
                <ul>
                    <li>2012, April 20<sup>th</sup> - <a class="pres" href="http://rhudea.github.com/presentations/www2012-lyon/index.html#/">Enriching the web with CSS Filters</a> at <a class="conf" href="http://www2012.wwwconference.org">WWW2012 Lyon</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>