Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!-- 

This is a quick attempt at making a page overview that can be used as a menu
enjoy :D 

-->



<div class="menu-bar">
		<a href="#" class="menu-button">MENU</a>
	</div>
<!-- 	<div class="menu">
		<a class="menu__item" show-page="0">item0</a>
		<a class="menu__item" show-page="1">item1</a>
		<a class="menu__item" show-page="2">item2</a>
		<a class="menu__item" show-page="3">item3</a>
		<a class="menu__item" show-page="4">item4</a>
		<a class="menu__item" show-page="5">item5</a>
		<a class="menu__item" show-page="6">item6</a>
		<a class="menu__item" show-page="7">item7</a>
		<a class="menu__item" show-page="8">item8</a>
	</div> -->
	<div class="content">
		<div class="the-grid">
			<div class="the-grid__container">
				<div class="page" page-id="0">
					<div class="page__content">
						<div class="container">
							
							<h1>Title</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia temporibus quo dicta qui odit deserunt eius magnam impedit, sunt, tenetur quaerat, minima sapiente consequuntur quasi accusamus laborum explicabo ipsam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, dicta.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi soluta temporibus nisi quia, expedita fugit veniam, aut, nihil sunt, nostrum nobis quisquam! Maxime repellendus vel labore velit nihil, laboriosam ducimus, et consectetur assumenda molestias, quisquam ab officiis numquam architecto minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores, dolor, mollitia a eius expedita qui corrupti, earum provident modi temporibus, accusantium optio quidem et. Perspiciatis eaque, natus nesciunt minus, pariatur quis sed sapiente necessitatibus asperiores dolore voluptates nobis, distinctio officia commodi, quod odio labore dicta perferendis alias omnis odit.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, nihil rerum rem a sint tenetur praesentium! Natus molestiae iste possimus minima ipsum, eaque ipsa obcaecati animi sed laboriosam atque dolorem commodi sequi corporis architecto distinctio soluta, eius et ducimus, omnis. Quas dicta officia eveniet consequatur rerum aperiam aut, explicabo tempore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci saepe aliquam fugit cupiditate! Quas alias nam, iure dignissimos iusto.</p>	
							<img src="http://placekitten.com/800/600" alt="">	
							<img src="http://placekitten.com/800/600" alt="">		
						</div>		
					</div>
				</div>
				<div class="page" page-id="1">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="2">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="3">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="4">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="5">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="6">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="7">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>
				<div class="page" page-id="8">
					<div class="page__content">
							<div class="bg-image"></div>
					</div>
				</div>			
			</div>
		</div>
	</div>
              
            
!

CSS

              
                
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');


/* GENERAL */
body {
	padding:0;
	margin:0;
	width:100vw;
	height:100vh;
	font-family:"Quicksand", sans-serif;
	font-size:150%;
}

* {
	box-sizing: border-box;
}


/* MENU */
.menu-bar {
	position: fixed;
	top:0;
	left: 0;
	z-index: 10;
	background-color:#151618;
	color:white;
  display:flex;
  
}

.menu-button {
  padding:1rem;
	color:white;
	text-decoration: none;
  box-shadow: 0 0 2rem rgba(0,0,0,0.5)
}

.menu {
	position: absolute;
	background-color:#2B2B2B;
	color:white;
	padding:1rem;
	top:4rem;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: .2s;
}

.menu.active {
	pointer-events: all;
	opacity: 1;
}

.menu__item {
	padding:1rem;
}


/* BASE ELEMENTS */
.content {
	width:100vw;
	height: 100vh;
	overflow: hidden;
}

.the-grid {	
	width:100%;
	height:100%;
	position: relative;
	background-color:#1e2026;
}

.the-grid__container {
	width:100%;
	height:100%;
	left:0;
	top:0;
	position: absolute;
	display:flex;
	flex-wrap:wrap;
	transition: 1s;
}

.the-grid__container > * {
	width:33.333%;
  height: 33.33%;
}


/* PAGE */
.page {	
	display:flex;
	align-items: center;
	justify-content: center;
	overflow:hidden;
	transform: scale(.8);
  transition: 1s ease;
	background-color:whitesmoke;
	cursor: pointer;
}

.page:hover {
	transform: scale(.85);
	transition-duration: .5s;
}

.page.active {
	transform: scale(1);
}

.page__content {
	background-color:whitesmoke;
	overflow:hidden;
	width:100vw;
	height:100vh;
	position: absolute;
	overflow-y:auto;
	transition: 1s;
}

.page.active .page__content {
	transform: scale(1);
}



/* PAGE STYLING ELEMENTS */

.container {
	max-width:1400px;
	width:100%;
	margin:auto;
	padding:1rem;
}

img {
	width:100%;
}

.bg-image {
	width:100%;
	height:100%;
	background-image:url("https://picsum.photos/1920/1080");
	background-size:cover;
	background-position: center;
}

.page:nth-child(2) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x908/?nature,water");
}
.page:nth-child(3) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x907/?nature,tree");
}
.page:nth-child(4) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x906/?mountain,water");
}
.page:nth-child(5) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x905/?nature,tree,water");
}
.page:nth-child(6) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x904/?nature,tree,water");
}
.page:nth-child(7) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x903/?nature,tree,lake");
}
.page:nth-child(8) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x902/?nature,trees,water");
}
.page:nth-child(9) .bg-image {	
	background-image:url("https://source.unsplash.com/1600x901/?tree,water");
}
              
            
!

JS

              
                let menuButton = document.querySelector(".menu-button");
let menu = document.querySelector(".menu");
let grid = document.querySelector(".the-grid");
let gridContainer = document.querySelector(".the-grid__container");
let pages = document.querySelectorAll(".page");
menuButton.addEventListener("click", e => {toggleMenu(e)});

function toggleMenu() {
	animateToBase();
}

let pageToggles = document.querySelectorAll("[page-id]");
pageToggles.forEach(item => {
	let value = item.getAttribute("page-id");
	item.addEventListener("click", e => {showPage(value)});
})

function showPage(id) {

	animateToPage(id);
}

function animateToBase() {	
	pages.forEach(item => {
		item.classList.remove("active");
	});
	gridContainer.style.width = "100%";
	gridContainer.style.height = "100%";
	gridContainer.style.left = "0%";
	gridContainer.style.top = "0%";
}

function animateToPage(id) {	
	let page = pages[id];
	let x = id % 3;
	let y = Math.floor(id / 3);
	page.classList.add("active");
	gridContainer.style.width = "300%";
	gridContainer.style.height = "300%";
	gridContainer.style.left = -(x * 100) + "%";
	gridContainer.style.top = -(y * 100) + "%";
}
              
            
!
999px

Console