Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <div class="logo">
		<img src="http://witwinkel.ch/wp-content/uploads/2016/11/cropped-witwinkel_logo_pos.png">
	</div>

<div class="hamburger">
	<div class="hamburger--container">
		<div class="hamburger--bars">
			
		</div>
	</div>
</div>


<div class="fsmenu">
	<div class="fsmenu--container">
		<div class="fsmenu--text-block">
			<div class="fsmenu--text-container">
				<ul class="fsmenu--list">
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Agentur</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="http://witwinkel.ch/wp-content/uploads/2016/11/WITWINKEL-1_armon-e1481576198655.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Portfolio</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="http://witwinkel.ch/wp-content/uploads/2018/04/FAVBBOYJAM_V3_0042-806x1209.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Team</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Team</span><span>Team</span><span>Team</span><span>Team</span><span>Team</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="https://scontent-frt3-2.cdninstagram.com/vp/3564ab46c10b0c97f4f4361b9fd9df73/5BE6500F/t51.2885-15/s640x640/sh0.08/e35/23734085_410349006046399_1383466312444936192_n.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Kontakt</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="http://witwinkel.ch/wp-content/uploads/2018/02/KEV_2725-806x1008.jpg">
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<main>
	<img src="http://witwinkel.ch/wp-content/uploads/2018/04/09-03-27-Razzia-50-1612x1076.jpg">
	<h1>Sis is se weitwinkel</h1>
</main>
            
          
!
            
              *
	margin: 0
	padding: 0
	box-sizing: border-box
	
body, html 
	margin: 0
	padding: 0
	width: 100%
	height: 100%
	font-family: 'Source Sans Pro', sans-serif
	color: #454545
	letter-spacing: .5px
	position: relative

body
	padding: 8em 3em 3em
	main
		width: 100%
		height: auto
		img
			width: 100%
			display: block
		h1
			font-size: 3em
			font-weight: 900
			text-transform: uppercase
			color: #1e1e1e

.hamburger
	width: 2em
	height: 2em
	position: absolute
	top: 3em
	right: 3em
	z-index: 10000
	background: transparent
	cursor: pointer
	&.is-active
		.hamburger--container
			.hamburger--bars
				background: white
				&:before,
				&:after
					background: white
				&:before
					left: .25em
				&:after
					left: -.25em
		
	.hamburger--container
		width: 100%
		padding: .25em
		position: relative
		.hamburger--bars
			height: 3px
			width: 1.5em
			background: #000
			position: absolute
			top: 0.9em
			transition: .3s ease
			&:before,
			&:after
				content: ""
				display: block
				height: 3px
				width: 1.5em
				background: inherit
				position: absolute
				left: 0
				transition: .3s ease
			&:before
				top: -.5em
			&:after
				top: .5em
					
				
.logo
	width: 5em
	height: 5em
	position: absolute
	top: 1.5em
	left: 3em
	z-index: 10000
	img
		width: 100%
		display: block
		transition: .3s linear .3s
	&.is-active
		img
			filter: invert(100%)				
		

.fsmenu
	width: 100vw
	height: 100vh
	position: absolute
	top: 0
	right: 0
	z-index: 1000
	overflow: hidden
	display: none
	
	.fsmenu--container
		width: 0
		height: 100vh
		padding: 8em 3em 3em 
		background: #000
		position: absolute
		right: 0
		overflow: hidden
		.fsmenu--text-block
			width: 100%
			height: 100%
			.fsmenu--text-container
				width: 100%
				height: 100%
				.fsmenu--list
					width: 100%
					height: 100%
					display: flex
					flex-direction: column
					.fsmenu--list-element
						width: 100%
						height: 25%
						list-style-type: none
						text-align: right
						a
							width: 100%
							height: 100%
							text-decoration: none
							color: white
							display: flex
							justify-content: flex-end
							align-items: center
							transition: .2s ease
							&:hover
								color: #E63946
							span
								font-size: 5em
								font-weight: 700
								letter-spacing: 10px
								text-transform: uppercase
								line-height: 1
								
								height: 1em
								display: inline-block
								position: relative
								z-index: 1002
								&:before
									content: ""
									display: block
									width: 100%
									height: 100%
									background: #fff
									position: absolute
									left: 0
									z-index: 1003
						.fsmenu--scrolling-text
							height: 100%
							display: flex
							align-items: center
							transform: translate(-20%, -100%)
							opacity: 0
							pointer-events: none
							span
								height: 1em
								font-size: 8em
								font-weight: 900
								letter-spacing: 10px
								text-transform: uppercase
								line-height: 1
								color: #1e1e1e
				
								display: inline-block
								margin-right: 1em
						&:hover
							.fsmenu--scrolling-text
								opacity: 1
								animation: animScrollingContactTextLeft 9s linear 0s infinite
							
						.fsmenu--link-img
							width: 0px
							height: 100vh
							padding: 8em 3em 3em
							position: absolute
							top: 0
							right: calc(100vw - 720px)
							z-index: 1001
							font-size: 16px
							pointer-events: none
							.fsmenu--img-container
								height: 100%
								width: 100%
								position: relative
								overflow: hidden
								img
									width: 624px
									display: block
									position: absolute
									right: 0
									top: 50%
									transform: translate(0, -50%)
						&.open
							.fsmenu--link-img
								left: auto
								right: calc(100vw - 720px)
								animation: animMenuRevealImg .4s ease 0s forwards
								.fsmenu--img-container
									img 
										right: 0
										left: auto
						&.is-closing
							.fsmenu--link-img
								left: 0
								right: auto
								animation: animMenuCloseImg .4s ease 0s forwards
								.fsmenu--img-container
									img 
										left: 0
										right: auto
				
								
	
	&.is-active
		display: block
		.fsmenu--container
			animation: animMenuReveal .6s cubic-bezier(.13,.13,.02,1.07) 0s forwards
			.fsmenu--text-block
			.fsmenu--text-container
				.fsmenu--list
					.fsmenu--list-element
						a
							span
								&:before
									animation: animMenuRevealLinks .4s cubic-bezier(.13,.13,.02,1.07) .4s forwards
		
		
	&.close-menu
		display: block
		.fsmenu--container
			width: 100vw
			right: auto
			left: 0
			animation: animMenuClose .6s cubic-bezier(.13,.13,.02,1.07) .3s forwards
			.fsmenu--text-block
			.fsmenu--text-container
				.fsmenu--list
					.fsmenu--list-element
						a
							span
								&:before
									left: auto
									right: 0
									background: black
									animation: animMenuCloseLinks .4s cubic-bezier(.13,.13,.02,1.07) 0s forwards
		
		
@keyframes animMenuReveal
	0%
		width: 0vw
	100%
		width: 100vw	

@keyframes animMenuRevealLinks
	0%
		width: 100%
	100%
		width: 0%

@keyframes animMenuClose
	0%
		width: 100vw
		padding: 8em 3em 3em 
	100%
		width: 0vw
		padding: 8em 0 0 

@keyframes animMenuCloseLinks
	0%
		width: 0%
	100%
		width: 110%


@keyframes animMenuRevealImg
	0%
		width: 0
	100%
		width: 720px

@keyframes animMenuCloseImg
	0%
		width: 720px
	100%
		width: 0

@keyframes animScrollingContactTextLeft
	0%
		transform: translate(-20%, -100%)
	100%
		transform: translate(-40%, -100%)										
		
		
			
		

            
          
!
            
              $(document).ready(function(){

	
	$('.hamburger').click(function(){
		
		var $this = $( this );
		
		if ($this.hasClass('is-active')){
			$('.fsmenu, .logo').removeClass('is-active');
			$('.fsmenu, .logo').addClass('close-menu');
		} else{
			$('.fsmenu, .logo').removeClass('close-menu');
			$('.fsmenu, .logo').addClass('is-active');
		};
		$this.toggleClass('is-active');
	});
	
	$( ".fsmenu--list-element" ).hover(
		function() {
			$( this ).addClass('open');
			$( this ).removeClass('is-closing');
		}, function() {
			$( this ).removeClass('open');
			$( this ).addClass('is-closing');
		}
	);
				
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console