diff options
Diffstat (limited to 'Code/Blocks/demo/cartedeParis1.html')
-rw-r--r-- | Code/Blocks/demo/cartedeParis1.html | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/Code/Blocks/demo/cartedeParis1.html b/Code/Blocks/demo/cartedeParis1.html deleted file mode 100644 index a7268ea..0000000 --- a/Code/Blocks/demo/cartedeParis1.html +++ /dev/null | |||
@@ -1,159 +0,0 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html > | ||
3 | <head> | ||
4 | <title>Paris</title> | ||
5 | <meta charset="utf-8" /> | ||
6 | <style> | ||
7 | body, div, h1,h2, form, fieldset, input, textarea, footer,p { | ||
8 | margin: 0; padding: 0; border: 0; outline: none; | ||
9 | } | ||
10 | @font-face { | ||
11 | font-family: 'DeibiRegular'; | ||
12 | src: url('deibi-webfont.eot'); | ||
13 | src: url('deibi-webfont.eot?#iefix') format('embedded-opentype'), | ||
14 | url('deibi-webfont.woff') format('woff'), | ||
15 | url('deibi-webfont.ttf') format('truetype'), | ||
16 | url('deibi-webfont.svg#DeibiRegular') format('svg'); | ||
17 | font-weight: normal; | ||
18 | font-style: normal;} | ||
19 | |||
20 | body, html {background: #f2f2f2; font-family:'DeibiRegular', Helvetica, Arial, sans-serif;} | ||
21 | |||
22 | #wrap { | ||
23 | background: url('images/clouds1000.png') repeat-x, url('images/clouds1200_1.png') repeat-x 0 0, url('images/Paris_sky.jpg') 0 0; | ||
24 | width: 600px; | ||
25 | height: 680px; | ||
26 | overflow: hidden; | ||
27 | display: block; | ||
28 | position: relative; | ||
29 | margin: 0px auto; | ||
30 | border: 0px solid #fff; | ||
31 | -webkit-box-shadow: 0 0 20px #bababa; | ||
32 | -moz-box-shadow: 0 0 20px #bababa; | ||
33 | box-shadow: 0 0 20px #bababa; | ||
34 | -webkit-border-radius: 10px; | ||
35 | -moz-border-radius: 10px; | ||
36 | border-radius: 10px; | ||
37 | -webkit-animation: wind 30s linear infinite; | ||
38 | -moz-animation: wind 80s linear infinite; | ||
39 | } | ||
40 | |||
41 | #eiffel {position:absolute; background: url('images/Paris_eiffel.png') no-repeat ; width:240px; height:462px; right:10px; top: 180px; } | ||
42 | |||
43 | #sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat; width:240px; height:462px; opacity:0; | ||
44 | -webkit-animation: sparkling .4s .2s infinite;-moz-animation: sparkling .4s .2s infinite; } | ||
45 | |||
46 | |||
47 | #sparkling2 { position:absolute;background: url('images/sparkling2.png') no-repeat; width:240px; height:462px; opacity:0; | ||
48 | -webkit-animation: sparkling .4s infinite; -moz-animation: sparkling .4s linear infinite; } | ||
49 | |||
50 | #eiffel_wrap {position:absolute; width:240px; height:462px; right:10px; top: 180px;opacity:0; | ||
51 | -webkit-animation: eiffel_wrap 30s 1s infinite; -moz-animation: eiffel_wrap 30s 1s infinite; } | ||
52 | |||
53 | |||
54 | #roofs {width: 600px; height: 900px; position:relative; | ||
55 | background: url('images/clouds1200_2.png') repeat-x left 200px, url('images/Paris_roofs.png') repeat-x left bottom ; | ||
56 | -webkit-animation: wind1 70s linear infinite; -moz-animation: wind1 70s linear infinite;} | ||
57 | |||
58 | #phare {position:absolute; background: url('images/phare.png'); width:130px; height:510px; right:64px; top: 185px; opacity:0; | ||
59 | -webkit-transform-origin: center top; -webkit-animation: phare 15s linear infinite; | ||
60 | -moz-transform-origin: center top; -moz-animation: phare 15s linear infinite;} | ||
61 | |||
62 | h1 {position:absolute; top: 180px; left:45px; text-shadow: 0 4px 5px #8c8c8C;color: #f2f2f2; font-size:48px;} | ||
63 | h1 em {font-style:normal; font-size: 60px;} | ||
64 | footer {position:absolute; bottom: 10px; right: 10px;font-size:14px;color: #838383;} | ||
65 | |||
66 | @-webkit-keyframes wind { | ||
67 | 0% {background-position: 0px 200px,0px 350px, left top;} | ||
68 | 50% {background-position: 500px 40px,600px 450px, left top;} | ||
69 | 100% {background-position: 1000px 200px,1200px 350px, left top} | ||
70 | } | ||
71 | |||
72 | @-moz-keyframes wind { | ||
73 | 0% {background-position: 0px 200px,0px 350px, left top;} | ||
74 | 50% {background-position: 500px 40px,600px 450px, left top;} | ||
75 | 100% {background-position: 1000px 200px,1200px 350px, left top} | ||
76 | } | ||
77 | |||
78 | @-webkit-keyframes wind1 { | ||
79 | 0% {background-position: 100px 250px, left bottom;} | ||
80 | 50% {background-position: 650px 150px, left bottom;} | ||
81 | 100% {background-position: 1300px 250px, left bottom} | ||
82 | } | ||
83 | |||
84 | @-moz-keyframes wind1 { | ||
85 | 0% {background-position: 100px 250px, left bottom;} | ||
86 | 50% {background-position: 650px 150px, left bottom;} | ||
87 | 100% {background-position: 1300px 250px, left bottom} | ||
88 | } | ||
89 | |||
90 | @-webkit-keyframes sparkling { | ||
91 | 0% {opacity:0;} | ||
92 | 50%{opacity:1;} | ||
93 | 100% {opacity:0;} | ||
94 | } | ||
95 | |||
96 | @-moz-keyframes sparkling { | ||
97 | 0% {opacity:0;} | ||
98 | 50%{opacity:1;} | ||
99 | 100% {opacity:0;} | ||
100 | } | ||
101 | |||
102 | @-webkit-keyframes eiffel_wrap { | ||
103 | 0% {opacity:1;-webkit-animation-timing-function: steps(1);} | ||
104 | 40%{opacity:0;} | ||
105 | 100% {opacity:0;} | ||
106 | } | ||
107 | |||
108 | |||
109 | |||
110 | @-moz-keyframes eiffel_wrap { | ||
111 | 0% {opacity:1;-moz-animation-timing-function: steps(1);} | ||
112 | 40%{opacity:0;} | ||
113 | 100% {opacity:0;} | ||
114 | } | ||
115 | |||
116 | @-webkit-keyframes phare { | ||
117 | 0% { -webkit-transform:rotate(0deg); opacity:0 } | ||
118 | 40% { -webkit-transform:rotate(144deg); opacity:.2 } | ||
119 | 50% { -webkit-transform:rotate(180deg); opacity:1 } | ||
120 | 60% { -webkit-transform:rotate(216deg); opacity:.2 } | ||
121 | 100% { -webkit-transform:rotate(360deg); opacity:0; } | ||
122 | } | ||
123 | |||
124 | @-moz-keyframes phare { | ||
125 | 0% { -moz-transform:rotate(0deg); opacity:0 } | ||
126 | 40% { -moz-transform:rotate(144deg); opacity:.2 } | ||
127 | 50% { -moz-transform:rotate(180deg); opacity:1 } | ||
128 | 60% { -moz-transform:rotate(216deg); opacity:.2 } | ||
129 | 100% { -moz-transform:rotate(360deg); opacity:0; } | ||
130 | } | ||
131 | |||
132 | |||
133 | body,td,th { | ||
134 | font-family: DeibiRegular, Helvetica, Arial, sans-serif; | ||
135 | } | ||
136 | </style> | ||
137 | </head> | ||
138 | |||
139 | <body> | ||
140 | <div id="wrap"> | ||
141 | <h1>Happy Birthday <em>Tiga !</em></h1> | ||
142 | <div id="phare"></div> | ||
143 | <div id="eiffel"></div> | ||
144 | <div id="eiffel_wrap"> | ||
145 | <div id="sparkling1"></div> | ||
146 | <div id="sparkling2"></div> | ||
147 | </div> | ||
148 | <div id="roofs"></div> | ||
149 | <footer>by Jinwei, Paris 2013</footer> | ||
150 | </div> | ||
151 | |||
152 | <!-- jinwei.me Baidu tongji analytics --> | ||
153 | <script type="text/javascript"> | ||
154 | var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); | ||
155 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F91918ac6d6854623883a2b546ebc00ac' type='text/javascript'%3E%3C/script%3E")); | ||
156 | </script> | ||
157 | |||
158 | </body> | ||
159 | </html> \ No newline at end of file | ||