Skip to content
Permalink
Browse files

Adjusted names

Changed "design" to "image" and added alt/title tags.
  • Loading branch information...
erobirds committed Aug 30, 2017
1 parent 2a1f0b6 commit 71843d192333d42611abd981a608939b80394ed3
Showing with 23 additions and 23 deletions.
  1. +23 −23 index.php
@@ -92,43 +92,43 @@ function getPicName($c, $pics)
<style type="text/css">
body { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NUUVH5z0AEYAQpvHPnDkGlowrxBhHRwQMAYtQlbUStXfMAAAAASUVORK5CYII=); margin: 0; font-family: sans-serif; overflow-x: hidden; line-height: 1; }
body, a { text-decoration: none; color: #333; }
a, a img, .design-dropdown { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }
a, a img, .image-dropdown { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }
a:hover { color: #1961a4; }
#top-nav { background: -webkit-gradient(linear, left top, right top, from(#f8f8f8), to(#ccc)); background: -webkit-linear-gradient(top, #f8f8f8, #ccc); background: linear-gradient(top, #f8f8f8, #ccc); background-color: #ccc; border-top: 1px solid #fff; display: table; width: 100%; position: relative; z-index: 99; }
h1, #prev, #design-select, #next { display: table-cell; vertical-align: middle; }
h1, #prev, #image-select, #next { display: table-cell; vertical-align: middle; }
#prev a, #next a { display: block; padding: 10px; font-size: 0.875em; }
#prev a, #next a, #design-select, #footer { font-size: 0.8125em; }
#prev a, #next a, #image-select, #footer { font-size: 0.8125em; }
h1 { width: 60%; font-size: 1.2em; font-weight: normal; margin: 0; padding: 10px 10px 10px 20px; }
#prev, #next { width: 5%; white-space: nowrap; }
#prev { text-align: right; }
#next { text-align: left; }
#top-nav span { font-weight: bold; position: relative; top: 1px; }
#design { text-align: center; padding: 20px; }
#design img { -webkit-box-shadow: 0 0 30px #000; box-shadow: 0 0 30px #000;}
#image { text-align: center; padding: 20px; }
#image img { -webkit-box-shadow: 0 0 30px #000; box-shadow: 0 0 30px #000;}
#footer { padding: 10px 10px 30px 20px; line-height: 1.4; text-align: center; }
#footer, #footer a { color: #999; }
#footer a { text-decoration: underline; }
#footer a:hover { color: #fff; }
img { border: 0; max-width: 100%; height: auto; }
#design-select { *zoom: 1; font-weight: bold; width: 30%; }
#design-select:after { clear: both; content: ""; display: table; }
.design-dropdown { background: #f8f8f8; position: relative; width: 90%; margin: 10px auto; padding: 10px 15px; border-radius: 3px; cursor: pointer; outline: none; }
.design-dropdown:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 15px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #333 transparent; }
#image-select { *zoom: 1; font-weight: bold; width: 30%; }
#image-select:after { clear: both; content: ""; display: table; }
.image-dropdown { background: #f8f8f8; position: relative; width: 90%; margin: 10px auto; padding: 10px 15px; border-radius: 3px; cursor: pointer; outline: none; }
.image-dropdown:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 15px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #333 transparent; }
.dropdown, .dropdown li { margin: 0; padding: 0; list-style: none; }
.dropdown { background: #ededed; position: absolute; top: 100%; left: 0; right: 0; text-align: left; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; max-height: 0; overflow-y: scroll; }
.dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; }
.dropdown li:last-of-type a { border: none; }
.dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; }
.dropdown li:hover a { background: #fff; color: #1961a4; }
.design-dropdown.active { background: #1961a4; border-radius: 5px 5px 0 0; box-shadow: none; border-bottom: none; color: white; }
.design-dropdown.active:after { border-color: #fff transparent; }
.design-dropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 300px; }
.image-dropdown.active { background: #1961a4; border-radius: 5px 5px 0 0; box-shadow: none; border-bottom: none; color: white; }
.image-dropdown.active:after { border-color: #fff transparent; }
.image-dropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 300px; }
@media (min-width: 0px) and (max-width: 768px) {
#top-nav, h1, #design-select { display: block; text-align: center; width: 100%; }
#top-nav, h1, #image-select { display: block; text-align: center; width: 100%; }
h1 { padding: 10px 10px 0 10px; }
#prev,#next { display: none; }
.design-dropdown { padding: 12px; width: 85%; }
#design { padding: 0; }
.image-dropdown { padding: 12px; width: 85%; }
#image { padding: 0; }
}
</style>

@@ -154,7 +154,7 @@ function DropDown(el) {
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
$('.design-dropdown').removeClass('active');
$('.image-dropdown').removeClass('active');
});
});
@@ -171,29 +171,29 @@ function DropDown(el) {

<div id="prev"><a href="<?=$PHP_SELF?>?c=<?=getPrev($_REQUEST['c'], $pics)?>"><i class="fa fa-angle-left fa-lg"></i>&nbsp;<span>PREV</span></a></div>

<div id="design-select">
<div id="dd" class="design-dropdown" tabindex="1">Select design ...
<div id="image-select">
<div id="dd" class="image-dropdown" tabindex="1">Select image ...
<ul class="dropdown">
<? listPics($pics); ?>
</ul>
</div><!-- .design-dropdown -->
</div><!-- #design-select -->
</div><!-- .image-dropdown -->
</div><!-- #image-select -->

<div id="next"><a href="<?=$PHP_SELF?>?c=<?=getNext($_REQUEST['c'], $pics)?>"><span>NEXT</span>&nbsp;<i class="fa fa-angle-right fa-lg"></i></a></div>

</div><!-- #top-nav -->

<div id="design">
<div id="image">
<a href="<?=$PHP_SELF?>?c=<?=getNext($_REQUEST['c'], $pics)?>">
<?
if(isset($_REQUEST['c']))
showPic($_REQUEST['c'], $pics);
?>
</a>
</div><!-- #design -->
</div><!-- #image -->

<div id="footer">
All design concepts are copyright &copy; <a href="http://edwardrobirds.com" target="_blank">Edward Robirds/Sharp New Media</a> and are for sample use and display only.<br>
All images are copyright &copy; <a href="http://edwardrobirds.com" target="_blank">Edward Robirds/Sharp New Media</a> and are for sample use and display only.<br>
Distribution and/or duplication is not allowed without permission.
</div><!-- #footer -->

0 comments on commit 71843d1

Please sign in to comment.
You can’t perform that action at this time.