Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery #14

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Gallery #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c3ce38
Create gallery.html
vcaptainamazing Sep 23, 2014
7d49b7c
Delete gallery.html
vcaptainamazing Sep 23, 2014
3686ada
Responsive Gallery
vcaptainamazing Sep 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions css/desktop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

58 changes: 58 additions & 0 deletions css/phone-default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
48 changes: 48 additions & 0 deletions css/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
38 changes: 38 additions & 0 deletions css/tablet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
96 changes: 96 additions & 0 deletions gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Famous Creatures Gallery</title>



<link href="css/reset.css" rel="stylesheet">
<!-- phone-default -->
<link href="css/phone-default.css" rel="stylesheet">
<!-- enhance-tablet -->
<link href="css/tablet.css" rel="stylesheet">
<!-- enhance-desktop -->
<link href="css/desktop.css" rel="stylesheet">


</head>




<body>
<div id="contentWrapper">
<div id="content">
<h1>Famous Creatures</h1>

<div class="row">

<article class="gallery">
<img src="img/otter.jpeg" alt="Carter Brown" title="otter" />
<figcaption>Annoyed at the length of the photo shoot, this otter diva barks at her assistant for another cuppachino.</figcaption>
</article>

<article class="gallery">
<img src="img/snail.jpeg" alt="Harrision K. B." title="snail" />
<figcaption>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'.</figcaption>
</article>

<article class="gallery">
<img src="img/fox.jpeg" alt="Amber Crockett" title="Fox"/>
<figcaption>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!</figcaption>
</article>



<article class="gallery">
<img src="img/Northern_Baikal_Russia.jpeg" alt="Creative Commons" />
<figcaption>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.</figcaption>
</article>




<article class="gallery">
<img src="img/taranchula.jpeg" alt="Creative Commons" title="Taranchula"/>
<figcaption>This gentle giant of the land-based arachnids is a common house pet for a legion of adolesant and pre-adolesant boys.</figcaption>
</article>

</div><!--end row-->
<div class="row">

<article class="gallery">
<img src="img/chimps.jpeg" alt="Creative Commons" title="Chimpanzes" />
<figcaption>A plesant picnic in the grass adds some extra color to another beautiful day on the preserve</figcaption>
</article>



<article class="gallery">
<img src="img/African_elephant.jpeg" alt="Creative Commons" title="African elephants" />
</article>

</div><!--end row-->
<div class="row">

<article class="gallery">
<img src="img/bird.jpeg" alt="Creative Commons" title="Bird is the word"/>
<figcaption>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</figcaption>
</article>
</div><!--end row-->








<div class="keepOpen"></div>
</div><!-- end content -->
</div><!-- end content wrapper -->


</body>
</html>