Bienvenido
mi página personal
de josé
World Wide Web mi clicker otros proyectos mi historia

otros proyectos

próximamente...

★ Perrito Clicker ★

mi historia

Hola, soy José.

Bienvenido a mi pequeño rincón de Internet.

/* ================================ FONDO ================================ */ body { margin: 0; padding: 0; background: #000; color: white; font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif; } /* Fondo de estrellas desde images */ .stars { position: relative; width: 1200px; min-height: 1600px; margin: 0 auto; overflow: hidden; background-color: #000; background-image: url("images/estrellas.gif"); background-repeat: repeat; background-position: top left; } /* ================================ GIF BIENVENIDA ================================ */ .gif-bienvenida { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); width: 600px; max-width: 90%; height: auto; } /* ================================ TEXTO ================================ */ .presentacion { position: absolute; top: 335px; left: 245px; color: white; font-size: 54px; line-height: 1.45; text-align: left; } /* ================================ GIF WORLD WIDE WEB ================================ */ .gif-www { position: absolute; top: 430px; right: 80px; width: 330px; max-width: 35%; height: auto; } /* ================================ ENLACES ================================ */ .link { position: absolute; color: white; font-size: 64px; line-height: 1; text-decoration: none; } .link:hover { color: white; text-decoration: underline; } /* Posiciones */ .clicker { top: 820px; left: 120px; } .proyectos { top: 820px; left: 595px; } .historia { top: 1090px; left: 405px; } /* ================================ PROYECTOS ================================ */ #proyectos { position: relative; width: 850px; margin: 1500px auto 0; padding: 40px; color: white; background: rgba(0, 0, 0, 0.75); border: 1px dashed white; } #proyectos h2 { color: white; } #proyectos p { color: white; } #proyectos a { color: white; } /* ================================ MI HISTORIA ================================ */ #historia { position: relative; width: 850px; margin: 80px auto 0; padding: 40px; color: white; background: rgba(0, 0, 0, 0.75); border: 1px dashed white; } #historia h2 { color: white; } #historia p { color: white; } /* ================================ FOOTER ================================ */ footer { position: relative; margin-top: 100px; padding-bottom: 50px; color: white; text-align: center; } /* ================================ CELULAR ================================ */ @media (max-width: 800px) { .stars { width: 100vw; min-height: 1200px; } .gif-bienvenida { top: 70px; width: 90%; } .presentacion { top: 220px; left: 10%; font-size: 32px; } .gif-www { top: 390px; right: 50%; transform: translateX(50%); width: 250px; max-width: 70%; } .link { font-size: 36px; } .clicker { top: 700px; left: 10%; } .proyectos { top: 770px; left: 10%; } .historia { top: 840px; left: 10%; }/* ================================ FONDO ================================ */ body { margin: 0; padding: 0; background: #000; color: white; font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif; } /* Fondo de estrellas desde images */ .stars { position: relative; width: 1200px; min-height: 1600px; margin: 0 auto; overflow: hidden; background-color: #000; background-image: url("images/estrellas.gif"); background-repeat: repeat; background-position: top left; } /* ================================ GIF BIENVENIDA ================================ */ .gif-bienvenida { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); width: 600px; max-width: 90%; height: auto; } /* ================================ TEXTO ================================ */ .presentacion { position: absolute; top: 335px; left: 245px; color: white; font-size: 54px; line-height: 1.45; text-align: left; } /* ================================ GIF WORLD WIDE WEB ================================ */ .gif-www { position: absolute; top: 430px; right: 80px; width: 330px; max-width: 35%; height: auto; } /* ================================ ENLACES ================================ */ .link { position: absolute; color: white; font-size: 64px; line-height: 1; text-decoration: none; } .link:hover { color: white; text-decoration: underline; } /* Posiciones */ .clicker { top: 820px; left: 120px; } .proyectos { top: 820px; left: 595px; } .historia { top: 1090px; left: 405px; } /* ================================ PROYECTOS ================================ */ #proyectos { position: relative; width: 850px; margin: 1500px auto 0; padding: 40px; color: white; background: rgba(0, 0, 0, 0.75); border: 1px dashed white; } #proyectos h2 { color: white; } #proyectos p { color: white; } #proyectos a { color: white; } /* ================================ MI HISTORIA ================================ */ #historia { position: relative; width: 850px; margin: 80px auto 0; padding: 40px; color: white; background: rgba(0, 0, 0, 0.75); border: 1px dashed white; } #historia h2 { color: white; } #historia p { color: white; } /* ================================ FOOTER ================================ */ footer { position: relative; margin-top: 100px; padding-bottom: 50px; color: white; text-align: center; } /* ================================ CELULAR ================================ */ @media (max-width: 800px) { .stars { width: 100vw; min-height: 1200px; } .gif-bienvenida { top: 70px; width: 90%; } .presentacion { top: 220px; left: 10%; font-size: 32px; } .gif-www { top: 390px; right: 50%; transform: translateX(50%); width: 250px; max-width: 70%; } .link { font-size: 36px; } .clicker { top: 700px; left: 10%; } .proyectos { top: 770px; left: 10%; } .historia { top: 840px; left: 10%; } #proyectos, #historia { width: 90%; padding: 25px; } } #proyectos, #historia { width: 90%; padding: 25px; } }