Add merchandise

assets/css/main.css

@@ -2046,6 +2046,117 @@ input, select, textarea {
 			font-family: 'Font Awesome 5 Brands';
 		}
 
+/* Image2 */
+
+	.image2 {
+		border-radius: 0.35em;
+		border: 0;
+		display: inline-block;
+		position: relative;
+	}
+
+		.image2:before {
+			-moz-transition: opacity 0.2s ease-in-out;
+			-webkit-transition: opacity 0.2s ease-in-out;
+			-ms-transition: opacity 0.2s ease-in-out;
+			transition: opacity 0.2s ease-in-out;
+			background: url("images/overlay.png");
+			border-radius: 0.35em;
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0.5;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+
+		.image2.thumb {
+			text-align: center;
+		}
+
+			.image2.thumb:after {
+				-moz-transition: opacity 0.2s ease-in-out;
+				-webkit-transition: opacity 0.2s ease-in-out;
+				-ms-transition: opacity 0.2s ease-in-out;
+				transition: opacity 0.2s ease-in-out;
+				border-radius: 0.35em;
+				border: solid 3px rgba(255, 255, 255, 0.5);
+				color: #fff;
+				content: 'Visit shop';
+				display: inline-block;
+				font-size: 0.8em;
+				font-weight: 400;
+				left: 50%;
+				line-height: 2.25em;
+				margin: -1.25em 0 0 -3em;
+				opacity: 0;
+				padding: 0 1.5em;
+				position: absolute;
+				text-align: center;
+				text-decoration: none;
+				top: 50%;
+				white-space: nowrap;
+			}
+
+			.image2.thumb:hover:after {
+				opacity: 1.0;
+			}
+
+			.image2.thumb:hover:before {
+				background: url("images/overlay.png"), url("images/overlay.png");
+				opacity: 1.0;
+			}
+
+		.image2 img {
+			border-radius: 0.35em;
+			display: block;
+		}
+
+		.image2.left {
+			float: left;
+			margin: 0 1.5em 1em 0;
+			top: 0.25em;
+		}
+
+		.image2.right {
+			float: right;
+			margin: 0 0 1em 1.5em;
+			top: 0.25em;
+		}
+
+		.image2.left, .image2.right {
+			max-width: 40%;
+		}
+
+			.image2.left img, .image2.right img {
+				width: 100%;
+			}
+
+		.image2.fit {
+			display: block;
+			margin: 0 0 2em 0;
+			width: 100%;
+		}
+
+			.image2.fit img {
+				width: 100%;
+			}
+
+		.image2.avatar {
+			border-radius: 100%;
+		}
+
+			.image2.avatar:before {
+				display: none;
+			}
+
+			.image2.avatar img {
+				border-radius: 100%;
+				width: 100%;
+			}
+
 /* Image */
 
 	.image {
@@ -2572,6 +2683,10 @@ input, select, textarea {
 			margin: 0 0 1.5em 0;
 		}
 
+		.work-item .image2 {
+			margin: 0 0 1.5em 0;
+		}
+
 		.work-item h3 {
 			font-size: 1em;
 			margin: 0 0 0.5em 0;

index.html

@@ -13,9 +13,9 @@
 			<header id="header">
 				<div class="inner">
 					<a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>
-					<h1><strong>Thinklair Publishing</strong><br />
+					<h1><strong>Thinklair Publishing : </strong><br />
 					Books by Keir Finlow-Bates<br />
-                    (BlockchainGandalf on LinkedIn)
+                    (BlockchainGandalf)
 					</h1>
 				</div>
 			</header>
@@ -31,6 +31,13 @@
 						<p>I spend a lot of time researching and thinking about blockchain, often while walking through the Finnish woods. And then, every now and again, I find myself compelled to write a book about what I've discovered.</p>
 
                         </p>
+                     </section>
+
+				<!-- Two -->
+					<section id="two">
+						<header class="major">
+							<h2>The Books</h2>
+						</header>
 
 						<div class="row">
 							<article class="col-6 col-12-xsmall work-item">
@@ -59,6 +66,29 @@
 							</article>
 						</div>
 					</section>
+
+				<!-- Three -->
+					<section id="two">
+						<header class="major">
+							<h2>The Merchandise</h2>
+                            <p>Prices shown are estimates and may differ depending on your shipping destination</p>
+						</header>
+
+						<div class="row">
+							<article class="col-12 col-12-xsmall work-item">
+								<h4>Move Over Brokers Clothing</h4>
+								<a href="https://www.etsy.com/fi-en/shop/Thinklair?ref=seller-platform-mcnav&section_id=42944994&sort_order=price_desc" src="images/thumbs/t2.jpg" class="image2 fit thumb"><img src="images/thumbs/t2.jpg" alt="" /></a>
+							</article>
+							<article class="col-12 col-12-xsmall work-item">
+								<h4>Evil Tokenomics Clothing</h4>
+								<a href="https://www.etsy.com/fi-en/shop/Thinklair?ref=seller-platform-mcnav&section_id=42956469&sort_order=price_desc" src="images/thumbs/t1.jpg" class="image2 fit thumb"><img src="images/thumbs/t1.jpg" alt="" /></a>
+							</article>
+							<article class="col-12 col-12-xsmall work-item">
+								<h4>The Orthoverse Clothing</h4>
+								<a href="https://www.etsy.com/fi-en/shop/Thinklair?ref=seller-platform-mcnav&section_id=42956477&sort_order=price_desc" src="images/thumbs/t3.jpg" class="image2 fit thumb"><img src="images/thumbs/t3.jpg" alt="" /></a> 
+							</article>
+						</div>
+					</section>
 			</div>
 
 		<!-- Footer -->