Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

deploy

  • Loading branch information...
commit b14d987c508e37448a9842fecf379a936d871b58 0 parents
@deividmarques authored
BIN  img/espaco.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  img/favicon.ico
Binary file not shown
BIN  img/terra.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="pt-BR">
+<head>
+ <meta charset="UTF-8">
+ <title>Planeta Terra - By Deivid Marques</title>
+ <link rel="stylesheet" href="style.css">
+ <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
+ <meta name="viewport" content="initial-scale = 1.0">
+ <meta property="og:title" content="Planeta Terra em movimento" />
+ <meta property="og:type" content="website"/>
+ <meta property="og:description" content="Planeta Terra em movimento apenas com css" />
+ <meta property="og:url" content="http://www.deividmarques.com.br/"/>
+ <meta property="og:image" content="http://www.deividmarques.com.br/css/earth/img/earth.jpg" />
+ <meta property="og:site_name" content="Deivid Marques"/>
+ <meta property="og:locale" content="pt_br" />
+ <link rel="author" href="https://plus.google.com/u/0/113262540525735544871?rel=author" />
+</head>
+<body>
+ <div class="earth"></div>
+</body>
+</html>
33 style.css
@@ -0,0 +1,33 @@
+body{
+ background: url(img/espaco.jpg) no-repeat 0 0;
+ background-size: 100%;
+}
+.earth{
+ background: url(img/terra.jpg) repeat-x 0 0;
+ border: 1px solid rgba(26,18,101,0.3);
+ border-radius: 225px;
+ box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
+ height: 450px;
+ left: 50%;
+ margin: -225px 0 0 -225px;
+ position: absolute;
+ top: 50%;
+ width: 450px;
+ -webkit-animation: loop 80s linear infinite;
+
+}
+@-webkit-keyframes loop {
+ 0% { background-position: 0 0; }
+ 100%{ background-position: -900px 0;}
+
+}
+.earth:before{
+ content: "";
+ border-radius: 225px;
+ box-shadow: -150px -6px 25px rgba(0,0,0,0.7) inset;
+ left: 0;
+ position:absolute;
+ top: 0;
+ height: 450px;
+ width: 450px;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.