Splash Page Example - Prints for Sale

Splash Page Example

This is just a simple “Splash Page”. In this example I created four “boxes” and added a picture and title/caption on top of the image. When you click on the image, it takes you to that page. In this example, when you click on an image it takes you to one of my galleries.

HTML


<div class="image-wrap">
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-one/"><img src="//www.YourWebsiteHere.com/image-01.jpg" alt="Image 1" /></a>
		<a href="//www.YourWebsiteHere.com/box-one/" class="caption">Box 1</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-two/"><img src="//www.YourWebsiteHere.com/image-02.jpg" alt="Image 2" /></a>
		<a href="//www.YourWebsiteHere.com/box-two/" class="caption">Box 2</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-three/"><img src="//www.YourWebsiteHere.com/image-03.jpg" alt="Image 3" /></a>
		<a href="//www.YourWebsiteHere.com/box-three/" class="caption">Box 3</a>
	</div>
	<div class="image">
		<a href="//www.YourWebsiteHere.com/box-four/"><img src="//www.YourWebsiteHere.com/image-04.jpg" alt="Image 4" /></a>
		<a href="//www.YourWebsiteHere.com/box-four/" class="caption">Box 4</a>
	</div>
</div>

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%;
	-webkit-box-sizing: border-box;
	   -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;
		}
}	

ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In