Untitled

dabblet.css

@keyframes bg-grad-shift {
	0% {opacity: 0}
	50% {opacity: 1}
	100% {opacity: 0}
}

* {margin: 0; padding: 0;}

html {	
	background: linear-gradient(90deg, lightyellow, orange);
	background-attachment: fixed;
	min-height: 100%;
	}	

body * {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	vertical-align: top;
	}
body {
	min-height: 100%;
	width: 100%;
	background: url('bg-lines.png')center left no-repeat fixed,url('bg-halftone.png')top left repeat-x fixed;
	}
	.bg-grad-shift {
		background: linear-gradient(90deg, yellow, #aeaeae);
		animation: bg-grad-shift 50s linear infinite;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 0;
		}
/*JKLM retrial*/
	
.left-box {
	width: 450px;
	min-height: 100%;
	text-align: center;
	}
	.contact {
		width: 450px;
		position: fixed;
		top: 250px;
		left: 0;
		}
	.contact a {
		width: 60%;
		clear: left;
		text-decoration: none;
		font-family: sans-serif;
		color: white;
		}
	.logo {
		height: 50px;
		line-height: 50px;
		}
	.social {
		background: rgba(26,30,73,.6);
		border-radius: 20px;
		padding: 10px;
		box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
		}
		.social:hover {
			background: white;
			color: #222;
			}
		.social+.social {
			margin-top: 1px;
			}
	
.right-box {
	width: -webkit-calc(100% - 450px);
	text-align: left;
	}
	.intro, .process {
		padding: 50px;
		width: 100%;
		}	
	h1 {
		display: block;
		margin-bottom: 20px;
		}
		.long-sentences {
			width: 450px;
			}
			.long-sentences:first-of-type:first-letter {
				font-size: 2em;
				float: left;
				margin: -3px;
				}			
			.long-sentences+.long-sentences {
				margin-top: 20px;
				}
		[rel=bg-alt]:nth-of-type(odd) {
			background: rgba(0,0,0,.6);
			color: white;
			}
		[rel=bg-alt]:nth-of-type(even) {
			background: rgba(255,255,255,.8);
			color: #222;
			}
	.works {
		width: 100%;
		padding: 50px;
		background: white;
		}
	.css-exp-thumbs {
		margin-top: 20px;
		}
		h2 {
			width: 100%;
			margin-bottom: 30px;
			}
		.thumbnail {
			width: 33.3%;
			text-align: center;
			margin-bottom: 50px;
			}
			.thumbnail:hover .preview,
			.thumbnail:hover .description{
				box-shadow: 0 0 15px skyblue;
				}
			.preview {
				background: #222;
				width: 140px;
				height: 140px;
				border-radius: 50%;
				margin-bottom: 10px;				
				transition: .6s;
				}
			.description {
				background: #222;
				color: white;
				border-radius: 10px;
				padding: 10px;
				width: 70%;
				font: .8em/1.2em sans-serif;
				transition: .6s;
				}

dabblet.html

<div class="bg-grad-shift"></div>

<div class="left-box">	
	<div class="contact">
		<a href="#" class="logo" alt="">JKLM</a>
		<a href="#" class="social" alt="">email</a>
		<a href="#" class="social" alt="">twitter</a>
		<a href="#" class="social" alt="">dribbble</a>
	</div>
</div><!--

--><div class="right-box">
	<div class="intro" rel="bg-alt">
		<h1>Hello.</h1>
		<p class="long-sentences">
			The plight of people in rural areas, with vision impairment is so terrible that street begging & dependency on others becomes the only means of survival for many, especially those without adequate and appropriate education during their childhood that would enhance their capability to lead a dignified life and also help them to earn a square meal.
		</p>
		
		<p class="long-sentences">
			The plight of people in rural areas, with vision impairment is so terrible that street begging & dependency on others becomes the only means of survival for many, especially those without adequate and appropriate education during their childhood that would enhance their capability to lead a dignified life and also help them to earn a square meal.
		</p>
	</div>
	
	<div class="process" rel="bg-alt">
		<h1>Work Process:</h1>
		<p class="long-sentences">
			The plight of people in rural areas, with vision impairment is so terrible that street begging & dependency on others becomes the only means of survival for many, especially those without adequate and appropriate education during their childhood that would enhance their capability to lead a dignified life and also help them to earn a square meal.
		</p>
		
		<p class="long-sentences">
			The plight of people in rural areas, with vision impairment is so terrible that street begging & dependency on others becomes the only means of survival for many, especially those without adequate and appropriate education during their childhood that would enhance their capability to lead a dignified life and also help them to earn a square meal.
		</p>
	</div>
	
	<div class="works" rel="bg-alt">
		<h2>My CSS Experiments:</h2>
		<p class="long-sentences">
			The plight of people in rural areas, with vision impairment is so terrible that street begging & dependency on others becomes the only means of survival for many, especially those without adequate and appropriate education during their childhood that would enhance their capability to lead a dignified life and also help them to earn a square meal.
		</p>
		
		<div class="css-exp-thumbs">		
			<a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a><!--
			--><a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a><!--
			--><a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a><!--
			--><a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a><!--
			--><a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a><!--
			--><a href="" class="thumbnail" alt="">
				<span class="preview"></span>
				<span class="description">The plight of people in rural areas, with vision impairment is so</span>
			</a>
		</div>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}