PROWAREtech

articles » current » css » tilting-page-reveals-menu

CSS: Tilting Page Reveals Menu

Animated, responsive, tilting website page reveals menu using only HTML and CSS.

This page has an awesome tilting of the page to reveal a menu. What's so novel about this is that it requires no JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Tilting Webpage</title>
	<!-- FOR THE SOCIAL MEDIA ICONS ONLY -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html, body {
		height: 100%;
		font-family: sans-serif;
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #445;
	}
	.doc {
		height: 100%;
		background-color: #445;
	}
	#main {
		min-height: 200vh;
		transform-origin: 100% 0; /* DON'T USE 100vw HERE */
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1);
		background-color: #eee;
	}
	#main > div {
		padding: 50px 20%;
	}
	#doc-toggle {
		display: none;
	}
	#doc-toggle + label {
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		cursor: pointer;
		width: 75px;
		height: 75px;
		background-color: crimson;
		border-bottom-left-radius: 100%;
		overflow: hidden;
	}
	#doc-toggle + label b:nth-child(1),
	#doc-toggle + label b:nth-child(2) {
		position: absolute;
		top: 25%;
		left: 50%;
		font-size: 20px;
		color: white;
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1);
		transform-origin: 150px -150px;
	}
	#doc-toggle + label b:nth-child(2) {
		transform: rotate(-20deg);
	}
	.doc > ul {
		position: fixed;
		bottom: 0;
		right: -50px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.doc > ul li { /* covers all including HOME */
		height: 50px;
		margin-bottom: 25px;
		transform: translateX(300px);
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1) 1ms;
	}
	.doc > ul li:nth-child(2) { /* SERVICES */
		margin-left: -45px;
	}
	.doc > ul li:nth-child(3) { /* PRODUCTS */
		margin-left: -90px;
	}
	.doc > ul li:nth-child(4) { /* PORTFOLIO */
		margin-left: -135px;
	}
	.doc > ul a {
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: gray;
		transition: color 0.2s;
	}
	.doc > ul a:hover {
		color: lightgray;
	}
	#doc-toggle:checked ~ .doc #main {
		transform: rotate(35deg);
	}
	#doc-toggle:checked + label b:nth-child(1) {
		transform: rotate(20deg);
	}
	#doc-toggle:checked + label b:nth-child(2) {
		transform: rotate(0);
	}
	#doc-toggle:checked ~ .doc > ul li { /* covers all including HOME */
		transform: translateX(-100px);
		transition: transform .4s cubic-bezier(0.175, 0.885, 0.325, 1.275) .4s;
	}
	#doc-toggle:checked ~ .doc > ul li:nth-child(2) { /* SERVICES */
		transition-delay: .5s;
	}
	#doc-toggle:checked ~ .doc > ul li:nth-child(3) { /* PRODUCTS */
		transition-delay: .6s;
	}
	#doc-toggle:checked ~ .doc > ul li:nth-child(4) { /* PORTFOLIO */
		transition-delay: .7s;
	}
	h1 {
		padding-bottom: 30px;
		border-bottom: 15px solid #aaa;
	}
	.social {
		text-align: right;
	}
	.social i{
		font-size: 20px;
		background-color: crimson;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: white;
		border-radius: 50px;
	}
	</style>
</head>
<body>
	<input type="checkbox" id="doc-toggle" />
	<label for="doc-toggle">
		<b>&#9776;</b>
		<b>&times;</b>
	</label>
<div class="doc">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Portfolio</a></li>
	</ul>
	<div id="main"><!-- IE11 does not work well with the MAIN tag so DIV is used here -->
		<div>
			<h1>Tilting Webage</h1>
			<br /><br />
			<div class="social">
					<i class="fa fa-twitter"></i>
					<i class="fa fa-linkedin"></i>
					<i class="fa fa-youtube"></i>
					<i class="fa fa-facebook"></i>
			</div>
			<br /><br />
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id eveniet expedita quis, nemo et nesciunt amet rerum! Autem, voluptates eaque? Aliquam corrupti iure nisi quia quis deserunt tempore quidem perspiciatis quibusdam, id vel numquam aspernatur doloremque consectetur, autem velit asperiores eius sequi possimus esse odit temporibus. Nulla quae quasi amet accusantium eaque, quidem ratione odit consequatur deserunt, magni dignissimos dicta mollitia architecto tempore aliquam animi unde? Accusantium consequuntur culpa cum neque officia magnam. Nulla doloremque nobis quibusdam incidunt veritatis itaque molestias, vel voluptate tempora consequatur, quia numquam dicta esse ipsa, in dignissimos deleniti nemo corporis? Cum at placeat maxime excepturi.</p>
			<p>Libero labore ipsum quaerat doloribus quo tempora nisi nobis hic, tenetur natus maxime explicabo accusamus provident accusantium! Obcaecati, eum accusantium rem dolores, voluptatem dolor soluta facilis vero nihil animi doloribus? Vel sapiente nesciunt alias a aliquid culpa quas! Doloribus quos maxime reiciendis ipsam voluptate assumenda neque officia, architecto hic libero. Ab quisquam sequi, ratione autem alias exercitationem totam rerum earum est ut praesentium tenetur amet repudiandae nulla natus quis non hic obcaecati quaerat sapiente tempora dicta eligendi. Nemo itaque error autem, quos quidem nulla, excepturi ipsum mollitia neque, vero adipisci beatae sed necessitatibus. Possimus vel voluptas in a quaerat repudiandae!</p>
			<p>Recusandae pariatur placeat earum architecto! Veniam cum fugiat, adipisci dolore ratione beatae temporibus accusamus iste voluptate, nemo dicta sint at itaque reprehenderit ea perferendis necessitatibus magni quod atque magnam nulla velit, praesentium tenetur consequuntur. Corrupti nihil optio architecto doloremque dolorem perspiciatis illo rem nemo nobis mollitia. Voluptate optio unde quis corporis voluptatibus vero, cumque, veritatis expedita similique, velit iste ducimus ipsa eum tenetur fugit placeat nisi neque ab rem modi vel excepturi maiores praesentium natus? Suscipit voluptate, provident officiis voluptates porro animi repudiandae molestias nihil voluptas officia consequuntur vitae autem saepe ducimus expedita quam quod rerum reiciendis nemo quae ipsum?</p>
			<p>Expedita asperiores neque rerum vero sequi cum odio dolore eaque ipsam vitae amet nobis obcaecati fugiat reprehenderit maiores temporibus est, repellendus doloremque quos facere inventore corporis ipsa. Excepturi molestiae ea architecto explicabo consectetur aliquid quis modi perferendis cupiditate asperiores dolore debitis voluptate corrupti molestias similique quos repellat dolor et, adipisci quibusdam illo unde? Nobis nisi doloremque recusandae! Pariatur quasi iure voluptatum repellendus numquam ad tenetur cum nihil corrupti unde dignissimos reprehenderit vero, atque inventore non. Explicabo iure deleniti nam quas, sapiente quisquam quasi voluptate reprehenderit magni! Nisi, consectetur. Unde numquam dicta id aspernatur recusandae velit accusamus tenetur autem eos doloremque.</p>
			<p>Unde id temporibus error reiciendis quae quidem vero illo animi voluptatibus quisquam eum minus harum quam enim quis labore expedita, commodi doloremque. Mollitia rem recusandae architecto eos dolores eligendi autem accusamus laboriosam repellendus voluptatibus reiciendis assumenda debitis praesentium quibusdam amet pariatur doloremque veniam, soluta provident non voluptatem atque expedita ipsum! Tempore ea nobis assumenda aut quibusdam odit repellat delectus. In, blanditiis esse? Qui, quae dignissimos error aliquam quam eveniet ex amet asperiores consequuntur accusantium atque similique, ratione officia? Assumenda consectetur sed ab architecto perferendis molestiae enim esse, nulla dignissimos explicabo itaque reprehenderit omnis delectus iure nobis aspernatur, quibusdam impedit. Tempora?</p>
			<p>Fuga aperiam cupiditate quibusdam odio dicta, minus repellendus perspiciatis, nobis ipsam, voluptatem laudantium? Soluta veritatis porro dignissimos corrupti iusto, fuga doloremque eum voluptate quia quasi temporibus optio nulla tempora id perferendis quis sapiente nostrum, harum quas facere, animi iure enim necessitatibus architecto. Corporis harum voluptatibus porro maiores repellat at neque nemo molestias deleniti, libero assumenda, laboriosam doloremque expedita unde, tempora odit ad fuga accusantium dolore quidem natus officia esse dicta? Assumenda nobis non quia consequatur amet dicta iure quis dolorum est temporibus debitis molestiae veritatis, quam fugiat, vel perferendis accusamus laboriosam! Culpa repellendus quas minus ullam at voluptatum et! Quasi.</p>
			<p>Quidem incidunt illum doloribus sunt dignissimos perspiciatis aperiam, perferendis, quibusdam sequi quam illo dolor mollitia repellat earum quas id corporis labore ipsa consectetur recusandae veniam deleniti quia ipsam voluptatem? Voluptate harum amet repellat placeat pariatur commodi non quis. Sed numquam id quae deleniti obcaecati soluta doloremque reiciendis molestiae labore iste praesentium magni aliquam inventore iure impedit, in asperiores quas debitis quod dolore velit porro? Numquam voluptate tempore dolorum nihil quaerat, facere quidem iusto, deserunt, eaque non quod. Ipsum, mollitia? Nisi beatae laudantium corporis aperiam nostrum assumenda architecto voluptates omnis cumque! Doloribus, cum eos voluptatum esse voluptates similique iure quae ut.</p>
			<p>Enim, voluptas ducimus voluptatum eligendi sit et, ipsam repellat illo exercitationem, doloribus suscipit asperiores rerum. Vero omnis incidunt reprehenderit, exercitationem quasi, suscipit delectus laborum autem rem labore beatae officiis ratione dolor, nesciunt ipsum recusandae quod sequi aliquid nisi possimus ipsa consectetur natus deleniti. Nulla dolore sint error unde corrupti, amet distinctio quo non maxime? Aut illum illo, aperiam ratione dolorum nobis non. Cum, rem? Esse, quod. Odio nihil officiis dolor laudantium, doloremque quis consequatur eos voluptates laboriosam molestiae tempora ipsa reprehenderit autem, id aut esse totam dolorum recusandae quidem magnam aspernatur unde. Distinctio neque dolore quae eos, velit magnam amet!</p>
			<p>Labore dolore officiis hic voluptates voluptatum corporis quia itaque velit nihil vitae iusto magni maxime libero molestias aliquam nisi dicta sunt dignissimos iste omnis sequi, illum veritatis similique! Assumenda iure consectetur placeat. Alias doloribus similique quos ut, quidem dignissimos cum iste, animi maiores ea ad dolor modi ab quis nostrum consequatur, praesentium culpa veniam magni sequi impedit! Unde sequi nemo vel veritatis tenetur omnis. Molestiae voluptate distinctio fugiat fuga id quo consequuntur maiores perferendis enim rem mollitia obcaecati, sit eos ratione cupiditate similique est veniam. Distinctio debitis accusamus expedita neque. Ad aliquam deleniti explicabo illo labore omnis eos vel voluptas!</p>
			<p>Incidunt animi iste aspernatur cupiditate obcaecati eos beatae saepe optio harum modi excepturi eligendi nisi voluptatum quas deleniti id ex deserunt nulla dolorem praesentium voluptatem quidem architecto, repellat natus? Molestias fuga amet minima, nisi officia nihil, nostrum, aliquam maxime incidunt nobis libero maiores id odio velit adipisci sequi blanditiis quae eos quaerat? Veritatis, vel quisquam illum labore enim eligendi aliquid et molestiae accusantium doloremque quibusdam quidem, eaque explicabo. Mollitia expedita molestias reprehenderit ad! Quae obcaecati officiis recusandae incidunt pariatur dolorum et aliquam nulla, maxime esse, exercitationem laudantium libero deserunt molestias architecto quo. Mollitia error, magni modi eum at atque quod.</p>
			<p>Praesentium enim ab asperiores nulla voluptatum optio, quis, odit exercitationem vitae ratione eum odio! Ut, distinctio inventore. Dolore voluptates, ratione neque quas, reiciendis veniam nostrum eaque inventore reprehenderit beatae alias! Tempore quibusdam veritatis quis earum distinctio dignissimos aut optio, laborum illum totam libero beatae natus esse fugiat sint, delectus amet voluptates! Velit in ducimus ad maxime mollitia nihil perferendis sed commodi quia. Recusandae ut dolorem tempore aperiam vitae voluptates ipsum ducimus nemo? Deleniti assumenda quo quibusdam. Laborum molestiae aliquid laudantium, exercitationem facilis tempore tenetur illum ipsam nulla a, reiciendis corporis porro error minus, autem quos enim ipsum? Rerum, debitis laudantium.</p>
			<p>Dicta aspernatur nulla enim repellendus earum est perspiciatis consequatur quod, amet a incidunt odio esse similique corrupti ratione soluta quo illum corporis laudantium nisi quae non voluptas omnis exercitationem! Error laborum voluptatem, doloribus officia similique possimus illo aliquid odio omnis itaque cum eveniet natus repellendus praesentium voluptate deserunt. Harum reprehenderit accusantium laborum ipsam saepe eaque, magni libero odio dolor tenetur sequi impedit perferendis dolorem veritatis ab, commodi aspernatur alias repellat beatae blanditiis inventore porro ducimus doloribus tempora! Ex odio, ut quos accusantium accusamus non. Nulla vel quidem porro error debitis, neque numquam exercitationem odit, quasi consectetur molestias ut dolorem est.</p>
			<p>Vero, totam voluptas iure ipsam nesciunt cumque soluta excepturi reiciendis cupiditate repudiandae fugiat assumenda, esse illo, exercitationem sit dolore. Reprehenderit vero beatae officiis odio pariatur animi eveniet, ullam aliquid id non error voluptatibus dolore adipisci doloribus quaerat. Eos officiis quasi, quidem unde ipsum ipsam nihil veritatis illum soluta corrupti consectetur obcaecati laudantium corporis architecto dignissimos, vel doloribus distinctio optio, animi adipisci reprehenderit. Nam labore at ea quod nisi facere cupiditate nostrum soluta, amet ad repudiandae velit! Nesciunt nihil quis blanditiis? Vero dolores molestias suscipit dolorum illum perferendis perspiciatis voluptas aspernatur nostrum sunt! Fugit esse mollitia labore commodi. Amet, adipisci iste?</p>
			<p>Officiis odio sed facere! Omnis, nesciunt molestiae! Aspernatur, iure pariatur magni maxime quia earum quo odio vero temporibus aliquid similique rem distinctio suscipit, ea dignissimos labore fugiat facere fugit molestias nostrum perferendis porro nesciunt mollitia officia? Ut, fuga quis odit veniam molestias et pariatur autem at tempora saepe porro itaque dolorem fugit in provident natus eaque iste quibusdam quos minima non maiores aperiam. Dolorem culpa, temporibus sit vitae totam nobis nemo natus debitis vel fugiat, placeat quisquam quam aspernatur hic dolor. Dolor tempore qui sequi, ullam expedita ab illum numquam reiciendis! Nisi provident similique, numquam maiores sapiente accusamus perferendis. Dignissimos.</p>
			<p>Suscipit voluptatibus ut recusandae magni quo in quisquam doloremque omnis quis atque saepe excepturi voluptas culpa maiores aliquam reiciendis iure quas qui esse, asperiores, error repudiandae! Ut sed temporibus asperiores porro modi tempore, consequuntur ipsam voluptate necessitatibus maiores nostrum iusto laborum ipsum molestias itaque magni, qui, aut aliquam totam corrupti rerum soluta harum quasi. Aspernatur, optio maxime? Officia, repellendus impedit unde alias, tempore dolorum voluptates rerum quam architecto, delectus ut provident consequatur. Nobis dolores excepturi nam esse maiores. Dolores, sit magnam reiciendis in dicta dolorum quo sequi officia, est, numquam quod. Excepturi, deleniti totam veniam doloremque ipsa quas ut voluptatum?</p>
			<p>Vero recusandae libero, similique id quia nisi voluptatem, in perferendis dignissimos sequi minus aspernatur a non iste, aliquid ipsum eligendi autem nostrum quisquam vitae. Quidem quod odio soluta ratione quisquam quos esse! Sit nostrum ad repellat explicabo? Similique dolorum architecto, consequuntur, reprehenderit ipsum id iste repellat expedita repellendus minus enim eligendi dolorem praesentium! Aspernatur non veritatis debitis corrupti voluptatum animi iste necessitatibus id a ducimus, sapiente perferendis quisquam hic, consequuntur suscipit obcaecati alias labore dolore nihil, vero architecto distinctio? Consectetur enim itaque iure voluptates, aliquid, magnam atque reprehenderit nemo quo in quidem. Dolore ab ad tempore eligendi, deleniti officia nostrum.</p>
			<p>Doloribus soluta natus maxime cupiditate dolores id quaerat eos dolorum, at unde error veniam adipisci. Illo molestiae sapiente quas velit mollitia repudiandae, quam accusamus repellendus soluta eligendi explicabo at omnis nulla aliquid vel possimus accusantium maiores deserunt debitis laudantium voluptatibus. Recusandae consequuntur praesentium at id amet magni voluptatibus, asperiores ad perferendis reiciendis. Sint illum, ratione quisquam doloremque dolorum nobis quam minus officiis eligendi et cupiditate voluptas, modi unde minima, consequatur aspernatur! Inventore, molestias eos. Eum blanditiis, fuga commodi tempora, officiis assumenda facilis voluptatem debitis dolorum excepturi optio iure explicabo nemo eveniet harum consequuntur neque ut, nisi exercitationem. Quia, dolore accusantium?</p>
			<p>Eos aperiam aliquid exercitationem, voluptatibus eaque nemo atque. Nam est, delectus, iste repellendus consequuntur, nihil omnis libero nemo qui accusamus quae. Est animi suscipit molestiae a. Modi, voluptates quis debitis ipsa soluta aut, dolore animi qui perspiciatis alias delectus, error similique at autem! Quisquam culpa obcaecati natus, harum, quidem illum reiciendis aliquam a molestias sint doloremque vitae sequi debitis vel hic maxime accusantium nemo repudiandae fugit tempore fugiat quos veniam delectus nulla. Eveniet exercitationem incidunt, velit voluptate natus dignissimos nam, nostrum asperiores, dolores magni quam ducimus amet quae! Magnam nisi soluta eius quae, vitae fugit laborum a quas dignissimos? Dolorem!</p>
			<p>Amet vitae officiis ipsam eligendi repudiandae quos! Amet esse, a ut beatae nulla id repudiandae tempora quidem laborum rerum quaerat porro dignissimos possimus temporibus veniam provident quis corrupti distinctio repellendus ullam. Ea, veniam adipisci quas dignissimos consectetur cum nesciunt facilis, sint sed vero nulla et praesentium earum reiciendis aut exercitationem laudantium sequi quidem unde ducimus odit architecto. Corporis praesentium ratione ab optio repellendus illum sapiente iste libero magni, facere nihil labore, nisi vel laborum nesciunt, sequi soluta. Pariatur asperiores omnis quia nobis architecto molestiae, id, impedit blanditiis, doloribus tempora nulla in! Possimus perspiciatis dignissimos accusantium assumenda odio dolorum voluptatibus nobis!</p>
			<p>Cupiditate hic consequuntur totam aut quidem et maxime, qui necessitatibus cum sed id animi recusandae mollitia fuga accusamus excepturi est at debitis non deserunt alias sequi iure porro. Optio asperiores illum dolorem maiores, impedit praesentium eius aperiam necessitatibus vitae, fugiat incidunt mollitia. Esse neque quae nobis ea cum impedit, recusandae quidem delectus reprehenderit perferendis voluptatem vel? Fuga consequuntur ipsam quod suscipit sequi molestiae, adipisci omnis repudiandae eum, ea aspernatur deserunt consectetur. Necessitatibus fugiat odio vero laudantium ex quam illo impedit totam quaerat atque beatae ab autem iure velit sequi vel voluptas, doloremque minima quo? Dolore dolores ipsam at laboriosam fugit.</p>
		</div>
	</main>
</div>
</body>
</html>

This is a slight variation on the above code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Tilting Webpage</title>
	<!-- FOR THE SOCIAL MEDIA ICONS ONLY -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html, body {
		height: 100%;
		font-family: sans-serif;
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #445;
	}
	.doc {
		height: 100%;
		background-color: #445;
	}
	#main {
		min-height: 200vh;
		transform-origin: 100% 0; /* don't use 100vw here */
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1);
		background-color: #eee;
	}
	#main > div {
		padding: 50px 20%;
	}
	#doc-toggle {
		display: none;
	}
	.doc > label {
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		cursor: pointer;
		width: 75px;
		height: 75px;
		background-color: crimson;
		border-bottom-left-radius: 100%;
		overflow: hidden;
	}
	.doc > label b:nth-child(1),
	.doc > label b:nth-child(2) {
		position: absolute;
		top: 25%;
		left: 50%;
		font-size: 20px;
		color: white;
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1);
		transform-origin: 150px -150px;
	}
	.doc > label b:nth-child(2) {
		transform: rotate(-20deg);
	}
	.doc > ul {
		position: fixed;
		bottom: 0;
		right: -50px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.doc > ul li { /* covers all including HOME */
		height: 50px;
		margin-bottom: 25px;
		transform: translateX(300px);
		transition: transform .7s cubic-bezier(1, 0.004, 0.25, 1) 1ms;
	}
	.doc > ul li:nth-child(2) { /* SERVICES */
		margin-left: -45px;
	}
	.doc > ul li:nth-child(3) { /* PRODUCTS */
		margin-left: -90px;
	}
	.doc > ul li:nth-child(4) { /* PORTFOLIO */
		margin-left: -135px;
	}
	.doc > ul a {
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: gray;
		transition: color 0.2s;
	}
	.doc > ul a:hover {
		color: lightgray;
	}
	#doc-toggle:checked + .doc #main {
		transform: rotate(35deg);
	}
	#doc-toggle:checked + .doc > label b:nth-child(1) {
		transform: rotate(20deg);
	}
	#doc-toggle:checked + .doc > label b:nth-child(2) {
		transform: rotate(0);
	}
	#doc-toggle:checked + .doc > ul li { /* covers all including HOME */
		transform: translateX(-100px);
		transition: transform .4s cubic-bezier(0.175, 0.885, 0.325, 1.275) .4s;
	}
	#doc-toggle:checked + .doc > ul li:nth-child(2) { /* SERVICES */
		transition-delay: .5s;
	}
	#doc-toggle:checked + .doc > ul li:nth-child(3) { /* PRODUCTS */
		transition-delay: .6s;
	}
	#doc-toggle:checked + .doc > ul li:nth-child(4) { /* PORTFOLIO */
		transition-delay: .7s;
	}
	h1 {
		padding-bottom: 30px;
		border-bottom: 15px solid #aaa;
	}
	.social {
		text-align: right;
	}
	.social i{
		font-size: 20px;
		background-color: crimson;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: white;
		border-radius: 50px;
	}
	</style>
</head>
<body>
<input type="checkbox" id="doc-toggle" />
<div class="doc">
	<label for="doc-toggle">
		<b>&#9776;</b>
		<b>&times;</b>
	</label>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Portfolio</a></li>
	</ul>
	<div id="main"><!-- IE11 does not work well with the MAIN tag so DIV is used here -->
		<div>
			<h1>Tilting Webage</h1>
			<br /><br />
			<div class="social">
					<i class="fa fa-twitter"></i>
					<i class="fa fa-linkedin"></i>
					<i class="fa fa-youtube"></i>
					<i class="fa fa-facebook"></i>
			</div>
			<br /><br />
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id eveniet expedita quis, nemo et nesciunt amet rerum! Autem, voluptates eaque? Aliquam corrupti iure nisi quia quis deserunt tempore quidem perspiciatis quibusdam, id vel numquam aspernatur doloremque consectetur, autem velit asperiores eius sequi possimus esse odit temporibus. Nulla quae quasi amet accusantium eaque, quidem ratione odit consequatur deserunt, magni dignissimos dicta mollitia architecto tempore aliquam animi unde? Accusantium consequuntur culpa cum neque officia magnam. Nulla doloremque nobis quibusdam incidunt veritatis itaque molestias, vel voluptate tempora consequatur, quia numquam dicta esse ipsa, in dignissimos deleniti nemo corporis? Cum at placeat maxime excepturi.</p>
			<p>Libero labore ipsum quaerat doloribus quo tempora nisi nobis hic, tenetur natus maxime explicabo accusamus provident accusantium! Obcaecati, eum accusantium rem dolores, voluptatem dolor soluta facilis vero nihil animi doloribus? Vel sapiente nesciunt alias a aliquid culpa quas! Doloribus quos maxime reiciendis ipsam voluptate assumenda neque officia, architecto hic libero. Ab quisquam sequi, ratione autem alias exercitationem totam rerum earum est ut praesentium tenetur amet repudiandae nulla natus quis non hic obcaecati quaerat sapiente tempora dicta eligendi. Nemo itaque error autem, quos quidem nulla, excepturi ipsum mollitia neque, vero adipisci beatae sed necessitatibus. Possimus vel voluptas in a quaerat repudiandae!</p>
			<p>Recusandae pariatur placeat earum architecto! Veniam cum fugiat, adipisci dolore ratione beatae temporibus accusamus iste voluptate, nemo dicta sint at itaque reprehenderit ea perferendis necessitatibus magni quod atque magnam nulla velit, praesentium tenetur consequuntur. Corrupti nihil optio architecto doloremque dolorem perspiciatis illo rem nemo nobis mollitia. Voluptate optio unde quis corporis voluptatibus vero, cumque, veritatis expedita similique, velit iste ducimus ipsa eum tenetur fugit placeat nisi neque ab rem modi vel excepturi maiores praesentium natus? Suscipit voluptate, provident officiis voluptates porro animi repudiandae molestias nihil voluptas officia consequuntur vitae autem saepe ducimus expedita quam quod rerum reiciendis nemo quae ipsum?</p>
			<p>Expedita asperiores neque rerum vero sequi cum odio dolore eaque ipsam vitae amet nobis obcaecati fugiat reprehenderit maiores temporibus est, repellendus doloremque quos facere inventore corporis ipsa. Excepturi molestiae ea architecto explicabo consectetur aliquid quis modi perferendis cupiditate asperiores dolore debitis voluptate corrupti molestias similique quos repellat dolor et, adipisci quibusdam illo unde? Nobis nisi doloremque recusandae! Pariatur quasi iure voluptatum repellendus numquam ad tenetur cum nihil corrupti unde dignissimos reprehenderit vero, atque inventore non. Explicabo iure deleniti nam quas, sapiente quisquam quasi voluptate reprehenderit magni! Nisi, consectetur. Unde numquam dicta id aspernatur recusandae velit accusamus tenetur autem eos doloremque.</p>
			<p>Unde id temporibus error reiciendis quae quidem vero illo animi voluptatibus quisquam eum minus harum quam enim quis labore expedita, commodi doloremque. Mollitia rem recusandae architecto eos dolores eligendi autem accusamus laboriosam repellendus voluptatibus reiciendis assumenda debitis praesentium quibusdam amet pariatur doloremque veniam, soluta provident non voluptatem atque expedita ipsum! Tempore ea nobis assumenda aut quibusdam odit repellat delectus. In, blanditiis esse? Qui, quae dignissimos error aliquam quam eveniet ex amet asperiores consequuntur accusantium atque similique, ratione officia? Assumenda consectetur sed ab architecto perferendis molestiae enim esse, nulla dignissimos explicabo itaque reprehenderit omnis delectus iure nobis aspernatur, quibusdam impedit. Tempora?</p>
			<p>Fuga aperiam cupiditate quibusdam odio dicta, minus repellendus perspiciatis, nobis ipsam, voluptatem laudantium? Soluta veritatis porro dignissimos corrupti iusto, fuga doloremque eum voluptate quia quasi temporibus optio nulla tempora id perferendis quis sapiente nostrum, harum quas facere, animi iure enim necessitatibus architecto. Corporis harum voluptatibus porro maiores repellat at neque nemo molestias deleniti, libero assumenda, laboriosam doloremque expedita unde, tempora odit ad fuga accusantium dolore quidem natus officia esse dicta? Assumenda nobis non quia consequatur amet dicta iure quis dolorum est temporibus debitis molestiae veritatis, quam fugiat, vel perferendis accusamus laboriosam! Culpa repellendus quas minus ullam at voluptatum et! Quasi.</p>
			<p>Quidem incidunt illum doloribus sunt dignissimos perspiciatis aperiam, perferendis, quibusdam sequi quam illo dolor mollitia repellat earum quas id corporis labore ipsa consectetur recusandae veniam deleniti quia ipsam voluptatem? Voluptate harum amet repellat placeat pariatur commodi non quis. Sed numquam id quae deleniti obcaecati soluta doloremque reiciendis molestiae labore iste praesentium magni aliquam inventore iure impedit, in asperiores quas debitis quod dolore velit porro? Numquam voluptate tempore dolorum nihil quaerat, facere quidem iusto, deserunt, eaque non quod. Ipsum, mollitia? Nisi beatae laudantium corporis aperiam nostrum assumenda architecto voluptates omnis cumque! Doloribus, cum eos voluptatum esse voluptates similique iure quae ut.</p>
			<p>Enim, voluptas ducimus voluptatum eligendi sit et, ipsam repellat illo exercitationem, doloribus suscipit asperiores rerum. Vero omnis incidunt reprehenderit, exercitationem quasi, suscipit delectus laborum autem rem labore beatae officiis ratione dolor, nesciunt ipsum recusandae quod sequi aliquid nisi possimus ipsa consectetur natus deleniti. Nulla dolore sint error unde corrupti, amet distinctio quo non maxime? Aut illum illo, aperiam ratione dolorum nobis non. Cum, rem? Esse, quod. Odio nihil officiis dolor laudantium, doloremque quis consequatur eos voluptates laboriosam molestiae tempora ipsa reprehenderit autem, id aut esse totam dolorum recusandae quidem magnam aspernatur unde. Distinctio neque dolore quae eos, velit magnam amet!</p>
			<p>Labore dolore officiis hic voluptates voluptatum corporis quia itaque velit nihil vitae iusto magni maxime libero molestias aliquam nisi dicta sunt dignissimos iste omnis sequi, illum veritatis similique! Assumenda iure consectetur placeat. Alias doloribus similique quos ut, quidem dignissimos cum iste, animi maiores ea ad dolor modi ab quis nostrum consequatur, praesentium culpa veniam magni sequi impedit! Unde sequi nemo vel veritatis tenetur omnis. Molestiae voluptate distinctio fugiat fuga id quo consequuntur maiores perferendis enim rem mollitia obcaecati, sit eos ratione cupiditate similique est veniam. Distinctio debitis accusamus expedita neque. Ad aliquam deleniti explicabo illo labore omnis eos vel voluptas!</p>
			<p>Incidunt animi iste aspernatur cupiditate obcaecati eos beatae saepe optio harum modi excepturi eligendi nisi voluptatum quas deleniti id ex deserunt nulla dolorem praesentium voluptatem quidem architecto, repellat natus? Molestias fuga amet minima, nisi officia nihil, nostrum, aliquam maxime incidunt nobis libero maiores id odio velit adipisci sequi blanditiis quae eos quaerat? Veritatis, vel quisquam illum labore enim eligendi aliquid et molestiae accusantium doloremque quibusdam quidem, eaque explicabo. Mollitia expedita molestias reprehenderit ad! Quae obcaecati officiis recusandae incidunt pariatur dolorum et aliquam nulla, maxime esse, exercitationem laudantium libero deserunt molestias architecto quo. Mollitia error, magni modi eum at atque quod.</p>
			<p>Praesentium enim ab asperiores nulla voluptatum optio, quis, odit exercitationem vitae ratione eum odio! Ut, distinctio inventore. Dolore voluptates, ratione neque quas, reiciendis veniam nostrum eaque inventore reprehenderit beatae alias! Tempore quibusdam veritatis quis earum distinctio dignissimos aut optio, laborum illum totam libero beatae natus esse fugiat sint, delectus amet voluptates! Velit in ducimus ad maxime mollitia nihil perferendis sed commodi quia. Recusandae ut dolorem tempore aperiam vitae voluptates ipsum ducimus nemo? Deleniti assumenda quo quibusdam. Laborum molestiae aliquid laudantium, exercitationem facilis tempore tenetur illum ipsam nulla a, reiciendis corporis porro error minus, autem quos enim ipsum? Rerum, debitis laudantium.</p>
			<p>Dicta aspernatur nulla enim repellendus earum est perspiciatis consequatur quod, amet a incidunt odio esse similique corrupti ratione soluta quo illum corporis laudantium nisi quae non voluptas omnis exercitationem! Error laborum voluptatem, doloribus officia similique possimus illo aliquid odio omnis itaque cum eveniet natus repellendus praesentium voluptate deserunt. Harum reprehenderit accusantium laborum ipsam saepe eaque, magni libero odio dolor tenetur sequi impedit perferendis dolorem veritatis ab, commodi aspernatur alias repellat beatae blanditiis inventore porro ducimus doloribus tempora! Ex odio, ut quos accusantium accusamus non. Nulla vel quidem porro error debitis, neque numquam exercitationem odit, quasi consectetur molestias ut dolorem est.</p>
			<p>Vero, totam voluptas iure ipsam nesciunt cumque soluta excepturi reiciendis cupiditate repudiandae fugiat assumenda, esse illo, exercitationem sit dolore. Reprehenderit vero beatae officiis odio pariatur animi eveniet, ullam aliquid id non error voluptatibus dolore adipisci doloribus quaerat. Eos officiis quasi, quidem unde ipsum ipsam nihil veritatis illum soluta corrupti consectetur obcaecati laudantium corporis architecto dignissimos, vel doloribus distinctio optio, animi adipisci reprehenderit. Nam labore at ea quod nisi facere cupiditate nostrum soluta, amet ad repudiandae velit! Nesciunt nihil quis blanditiis? Vero dolores molestias suscipit dolorum illum perferendis perspiciatis voluptas aspernatur nostrum sunt! Fugit esse mollitia labore commodi. Amet, adipisci iste?</p>
			<p>Officiis odio sed facere! Omnis, nesciunt molestiae! Aspernatur, iure pariatur magni maxime quia earum quo odio vero temporibus aliquid similique rem distinctio suscipit, ea dignissimos labore fugiat facere fugit molestias nostrum perferendis porro nesciunt mollitia officia? Ut, fuga quis odit veniam molestias et pariatur autem at tempora saepe porro itaque dolorem fugit in provident natus eaque iste quibusdam quos minima non maiores aperiam. Dolorem culpa, temporibus sit vitae totam nobis nemo natus debitis vel fugiat, placeat quisquam quam aspernatur hic dolor. Dolor tempore qui sequi, ullam expedita ab illum numquam reiciendis! Nisi provident similique, numquam maiores sapiente accusamus perferendis. Dignissimos.</p>
			<p>Suscipit voluptatibus ut recusandae magni quo in quisquam doloremque omnis quis atque saepe excepturi voluptas culpa maiores aliquam reiciendis iure quas qui esse, asperiores, error repudiandae! Ut sed temporibus asperiores porro modi tempore, consequuntur ipsam voluptate necessitatibus maiores nostrum iusto laborum ipsum molestias itaque magni, qui, aut aliquam totam corrupti rerum soluta harum quasi. Aspernatur, optio maxime? Officia, repellendus impedit unde alias, tempore dolorum voluptates rerum quam architecto, delectus ut provident consequatur. Nobis dolores excepturi nam esse maiores. Dolores, sit magnam reiciendis in dicta dolorum quo sequi officia, est, numquam quod. Excepturi, deleniti totam veniam doloremque ipsa quas ut voluptatum?</p>
			<p>Vero recusandae libero, similique id quia nisi voluptatem, in perferendis dignissimos sequi minus aspernatur a non iste, aliquid ipsum eligendi autem nostrum quisquam vitae. Quidem quod odio soluta ratione quisquam quos esse! Sit nostrum ad repellat explicabo? Similique dolorum architecto, consequuntur, reprehenderit ipsum id iste repellat expedita repellendus minus enim eligendi dolorem praesentium! Aspernatur non veritatis debitis corrupti voluptatum animi iste necessitatibus id a ducimus, sapiente perferendis quisquam hic, consequuntur suscipit obcaecati alias labore dolore nihil, vero architecto distinctio? Consectetur enim itaque iure voluptates, aliquid, magnam atque reprehenderit nemo quo in quidem. Dolore ab ad tempore eligendi, deleniti officia nostrum.</p>
			<p>Doloribus soluta natus maxime cupiditate dolores id quaerat eos dolorum, at unde error veniam adipisci. Illo molestiae sapiente quas velit mollitia repudiandae, quam accusamus repellendus soluta eligendi explicabo at omnis nulla aliquid vel possimus accusantium maiores deserunt debitis laudantium voluptatibus. Recusandae consequuntur praesentium at id amet magni voluptatibus, asperiores ad perferendis reiciendis. Sint illum, ratione quisquam doloremque dolorum nobis quam minus officiis eligendi et cupiditate voluptas, modi unde minima, consequatur aspernatur! Inventore, molestias eos. Eum blanditiis, fuga commodi tempora, officiis assumenda facilis voluptatem debitis dolorum excepturi optio iure explicabo nemo eveniet harum consequuntur neque ut, nisi exercitationem. Quia, dolore accusantium?</p>
			<p>Eos aperiam aliquid exercitationem, voluptatibus eaque nemo atque. Nam est, delectus, iste repellendus consequuntur, nihil omnis libero nemo qui accusamus quae. Est animi suscipit molestiae a. Modi, voluptates quis debitis ipsa soluta aut, dolore animi qui perspiciatis alias delectus, error similique at autem! Quisquam culpa obcaecati natus, harum, quidem illum reiciendis aliquam a molestias sint doloremque vitae sequi debitis vel hic maxime accusantium nemo repudiandae fugit tempore fugiat quos veniam delectus nulla. Eveniet exercitationem incidunt, velit voluptate natus dignissimos nam, nostrum asperiores, dolores magni quam ducimus amet quae! Magnam nisi soluta eius quae, vitae fugit laborum a quas dignissimos? Dolorem!</p>
			<p>Amet vitae officiis ipsam eligendi repudiandae quos! Amet esse, a ut beatae nulla id repudiandae tempora quidem laborum rerum quaerat porro dignissimos possimus temporibus veniam provident quis corrupti distinctio repellendus ullam. Ea, veniam adipisci quas dignissimos consectetur cum nesciunt facilis, sint sed vero nulla et praesentium earum reiciendis aut exercitationem laudantium sequi quidem unde ducimus odit architecto. Corporis praesentium ratione ab optio repellendus illum sapiente iste libero magni, facere nihil labore, nisi vel laborum nesciunt, sequi soluta. Pariatur asperiores omnis quia nobis architecto molestiae, id, impedit blanditiis, doloribus tempora nulla in! Possimus perspiciatis dignissimos accusantium assumenda odio dolorum voluptatibus nobis!</p>
			<p>Cupiditate hic consequuntur totam aut quidem et maxime, qui necessitatibus cum sed id animi recusandae mollitia fuga accusamus excepturi est at debitis non deserunt alias sequi iure porro. Optio asperiores illum dolorem maiores, impedit praesentium eius aperiam necessitatibus vitae, fugiat incidunt mollitia. Esse neque quae nobis ea cum impedit, recusandae quidem delectus reprehenderit perferendis voluptatem vel? Fuga consequuntur ipsam quod suscipit sequi molestiae, adipisci omnis repudiandae eum, ea aspernatur deserunt consectetur. Necessitatibus fugiat odio vero laudantium ex quam illo impedit totam quaerat atque beatae ab autem iure velit sequi vel voluptas, doloremque minima quo? Dolore dolores ipsam at laboriosam fugit.</p>
		</div>
	</main>
</div>
</body>
</html>

Coding Video

https://youtu.be/IUc9DtaoAFo


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE