From 16d7462d8d1edeea3bb4cfd22e53625247e3c90d Mon Sep 17 00:00:00 2001 From: Jorge Noricumbo Date: Sat, 28 Jun 2014 12:29:57 -0500 Subject: [PATCH] Primer commit --- css/style.css | 54 ++++++++++++++++++++++++++++ css/style_large_screen.css | 22 ++++++++++++ css/style_medium_screen.css | 8 +++++ css/style_small_screen.css | 16 +++++++++ index.html | 70 +++++++++++++++++++++++++++++++++++++ 5 files changed, 170 insertions(+) create mode 100644 css/style.css create mode 100644 css/style_large_screen.css create mode 100644 css/style_medium_screen.css create mode 100644 css/style_small_screen.css create mode 100644 index.html diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..0f7bb29 --- /dev/null +++ b/css/style.css @@ -0,0 +1,54 @@ +/* Global styles */ + +body { + background-color: #dedede; + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + margin: 0; +} + +.contenedor_principal { + max-width: 960px; + /*min-width: 300px;*/ + margin: 0 auto; + background-color: #fff; +} + +h1 { font-size: 2rem; } +h2 { font-size: 1.7em; } +h3 { font-size: 1.5em; } + +p { line-height: 1.5em; } + +header { height: 200px; background-color: #ccc; } +header h1 { margin: 0; } + +nav { background-color: #333; color: #fff; } +nav a { display: inline-block; color: #fff; text-decoration: none; padding: 15px 25px; } +nav a:hover { background-color: #aaa; } + +.descripcion { padding: 10px; } + +footer { background-color: #dedede; clear: both; } +footer p { margin: 0; font-size: 0.8em; } + +/* Clear fix = Group (Revisar: http://css-tricks.com/snippets/css/clear-fix/) */ +.group:after { + content: ""; + display: table; + clear: both; +} + + + +/* Media query para cambiar gráficos para retina display. Tienen que ser del doble del tamaño normal a 72dpi. Revisar también http://css-tricks.com/snippets/css/retina-display-media-query/ */ +@media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx) + { + + } \ No newline at end of file diff --git a/css/style_large_screen.css b/css/style_large_screen.css new file mode 100644 index 0000000..37a57f8 --- /dev/null +++ b/css/style_large_screen.css @@ -0,0 +1,22 @@ +/* Large screen styles */ + +header { height: 200px; background: url('http://placehold.it/960x200') top center; } + +.nota { + width: 33%; + float: left; + position: relative; +} + +.nota img { float: left; margin: 10px 10px 0 10px; } +.nota p { padding: 0 10px; } + +@media screen and (max-width: 980px) { + footer { padding-left: 10px; } +} + + + + + + diff --git a/css/style_medium_screen.css b/css/style_medium_screen.css new file mode 100644 index 0000000..5efe722 --- /dev/null +++ b/css/style_medium_screen.css @@ -0,0 +1,8 @@ +/* Medium screen styles */ + +header { height: 150px; background: url('http://placehold.it/800x150') top center; } + +.nota img { float: none; } +.nota h2 { padding: 0 10px; } + +footer { padding-left: 10px; } \ No newline at end of file diff --git a/css/style_small_screen.css b/css/style_small_screen.css new file mode 100644 index 0000000..cc7f0a7 --- /dev/null +++ b/css/style_small_screen.css @@ -0,0 +1,16 @@ +/* Small screen styles */ + +header { height: 80px; background: url('http://placehold.it/500x80') top center; } + +nav a { display: block; margin: 0; padding: 10px 25px; } + +.nota { + float: none; + width: 100%; + margin-bottom: 3em; +} + +.nota img { float: left; width: 90px; height: 90px; margin: 0 10px; } +.nota h2 { margin: 0 0 0.5em 0; } + +footer { padding-left: 10px; } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..78d3cc4 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + Test Responsive Web Design + + + + + + + + + + + + +
+ + +
+

Test Responsive Web Design

+
+ + + + + +
+

Hola, bienvenido

+

Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie. Chupa chups ice cream caramels. I love I love lollipop I love biscuit lemon drops sweet chupa chups. Danish chocolate powder I love chupa chups.

+
+ + +
+ place holder image +

Título de nota

+

Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.

+
+ + +
+ place holder image +

Título de nota

+

Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.

+
+ + +
+ place holder image +

Título de nota

+

Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.

+
+ + + +
+ + \ No newline at end of file