Newsletter Concept 1: Hong Kong

index.html

<div class="container">
	<div class="Grid firstGrid">
		<div class="Cell -8of12">
			<span>吃香港.</span>

		</div>
		<div class="Cell -4of12">
			<h1 class="trademark">Eat<BR>Hong<BR>Kong.</h1>
		</div>
	</div>

	<div class="Grid secondGrid">
		<div class="Cell -8of12">
			<span>吃香港.</span>

			<div class="cloud1">☁</div>
			<div class="cloud2">☁</div>

		</div>
		<div class="Cell -4of12">
			<h1>☀</h1>
		</div>
	</div>

	<div class="Grid thirdGrid">
		<div class="Cell -12of12">
			<span>1000￥/~ea.</span>
		</div>
	</div>
	<div>
		<h1 class="leftarrow">←
	</div>

	<div class="eathk">
		<a href="eathkramen.com">eat.hkramen.com</a>
	</div>

</div>

<div class="ramencontainer">

	<div class="handpicked">〠</div>
	<div class="ramen1">
		<span>
			<img src="https://imgeasy.com/images/aa2f48a25b109bf765fb5333c6247142.png" alt=""></span>
		<span>
			<img src="
https://imgeasy.com/images/e12c58cb665e5eeea253e850ddeeb9dc.png" alt=""></span><span>
			<img src="
https://imgeasy.com/images/bee654aea3e9a531a28dd61f231ae449.png" alt=""></span><span>
			<img src="
https://imgeasy.com/images/93b76e3a429f5c9efae2d680b16398d7.png" alt=""></span>
	</div>
</div>

	<div class="container">
		
	<div class="Grid makeGrid">
		
		<div class="Cell -12of12 heading">
			
			<h1 class="ramentutorial">Best way to Prepare <span>Ramen</span></h1>
		</div>
		
		<div class="Cell -7of12 stepright">
			<p style="font-size:24px;">The best way to prepare ramen if you have a few random items hanging around the kitchen.</p>
		</div>
		
		<div class="Cell -1of12 empty1">	
		<div class="stepnumber"></div>
		<div class="nextsteparrow"></div>	
		</div>
		
		<div class="Cell -4of12 imgright">
			<img src="https://imgeasy.com/images/1bb5db74ff48dbdcfa081374235daca2.png" alt="">
			</div>
		
		
		<div class="Cell -12of12 empty12"></div>
		
		<div class="Cell -7of12 stepright">
			<p>Before you add the noodles is good time to drop in vegetables or raw meats that will take a few more minutes to cook. You can also add things like cloves of garlic or slices of ginger to scent the broth, then remove them before eating.</p>	
		</div>
		<div class="Cell -1of12 empty2">	
			<div class="stepnumber"></div>
			<div class="nextsteparrow"></div>	
		</div>
		<div class="Cell -4of12 imgright">
			<img src="https://imgeasy.com/images/0d4e41c8b86c17a919447e6e4f970a06.png" alt="">
			</div>
		
		<div class="Cell -12of12 empty12"></div>
		
		
		<div class="Cell -4of12 imgleft">
			<img src="https://imgeasy.com/images/32f2c00dc0d115f171a31cf8e7fe5e63.png" alt="">
			</div>
		
		<div class="Cell -1of12 empty3">	
		<div class="stepnumber"></div>
		<div class="nextsteparrow"></div>	
		</div>
		
		<div class="Cell -7of12 stepright">
			<p>Quick cooking items like chopped greens can go in alongside the noodles, so they'll be ready at the same time.</p>
		</div>
		
		<div class="Cell -12of12 empty12"></div>
				
		<div class="Cell -4of12 imgleft">
			<img src="https://imgeasy.com/images/b7fe0016694746ee6e62dc475adc50c7.png" alt="">
			</div>
		
		<div class="Cell -1of12 empty4">	
			<div class="stepnumber"></div>
			<div class="nextsteparrow"></div>
		</div>
		
		<div class="Cell -7of12 stepright">
			<p>Before serving, you can make the broth a little more interesting by adding something like a dollop of tomato paste or a splash of fish sauce.</p>	
		</div>
		
		
		<div class="Cell -12of12 empty12"></div>
		
		
		<div class="Cell -4of12 imgleft">
			<img src="https://imgeasy.com/images/ce29a85a623b2f4f571112d6c144ffda.png" alt="">
			</div>
		
		<div class="Cell -1of12 empty5">	
		<div class="stepnumber"></div>
		<div class="nextsteparrow"></div>	
		</div>
		
		<div class="Cell -7of12 stepright">
			<p>When the noodles are almost done is a good time to add leftover cooked meats, like shredded chicken or sliced steak.
</p>
		</div>
		
<!-- 		
		<div class="Cell -7of12 stepright">
			<p>Packaged instant ramen, cooked according to the instructions.
</p>	
		</div>
		<div class="Cell -1of12 empty6">	
			<div class="stepnumber"></div>
			<div class="nextsteparrow"></div>	
		</div>
		<div class="Cell -4of12 imgright">
			<img src="https://imgeasy.com/images/2855c7c3c9f7d0a9cadf976276488195.png" alt="">
			</div>
		 -->
		<div class="Cell -12of12 empty12"></div>
		
		<div class="Cell -7of12 stepright empty7">
			<p style="font-size:24px">Ramen, prepared with a little extra care and creativity.<BR>▔
</p>	
		<div class="stepnumber"></div>
		<div class="nextsteparrow"></div>	
		</div>
		
		<div class="Cell -5of12 imgright">
			<img src="https://imgeasy.com/images/2742d1005237b6059b002c77a1ad3fa4.png" alt="">
			</div>
		
		
	</div>
	</div>
	
	
	
	
	
<div class="container editbottompadding" style="background:#000;color:yellow;">
	<div class="Grid fourthGrid">
		<div class="Cell -1of12">
			<span>吃<BR>香<BR>港.</span>
		</div>
		<div class="Cell -2of12">
			<h1 class="trademark">Eat<BR>Hong<BR>Kong.</h1>
		</div>
		<div class="Cell -5of12">
			<address>℡ +852 2527 0091
			</address> <br>
			<address>℻ +852 2382 1036
			</address>
		</div>
		<div class="Cell -4of12">
			<div style="text-align:right;color:red;
">
				<a href="#">Unsubscribe</a>
			</div>
		</div>
	</div>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

newsletter-concept-1-hong-kong.markdown

Newsletter Concept 1: Hong Kong

Newsletter Concept 1: Hong Kong

A Pen by Calvin on CodePen.

License.

style.css

body {
	background: #111;
	margin: 0 auto;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: none;
	color: #fff;
}
body::after {
	animation: grain 6s steps(10) infinite;
	background-image: url(https://i.imgur.com/RS2YwCJ.png);
	background-repeat: repeat;
	content: "";
	height: 300%;
	left: -100%;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: -100%;
	transition: opacity 0.4s ease;
	width: 300%;
	will-change: transform;
	z-index: 100000;
}
body:after {
	opacity: 0.06;
}

@keyframes grain {
	0% {
		transform: translate(20%, -15%);
	}
	10% {
		transform: translate(-20%, -15%);
	}
	20% {
		transform: translate(20%, -5%);
	}
	30% {
		transform: translate(-20%, -5%);
	}
	40% {
		transform: translate(20%, 5%);
	}
	50% {
		transform: translate(-20%, 5%);
	}
	60% {
		transform: translate(20%, 15%);
	}
	70% {
		transform: translate(-20%, 15%);
	}
	80% {
		transform: translate(20%, 5%);
	}
	90% {
		transform: translate(-20%, 5%);
	}
	100% {
		transform: translate(20%, -5%);
	}
}

a {
	color: inherit;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
}
a:hover,
a:focus {
	outline: none;
}

.container {
	position: relative;
	margin: 2vh auto;
	width: 600px;
	background: yellow;
	padding: 20px;
	color: #000;
	font-family: "IBM Plex Sans JP", sans-serif;
	overflow: hidden;
	z-index: 1;
}
.firstGrid .Cell h1 {
	font-size: 5.6em;
	text-align: right;
	letter-spacing: -8px;
	z-index: 1;
}
.firstGrid .Cell span {
	padding: 12px;
	color: #fff;
	background: red;
	font-size: 2.5em;
	letter-spacing: -1px;
	text-align: right;
	box-shadow: 0 0 4px red, inset 0 0 0 4px red;
	border: 4px solid red;
	z-index: 100;
	transform: skew(8deg);
	display: inline-block;
	position: relative;
}
.firstGrid .Cell span:before {
	width: 30px;
	border-radius: 100%;
	height: 30px;
	background: yellow;
	content: "";
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -23px;
	box-shadow: inset 0 -4px 4px red;
}
.firstGrid .Cell span:after {
	width: 30px;
	border-radius: 100%;
	height: 30px;
	background: yellow;
	content: "";
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -23px;
	box-shadow: inset 0 4px 4px red;
}
.secondGrid h1 {
	font-size: 4em;
	color: #000;
	opacity: 1;
	position: absolute;
	font-weight: 100;
	left: 13px;
	bottom: 65px;
	margin: 0 auto;
	display: inline-block;
	transform: rotate(12deg);
	animation: sunrock 2s ease alternate infinite;
	z-index: 100;
}
.secondGrid h1:before {
	position: absolute;
	width: 25px;
	height: 25px;
	left: 19px;
	bottom: 24px;
	background: yellow;
	content: "";
	border-radius: 100%;
}
@keyframes sunrock {
	100% {
		transform: rotate(-12deg);
	}
}
.secondGrid .cloud1,
.secondGrid .cloud2 {
	animation: cloudslide 2.12s ease alternate infinite;
	display: inline-block;
	position: absolute;
	font-size: 2.4em;
	font-weight: 400;
	bottom: 65px;
	left: 5px;
	opacity: 0.5;
	color: #000;
	filter: blur(1px);
}
.leftarrow {
	position: absolute;
	bottom: 4px;
	right: 45px;
	font-size: 18px;
	background: yellow;
	display: inline;
	padding: 0 4px;
	z-index: 1000;
}
.eathk {
	position: absolute;
	bottom: 22px;
	right: 12px;
	font-size: 12px;
}
.eathk a:link {
	color: #000;
	padding: 4px;
	border: 1px dashed;
}
.secondGrid .cloud1 {
	z-index: 1000;
}
.secondGrid .cloud2 {
	left: 44px;
	bottom: 75px;
	animation-delay: 0.2s;
	font-size: 2em;
}
@keyframes cloudslide {
	100% {
		transform: translateX(10px);
		filter: blur(0);
	}
}
.thirdGrid span {
	letter-spacing: -1px;
}
.thirdGrid h1 {
	font-size: 24px;
	padding-bottom: 5px;
}
.container {
	border: 1px solid orange;
	box-shadow: 0 2px 24px red;
}

.ramencontainer {
	width: 640px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	border: 1px solid orange;
	box-shadow: 0 2px 24px red;
}
.ramen1 {
	background: red;
	height: 200px;
	width: 1000px;
}
.ramen1 span {
	height: 200px;
	width: 200px;
	padding: 0;
	margin: 0 10px;
	position: relative;
	overflow: hidden;
	display: inline-block;
	animation: ramenmarquee 7s ease alternate infinite 1s;
	border-radius: 100%;
}
.neon {
	box-shadow: 0 0 32px 0 #fff;
	animation: neonglow 3.2s ease forwards infinite;
}
@keyframes neonglow {
	50% {
		box-shadow: 0 0 24px 0 yellow;
	}
}
.ramen1 img {
	max-height: 200px;
	position: absolute;
	right: 0;
}
@keyframes ramenmarquee {
	100% {
		transform: translateX(-180px);
	}
}
.handpicked {
	position: absolute;
	bottom: 0;
	left: 530px;
	margin: 0 auto;
	font-size: 5em;
	color: yellow;
	z-index: 100;
	animation: handpicker 2.4s ease alternate infinite;
}
@keyframes handpicker {
	100% {
		transform: translateX(-480px);
	}
}

.handpicked:before {
	content: "!";
	position: absolute;
	top: -60px;
	left: 27px;
	right: 0;
	margin: 0 auto;
	animation: exclaim 3s ease forwards infinite;
	opacity: 0;
}
@keyframes exclaim {
	0% {
		transform: scale(0.2);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	75% {
		opacity: 0;
		transform: scale(2);
	}
}

.trademark {
	line-height: 0.895;
	margin-bottom: 12px;
}
.trademark:after {
	content: "™";
	font-size: 24px;
}
.container.editbottompadding {
	padding: 20px 20px 5px;
	color: #000;
	overflow: hidden;
}

.container.editbottompadding .trademark {
	line-height: 1;
}
.container.editbottompadding .trademark:after {
	content: "™";
	font-size: 12px;
}
.container.editbottompadding .trademark {
	line-height: 1;
}
address span {
	font-size: 11px;
}

.heading .ramentutorial{
	font-size:46px;
	margin:8px 0 12px 0;
	padding-bottom:24px;
	display:block;
}
.ramentutorial span{
	transform:skew(0deg);
	display:inline-block;
	box-shadow:inset 0px 0 red;
	animation:ramenbg 3s ease forwards infinite;
}
@keyframes ramenbg{
	0{transform:skew(0deg);}
	90%{
	transform:skew(-2deg);
		box-shadow:inset 1000px 0 yellow;
	}
	100%{	
		box-shadow:inset 10px 0 yellow;
	}
}



.imgleft,.imgright{
overflow:hidden;
}
.imgleft img,
.imgright img{
	width:100%;
	height:auto;
}
.empty12{
height:24px;
}

.empty1{
	position: relative;
}
.nextsteparrow {
	position: relative;
}
.nextsteparrow:after {
	content: "↓";
	margin: 10px auto;
	vertical-align: middle;
	text-align: right;
	position: absolute;
	top: -10px;
	left: 0;
	right:0;
	display: block;
}
.stepnumber {
	position: relative;
}
.stepnumber:before {
	content: "no.xxx";
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	font-size: 22px;
}
.empty1 .stepnumber:before {
	content: "❶";
}
.empty2 .stepnumber:before {
	content: "②";
}
.empty3 .stepnumber:before {
	content: "❸";
}
.empty4 .stepnumber:before {
	content: "④";
}
.empty5 .stepnumber:before {
	content: "❺";
}
.empty6 .stepnumber:before {
	content: "Bad";
}
.empty7 .stepnumber:before {
	content: "";
}
.empty6 .nextsteparrow:after {
	content: "×";
}
.empty7 .nextsteparrow:after {
	content: "〠";
	font-size: 22px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/grd/1.2.0/grd.css" rel="stylesheet" />