Options
Front Page Design
cosphoto
Registered Users Posts: 9 Beginner grinner
We are in the process of rebranding and I want to develop a new look to our smugmug site. I would like to have only three or four blocks appear that represent the focus of our business. Probably a title page on top but no menus or anything else. Only four graphics across the front that represent the different aspects of what we provide. Clicking on any of these would take a user to that specific area to see more.
I haven't found anything on this forum that discusses this or shows an example. Any information would be very helpful.
Thank you,
Brian
www.cosphotos.co
I haven't found anything on this forum that discusses this or shows an example. Any information would be very helpful.
Thank you,
Brian
www.cosphotos.co
0
Comments
HTML
[html]
<div class="image-wrap">
<div class="image">
<a href="http://www.imagesinthebackcountry.com/portfolio/landscape/"><img src="http://www.imagesinthebackcountry.com/wordpress/wp-content/uploads/2013/08/01-139-half-dome.jpg" alt="Landscape Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/landscape/" class="caption">Landscape</a>
</div>
<div class="image">
<a href="http://www.imagesinthebackcountry.com/portfolio/wildlife/"><img src="http://www.imagesinthebackcountry.com/wordpress/wp-content/uploads/2013/10/03-071-annas-hummingbird.jpg" alt="Wildlife Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/wildlife/" class="caption">Wildlife</a>
</div>
<div class="image">
<a href="http://www.imagesinthebackcountry.com/portfolio/absence-of-color/"><img src="http://www.imagesinthebackcountry.com/wordpress/wp-content/uploads/2013/08/04-050-black-white-glacier-point.jpg" alt="Absense of Color" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/absence-of-color/" class="caption">Absense of Color</a>
</div>
<div class="image">
<a href="http://www.imagesinthebackcountry.com/portfolio/nature/"><img src="http://www.imagesinthebackcountry.com/wordpress/wp-content/uploads/2012/11/02-050-fog-tree-yosemite.jpg" alt="Nature Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/nature/" class="caption">Nature</a>
</div>
</div>
[/html]
CSS
/* Image Wrap */ .image-wrap { text-align: center; } /* Image Container */ .image { width: 23%; display: inline-block; float: left; } .image:nth-child(1) { float: left; } .image:nth-child(2), .image:nth-child(3) { margin: 0 1.25%; float:none; } .image:nth-child(4) { float: right; } /* Image */ .image img { width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } /* Captions */ .image .caption { position: relative; float: left; margin-top: -20%; width: 96%; padding: 1% 0 1% 3%; text-align: left; color: #fff; text-shadow: #000 .1em .1em .2em; background: rgba(0, 0, 0, 0.5); } .image:hover .caption:nth-child(1), .image:hover .caption:nth-child(2), .image:hover .caption:nth-child(3), .image:hover .caption:nth-child(4) { background: rgba(0, 0, 0, 0.8); } @media only screen and (max-width: 799px) { .image, .image:nth-child(1), .image:nth-child(2), .image:nth-child(3), .image:nth-child(4) { width:100%; clear:both; margin:0 auto; } }Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Thank you!!
Brian
My welcome page is similar to what you want if you remove the nav bar.
http://brandolinoimaging.smugmug.com/Welcome
Would you share your code that creates this?
Thank you,
Brian
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Here you go...
Cropped the pictures to exact fit in photoshop and then added the labels.