diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 44335d2..0000000 --- a/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ - -*.mp4 - -*.webm diff --git a/README.md b/README.md deleted file mode 100644 index ff7d6c0..0000000 --- a/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Puls3-America -============= -.-..-. _ .-. .-. -: `' : :_; : : : : -: .. : .--. .-. .--. .--. .--. ,-.,-. .-' : .--. : : .--. -: :; :' '_.': :' .; :: ..'' .; ; : ,. :' .; :' .; : _ : :_ ' .; ; -:_;:_;`.__.': :`.__.':_; `.__,_;:_;:_;`.__.'`.__.':_;`.__;`.__,_; - .-. : - -El mejor curso de Diseño Web :D diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..065e608 Binary files /dev/null and b/Thumbs.db differ diff --git a/estilos.css b/estilos.css index d121478..b042aa4 100644 --- a/estilos.css +++ b/estilos.css @@ -1,3 +1,5 @@ +/*Y ahora los estilos:*/ +/*Se importan las fuentes especiales...*/ @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); @@ -8,22 +10,26 @@ font-weight: normal; font-style: normal; } - +/*Se le da color a los links*/ a { color: #DD4F24; + text-decoration: none; } +/*Características básicas del body*/ body { + /*Color de fondo de la página.*/ background: #EFEFEF; + /*Color de la fuente*/ color: #4C4C4C; + /*Tipografía(PT Sans), y, en caso de que no se pueda cargar esa...Arial*/ font-family: "PT Sans", Arial; + /*Tamaño de fuente*/ font-size: 16px; - margin: 0; + } -/* -comentario de lo que sea -*/ +/*Y del footer...[De auí todo es muy intuitivo, así que sólo explicaré lo importante]*/ footer { background: #434343; @@ -32,6 +38,7 @@ footer text-align: center; width: 100%; } +/*Anidados: estamos diciendo que le aplique los estilos a el párrafo que esté dentro del footer*/ footer p { margin: 0; @@ -42,12 +49,57 @@ header color: white; margin: 0; padding: 0.5em; + position: relative; +} +header a div +{ + background-color: #22BCE0; + /*El redondeado del borde */ + border-radius: 3px 3px 0 0; + color: white; + font-size: 1.1em; + /*El alto*/ + height: 25px; + /*El ancho*/ + width:80px; + position: absolute; + /*Espacio desde abajo*/ + bottom: 0; + /*Espacio desde la izquierda*/ + left: 60%; + padding: 0 10px; + vertical-align: middle; + + +} +/*Agregar las tipografías especiales :o*/ +/*Despues del div que contiene el link que está en el header...*/ +header a div:after +{ + /*Agregar la "letra":*/ + content: "\e002"; + /*50% de opacidad*/ + opacity: 0.5; + /*Y la fuente(Lo más importante)que sabe a qué caracter se refiere*/ + font-family: "icomoon"; + /*Que se pegue a la derecha*/ + float: right; + /*Y que pase por toda la mitad*/ + line-height: 22px; + } -header:after{ +/*Organizando algunos bugs del header...*/ +header:after +{ clear: both; content: ""; display: block; } +/*cuando el cursor esté sobre el header*/ +header a div:hover +{ + background-color: #20B1D3 +} header figure { float: left; @@ -73,6 +125,7 @@ header #avatar figcaption height: 50px; line-height: 50px; } +/*Más tipografías especiales...*/ header #avatar figcaption:after { content: "\e001"; @@ -94,8 +147,10 @@ nav background: #878787; font-size: 0.9em; } + nav ul { + /*Eliminando los puntos de los li(List items)*/ list-style: none; margin: 0; padding: 0; @@ -103,14 +158,27 @@ nav ul nav ul li { display: inline-block; - margin: 0 1.2em 0 0; + padding: 0 0.6em; vertical-align: top; + margin: 0; } nav ul li a { color: white; display: block; padding: 0.5em 0; + text-decoration: none; + +} +nav ul li:hover +{ + + background-color: #7C7C7C; +} +nav #flechita_nav +{ + padding-left: 0; + padding-right: 0; } nav #flechita_nav a { @@ -124,15 +192,21 @@ nav #flechita_nav a:after font-family: "icomoon"; opacity: 0.6; } + nav #publicar_nav { - /*i is zorri*/ background: #DD4F24; float: right; margin-right: 0; padding-right: 1em; position: relative; } +nav #publicar_nav a +{ + display: inline-block; + padding: 0.5em 1em; + text-decoration: none; +} nav #publicar_nav:after { color: rgba(255,255,255,0.5); @@ -143,11 +217,10 @@ nav #publicar_nav:after right: 0; top: 0; } -nav #publicar_nav a + +nav #publicar_nav:hover { - display: inline-block; - padding: 0.5em 1em; - text-decoration: none; + background: #FF5B29; } #bienvenida { @@ -165,16 +238,51 @@ nav #publicar_nav a min-height: 128px; position: relative; } -#contenido .item p +#contenido p { color: #7A7A7A; font-size: 0.9em; } -#contenido .item .datos_item +#contenido #item_resaltado +{ + padding: 0; + margin: 0 auto; +} +#contenido #item_resaltado #imagen_grande +{ + font-size: 1.3em; + position: relative; +} +#contenido #item_resaltado #imagen_grande #info_resaltada +{ + background: rgba(225,225,225,0.8); + bottom:5px; + border-bottom: 3px solid #DD4F24; + position: absolute; + text-align: left; + width: 100% +} +#contenido #item_resaltado .votacion +{ + float: left; + height: 3em; + text-align: center; + + width: 15%; + vertical-align: middle; +} +#contenido #item_resaltado #datos_resaltados +{ + float: right; + width: 85%; +} +#contenido .datos_item + { text-align: right; } -#contenido .item .datos_item .comentarios_item +#contenido .datos_item .comentarios_item + { background: #878787; border-radius: 4px; @@ -182,9 +290,11 @@ nav #publicar_nav a margin: 0 0 0 2em; padding: 4px; position: relative; + /*Eliminando toda decoración del texto*/ text-decoration: none; } -#contenido .item .datos_item .comentarios_item:after{ +#contenido .datos_item .comentarios_item:after +{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #878787; @@ -204,7 +314,8 @@ nav #publicar_nav a content: "\e003"; font-family: "icomoon"; } -#contenido .item .datos_item .tag_item +#contenido .datos_item .tag_item + { background: #22BCE0; border-radius: 0.5em; @@ -213,27 +324,27 @@ nav #publicar_nav a padding: 0.2em 0.5em; text-decoration: none; } -#contenido .item .imagen_item +#contenido .imagen_item { float: left; margin: 0 1em 0 0; } -#contenido .item .imagen_item img +#contenido .imagen_item img { width: 96px; } -#contenido .item .titulo_item +#contenido .titulo_item { font-size: 1em; font-style: italic; padding: 0.5em 0.5em 0; } -#contenido .item .titulo_item a +#contenido .titulo_item a { color: #444; text-decoration: none; } -#contenido .item .votacion +#contenido .item .votacion { background: white; border-radius: 0 0 0.5em 0.5em; @@ -244,33 +355,29 @@ nav #publicar_nav a top: 100%; width: 96px; } -#contenido .item .votacion a +#contenido .votacion a { text-decoration: none; } -#contenido .item .votacion .down:after, -#contenido .item .votacion .up:after +#contenido .votacion .down:after, +#contenido .votacion .up:after { font-family: "icomoon"; font-size: 1.5em; vertical-align: bottom; } -#contenido .item .votacion .down:after +#contenido .votacion .down:after { color: red; content: "\e001"; } -#contenido .item .votacion .up:after +#contenido .votacion .up:after { color: green; content: "\e002"; } - - - - - - - - - +#item_resaltado +{ + /*Borrando algunas cosas que apareceremos cuando sea un desktop...*/ + display: none; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..e5c0052 Binary files /dev/null and b/favicon.ico differ diff --git a/github.txt b/github.txt deleted file mode 100644 index bef50e5..0000000 --- a/github.txt +++ /dev/null @@ -1,32 +0,0 @@ - - - - -SISTEMA DE CONTROL DE VERSIONES - -Archivos -FTP ---> Hosting /public_html/ -www.fuckencio.com - -====== - -Github.com (repositorio) -Local COMMIT SYNC -________________ - -SVN (Subversion) -GIT - -Repositorios de código -Github.com - -1. Multiples versiones del mismo código -2. Cambios delta - Base de datos atómico de el código -3. Multiples personas sobre el mismo archivo -4. CULPA AL CULPABLE -5. Ramas (branches) - * master (github.com) REPO PRINCIPAL - * master (fuckencio.com) REPO LOCAL - * master (local) REPO LOCAL - * devpony (local) --> merge --> master (local) diff --git a/imagen-grande.jpg b/imagen-grande.jpg new file mode 100644 index 0000000..a99d294 Binary files /dev/null and b/imagen-grande.jpg differ diff --git a/index.html b/index.html index 31db222..d37f701 100644 --- a/index.html +++ b/index.html @@ -1,53 +1,117 @@ + + - - - - Puls3: Comunidad online de gente pro y (no sé que más escribir) + + + Puls3: Comunidad online de gente pro y (no sé qué más escribir) + + + + - +
+ +

Puls3: Comunidad de gente cool, atractiva y millonaria

+
+ + +
+ Home +
+
+ - + +
+ + + + +
+
+ +
+ + +
+ + + +
+ +
+
+
@@ -148,24 +212,24 @@

categoria Hace 5 min - 455 + 455

- + 3141 - +

+ - - + diff --git a/reglas.ESENSERIO.txt b/reglas.ESENSERIO.txt deleted file mode 100644 index a77d9b1..0000000 --- a/reglas.ESENSERIO.txt +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - -REGLAS DE CODIFICACIÓN EN CSS - -1. Todos los atributos en orden alfabético -2. Orden de estilos: - *. pre-render - 1. etiquetas - 2. IDs - 3. Clases -3. Orden alfabético todos los estilos -4. Identar y hacer código LINDO \ No newline at end of file diff --git a/responsive.css b/responsive.css index d13bc8c..7b8a944 100644 --- a/responsive.css +++ b/responsive.css @@ -1,41 +1,137 @@ +/*Y, ahora. ¡tan tan tan!... R-e-s-p-o-n-s-i-v-e ¡DESIGN!*/ +/*Cuando el viewport(la parte visible de la página) Sea mayor a 768px:*/ @media screen and (min-width: 768px) { + /*Que el margin del body sea 0*/ body { margin: 0 auto; - max-width: 1200px; + } + /*Que aparezca la bienvenida que desaparecimos por la línea 222*/ #bienvenida { display: block; - border-bottom: 1px solid #CCC; + float: right; margin-right: 2%; + /*Y ocupe el 25% del viewport*/ width: 25%; } - #bienvenida h2 + /*Explicando cómo se deberán ver algunas cosas...*/ + #bienvenida #actividad { - color: #434343; + border-bottom: 1.3px solid #CCC; } - #bienvenida #mensaje_registro, - #bienvenida #registro + + #bienvenida #actividad #b_actividad { + background: #DE5659; + border-radius: 1px; + color: white; + display: block; + font-size: 1.2em; + padding: 0.5em 0; text-align: center; + text-decoration: none; } - #bienvenida #mensaje_registro + #bienvenida #actividad .notificacion { - font-size: 0.8em; + border-bottom: 1.3px solid #CCC; + color:#b3b3b3; + } + #bienvenida #actividad .notificacion .actividad_mensaje + { + + display: inline-block; + float: right; + vertical-align: center; + width: 75% } - #bienvenida #registro + #bienvenida #actividad .notificacion .comentarios_item { - background: #22BCE0; + background: #de5659; + border-radius: 4px; + color: white; + display: inline-block; + float: left; + margin-right: 2em; + padding: 4px; + position: relative; + text-decoration: none; + vertical-align: center; + } + #bienvenida #actividad .notificacion .comentarios_item:after + { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #de5659; + content: ""; + left :10px; + position: absolute; + top:100%; + } + #bienvenida #registro #b_registro + { + background: #06bbe1; + border-radius: 1px; color: white; display: block; font-size: 1.2em; padding: 0.5em 0; + text-align: center; + text-decoration: none; } + #bienvenida #registro #mensaje_registro + { + font-size: 0.8em; + color: #b3b3b3; + text-align:center; + font-style: italic; + + } + /*Limitando el ancho del contenido al 70% del viewport*/ #contenido { width: 70%; } -} \ No newline at end of file + #contenido #item_resaltado + { + display: block; + } + /*Hacer que la imagen grande ocupe el 100%(de su contenedor).*/ + #contenido #item_resaltado img + { + width: 100%; + } + +} +/*Ahora. Si la resolución llega a ser menor a 475px:*/ +@media screen and (max-width: 475px) +{ + /*El botón de publicar deje de flotar a la derecha, para que no se quiebre, y comienze a ser otro botón común del nav*/ + nav #publicar_nav + { + background: #DD4F24; + float:none; + margin-right: 0; + padding-right: 1em; + position: relative; + } +} +/*Si la resolución llegase a bajar de 350px:*/ +@media screen and (max-width: 350px) +{ + /*El título del header dejará de mostrarse*/ + #titulo_header + { + display: none; + } + /*Y la fecha de publicación de los artículos desaparecerá D: */ + #contenido .datos_item .fecha_item + { + display: none; + } +} +/*¡Y ya! :D*/ +/*Cualquier duda la puedes comentar, y yo u otra persona te la responderá */