Front Page Design

cosphoto

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

Hikin' Mike

I think this is what you want: http://mike.imagesinthebackcountry.com/Splash-Page-Example. You can add or subtract images. Let me know if you need more help.

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&quot; alt="Landscape Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/landscape/&quot; 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&quot; alt="Wildlife Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/wildlife/&quot; 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&quot; alt="Absense of Color" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/absence-of-color/&quot; 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&quot; alt="Nature Photos" /></a>
<a href="http://www.imagesinthebackcountry.com/portfolio/nature/&quot; 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;
        }
}    

cosphoto

Yes, that is what I'm looking for.

Thank you!!

Brian

brandofamily

cosphoto wrote: »

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

My welcome page is similar to what you want if you remove the nav bar.
http://brandolinoimaging.smugmug.com/Welcome

cosphoto

Yes, it is, very much so.

Would you share your code that creates this?

Thank you,

Brian

denisegoldberg

cosphoto wrote: »

Would you share your code that creates this?

Have you considered using a set of photo content blocks instead of using code? You can use a single photo block and have a click go to a URL (or to a gallery).

--- Denise

cosphoto

I have not, but I will look into it as well. Thanks.

brandofamily

cosphoto wrote: »

Yes, it is, very much so.

Would you share your code that creates this?

Thank you,

Brian

Here you go...

<div class="Title" style="text-align: center; font-size: 32px; font-weight: 100;">
Welcome to Brandolino Imaging</div>

<div id="WP">
<div style="font-size: 18px;">
Thank you for taking the time to visit my site. 
The images below are links to the various image categories.
<br />
Many of the images in these galleries are for sale and can be purchased directly through this site and shipped to your home.
 
Thanks again for visiting <i>Brandolino Imaging</i>. I hope you enjoy the images. Please take a moment to sign the <a href="http://www.brandolinoimaging.com/Info-Pages/Guestbook/n-twXwT" target="_blank"><i>GuestBook</i></a>.</div>

<br />

<div style="text-align: center;">
<table border="0px" cellpadding="0" cellspacing="0" width="850" style="margin: auto;">
  
<tr>

<td align="center"><a href="/Image-Galleries/My-Portfolio"><img src="http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-MKPCDnn/1/O/portfolio-O.jpg" border="0" height="420" width="150" alt="image" /></a></td>

<td align="center"><a href="/Image-Galleries/Sports-Images"><img src="http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-vfLV7H6/1/O/Sports-O.jpg" border="0" height="420" width="150" alt="image" /></a></td>

<td align="center"><a href="/Image-Galleries/Event-Photography"><img src="http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-v2NnPn2/1/O/Events-O.jpg" border="0" height="420" width="150" alt="image" /></a></td>

<td align="center"><a href="/Image-Galleries/Portrait-Shots"><img src="http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-wQN52M6/0/O/portraits-O.jpg" border="0" height="420" width="150" alt="image" /></a></td>

<td align="center"><a href="/Image-Galleries/European-Tours"><img src="http://www.brandolinoimaging.com/Info-Pages/Site-Images/i-38LgGg5/0/O/europe-O.jpg" border="0" height="420" width="150" alt="image" /></a></td>

</tr>
</table>
</div>
  </div>

Cropped the pictures to exact fit in photoshop and then added the labels.

cosphoto

Thank you!