From 72a0b354e0576f4012f9de522a62d157de662c53 Mon Sep 17 00:00:00 2001 From: vcaptainamazing Date: Tue, 23 Sep 2014 12:06:33 -0600 Subject: [PATCH] Gallery Here is the gallery I created in HTML and CSS. I used multiple media queries to be able to make it responsive. --- README.md | 2 +- css/desktop.css | 45 ++++++++++++++++++++ css/phone-default.css | 58 ++++++++++++++++++++++++++ css/reset.css | 48 ++++++++++++++++++++++ css/tablet.css | 38 +++++++++++++++++ gallery.html | 96 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 286 insertions(+), 1 deletion(-) create mode 100644 css/desktop.css create mode 100644 css/phone-default.css create mode 100644 css/reset.css create mode 100644 css/tablet.css create mode 100644 gallery.html diff --git a/README.md b/README.md index 326a0c5..1d524f3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ UIDev-substrate =============== -Clone this repo and create a responsive image gallery using the gallery.json file for data. Include and/or create what ever other resources you may need then submit and pull request. +Clone this repo and create a responsive image gallery using the gallery.json file for data. Include and/or create what ever other resources you may need then submit a pull request. Make sure to document your decision process in your code and elaborate on challenges and solutions in your commit messages and pull requests. diff --git a/css/desktop.css b/css/desktop.css new file mode 100644 index 0000000..ce2d3e6 --- /dev/null +++ b/css/desktop.css @@ -0,0 +1,45 @@ +@media only screen and (min-width: 941px) { +/*-----BODY -----*/ + body {} + + + + + + +/*-----CONTENT -----*/ + + +#content { + margin: 0 auto; + max-width: 1040px; + width:940px; + margin: 0 auto 0 auto; +} + +h1 { + font-size:6em; +} + + +div#container { + width:940px; + margin: 0 auto 0 auto; + +} + + +div.row { + clear: both; +} + +figcaption { + padding-top:11px; +} + + + +} +Window size: x +Viewport size: x + diff --git a/css/phone-default.css b/css/phone-default.css new file mode 100644 index 0000000..ac1f19e --- /dev/null +++ b/css/phone-default.css @@ -0,0 +1,58 @@ +/*-----Prevents iPhone from resizing in landscape mode -----*/ +html {-webkit-text-size-adjust: none; } + +/*-----BODY -----*/ +body { + background-color: #414141; + font-size: 16px; + font-family: 'Oswald', sans-serif; + font-weight: 300; +} + + +/*-----WRAPPERS -----*/ + +div#navWrapper, div#headWrapper, div#contentWrapper, div#footerWrapper { + min-width: 320px; +} + +article { + width: 96%; + margin: .9em 2%; +} + +article img { + width: 98%; +} + +article.gallery { + width: 96%; + margin: .9em 2%; + +} + +a:link { + text-decoration:none; + color:095979; +} + +figcaption { + color:#E3DEDE; + padding-top:5px; +} + +h1 { + font-size:2.7em; + color:#9C9C9C; + padding:2.1% +} + + +/*----- FOOTER -----*/ + +/*----- OTHER -----*/ +.keepOpen { + clear: both; +} +Window size: x +Viewport size: x \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/css/tablet.css b/css/tablet.css new file mode 100644 index 0000000..d7516ac --- /dev/null +++ b/css/tablet.css @@ -0,0 +1,38 @@ +@media only screen and (min-width: 600px) { +/*-----BODY -----*/ + body {} + + +/*-----CONTENT -----*/ + +article img { + float:left; + width: 98%; +} + + +article.gallery { + float:left; + width: 44%; +} + +h1 { + font-size:4em; +} + + + +div.row { + clear: both; +} + +figcaption { + padding-top:11px; +} + +/*----- FOOTER -----*/ + + +} +Window size: x +Viewport size: x \ No newline at end of file diff --git a/gallery.html b/gallery.html new file mode 100644 index 0000000..81b819e --- /dev/null +++ b/gallery.html @@ -0,0 +1,96 @@ + + + + +Famous Creatures Gallery + + + + + + + + + + + + + + + + + + +
+
+

Famous Creatures

+ +
+ +
+Carter Brown +
Annoyed at the length of the photo shoot, this otter diva barks at her assistant for another cuppachino.
+
+ +
+Harrision K. B. +
Considered a star in the snail community, this little guy can be seen in two shots in Pixar's 'A Bug's Life' and acheived child star status with his premiering role in 'Honey I Shrunk the Kids'.
+
+ +
+Amber Crockett +
In a shameful and desperate attempt for attention, this granddaughter of the once great fox of Fox in Socks fame, claims to have been the inspiration behind the ears on Josie and her Pussycats. Aside from the obvious problem of the band's ears being feline in nature and foxes being of the canine varity, there is also the anachronistic problems, Josie predating this young fox by several decades... Just shameful!
+
+ + + +
+Creative Commons +
Widely roumored to be the site of the elusive Durmstrang school for wizards, made famous (infamous?) in the works of renouned biographer J.K. Rowling's epic seven part expose on one Harry Potter, this lake in northern Russia Baikal region has long been known for it's magical properites and unexplained evnets.
+
+ + + + +
+Creative Commons +
This gentle giant of the land-based arachnids is a common house pet for a legion of adolesant and pre-adolesant boys.
+
+ +
+
+ +
+Creative Commons +
A plesant picnic in the grass adds some extra color to another beautiful day on the preserve
+
+ + + +
+Creative Commons +
+ +
+
+ +
+Creative Commons +
A mysogonist bird makes cat calls at a passing female on his lunch break. The bird was later reported to H.R. and his union rep, but was merely given a slap on the wrist. When questioned about the diminutive punishment, the H.R. rep stated unapologetically, 'birds will be birds.' Of no comfort to the passing female as this was the thrid time this week she had been whistled at in a tone denoting that the male is available for mating
+
+
+ + + + + + + + +
+
+
+ + + +