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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                
<main>

 <link href="https://fonts.googleapis.com/css?family=Staatliches|Open+Sans:400,300|Open+Sans+Condensed:700" rel="stylesheet">


<div class="overlayContainer">
                <div class="overlay">
                    <p class="backText">JAVA</p>
                    <div class="intro">
                            <button class="myBtn" onclick="fadeOut()">EXPLORE</button>
                    </div>
                </div>
            </div>

            <div class="content">

    <div class="slides">
        <div class="slider-1 slide"><div class="java">Ja<br>va</div><br><div class="codingCafe">Coding Cafe</div></div>

        <div class="slider-2 slide"><div class="java">Ja<br>va</div><br><div class="codingCafe">Coding Cafe</div></div>
        
        <div class="slider-3 slide"><div class="java">Ja<br>va</div><br><div class="codingCafe">Coding Cafe</div></div>
        
        <div class="slider-4 slide"><div class="java">Ja<br>va</div><br><div class="codingCafe">Coding Cafe</div></div>

        <div class="slider-5 slide"><div class="java">Ja<br>va</div><br><div class="codingCafe">Coding Cafe</div></div>
        
        <span class='right arrow'><img src="imgs/rightarrow.png" alt=""></span>
        <span class='left arrow'><img src="imgs/leftarrow.png" alt=""></span>
    </div>
    
    <div class="navbar">
        <ul>
            <li class="logo"><a href="#">JAVA.</a></li>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    
    <div class="about">
        <div class="headingWrapper">
                <span class="a">A</span>
                <span class="b">B</span>
                <span class="o">O</span>
                <span class="u">U</span>
                <span class="t">T</span>
        </div>
    </div>
        <div class="aboutContent">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat blanditiis nisi numquam modi itaque sunt est voluptatum assumenda delectus tempora nostrum officia dolorum quasi deserunt soluta, quos quod ea qui quibusdam. Quisquam unde possimus, tempora quae assumenda molestias cum rem, repellendus deleniti ut eos repudiandae quos fugiat porro. Reiciendis porro fuga culpa quis maxime expedita quae saepe magni nemo modi ex vero accusamus corrupti laborum, labore earum, id fugiat beatae cupiditate natus quod sequi. Et esse quae necessitatibus dicta magnam quia, quidem vel, laboriosam numquam modi ex odio dolorum odit amet cum delectus commodi nesciunt quaerat obcaecati magni? Nam inventore possimus obcaecati praesentium rerum commodi laudantium quam voluptates libero voluptate qui nulla tempora, officiis a ipsum facere quod recusandae vero. Quasi soluta molestias nisi culpa, porro nulla enim aperiam minima iste nam consequatur fugiat eum voluptates eaque. Enim, beatae? Omnis sit provident voluptas, dicta consequuntur similique eveniet ratione deserunt eum. Eius beatae quos distinctio assumenda dolore voluptas autem accusantium quod officia alias magni ut accusamus inventore molestiae ducimus blanditiis ex maiores quia, ad ea aut voluptatibus tenetur. Vero doloremque fugiat eum suscipit recusandae delectus officia, debitis eligendi rerum. Totam sit adipisci numquam quibusdam doloremque voluptates non aspernatur. Laudantium, facere impedit.
        </div>

    <div class="menuChoice" id="menu"> 
        <h1>What Kind of Drink<br> Would You Like?</h1>
        <div class="hot choice"><a href="javascript:void(0)">Hot</a></div>
        <span>or</span>
        <div class="cold choice"><a href="javascript:void(0)">Cold</a></div>
    </div>

    <div class="coldMenu"></div>

    <div class="hotMenu"></div>

    <div class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe modi architecto totam ea, fugiat sequi odio ex, ducimus autem repudiandae fuga doloremque eius optio reiciendis voluptatibus ipsam quam asperiores vero delectus suscipit dolores cumque aut? Earum inventore est, fuga, voluptatum quis quod possimus facere molestiae qui maxime repellat et, natus alias exercitationem atque iste ab! Odit, a! Delectus deleniti, eaque rem animi architecto cumque necessitatibus qui iure quas vero quia saepe aliquam tenetur voluptatibus dolor in similique quisquam minus molestias. Mollitia laboriosam exercitationem libero voluptatum iusto? Inventore distinctio cupiditate, necessitatibus officia provident aperiam ullam natus tempore itaque ratione repellat deleniti dignissimos aliquam aliquid! Et corrupti perspiciatis rerum optio provident voluptas cumque odit vitae delectus molestias veniam esse, facilis deserunt praesentium possimus magnam reiciendis, maiores commodi qui inventore laboriosam nemo libero expedita sed. Sint perferendis iusto quae pariatur sequi dignissimos ipsa non odit provident. Veniam vel nihil quaerat ipsa quibusdam quidem vero eos dolorem natus rerum, sed aut architecto, at obcaecati possimus deleniti neque dolor! Eius recusandae itaque officia, provident vitae, ut optio amet voluptatibus soluta facere saepe esse alias ex deserunt expedita in, asperiores veniam eos culpa omnis placeat! Molestiae assumenda cumque alias, sunt sapiente repellat cupiditate eius delectus, perspiciatis, nostrum aut a explicabo? Fugit rerum ipsam at consectetur officiis earum sapiente pariatur numquam ea optio dolorem ratione vitae dolor perspiciatis voluptates illo, provident maxime dicta sed quia molestiae nisi voluptatum perferendis! Ab, incidunt culpa? Sequi similique consequatur officia, quo necessitatibus doloribus placeat aliquam reiciendis omnis voluptates quia minima culpa libero, magnam unde mollitia facilis. Iste illum porro quibusdam voluptatibus nemo iure, natus optio vitae eligendi! Pariatur repellat quam nulla quia! Minus adipisci laudantium maxime molestiae, eaque magnam unde deserunt optio quaerat est illo cupiditate perferendis dolor expedita ipsum nesciunt commodi odio! Cum corporis hic, nam error dolor quisquam natus?</div>
</div>

</main>

<div id="info"></div>
              
            
!

CSS

              
                main {
  z-index: 1;
  position: relative;
}

#info {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  padding: 12px;
  pointer-events: none;
  background-color: rgba(255,255,255,0.9);
  font-family: monospace;
  font-size: 16px;
}



*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

    html{
        scroll-behavior: smooth;
        height:100%;
        width:100%;
    }
    body, .slide{
        height:100vh;
        width:100%;
        padding:0;
    }
    body{
        position: relative;
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        /* overflow:hidden; */
    }

.content{
    display:none;
}

    .overlay{
        position: fixed;
        height:100vh;
        background-color:black;
        width:100%;
        z-index:199999;
        background: rgba(0,0,0,0.4) url("imgs/landingpage.jpeg") no-repeat center;
        background-blend-mode: color;
        background-size: cover;
        font-family: "Staatliches";    
    }

    .backText{
        color:rgba(225,225,225,0.5);
        position: absolute;
        top: 50%;
        left: 50%;
        font-size:30em;
        margin:0;
        padding:0;
        transform: translate(-50%, -50%);
    }
    .myBtn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
   }
   
    
   button {
        display: block;
        padding: 24px 48px;
        font-family: Poppins;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 6px;
        color: #fff;
        border: 2px solid #fff;
        text-transform: uppercase;
        outline: none;
        overflow: hidden;
        background: none;
        z-index: 1;
        cursor: crosshair;
        transition: 0.8s ease-out;
   }
    
    /* SlideShow */
    .slides{
        margin-left:auto;
        margin-right:auto;
        margin-bottom:2em;
        padding:0;
        overflow-x:hidden;
        width:95%;
        box-shadow: -1px 1px 13px 0px black;
    }
    .slide{
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-blend-mode: color;
        background-color:rgba(0,0,0,0.4);
        position:absolute;
        transition: ease;
        transition-duration: .7s;
        height:100%;
        font-family: "Staatliches";
        letter-spacing:0.2em;
    }
    .slide h1{
        color:white;
        padding:3px;
    }

    .slider-1{
        background-image: url('imgs/coffee1.jpeg');

    }
    .slider-2{
        background-image: url('imgs/coffee2.jpeg');

    }
    .slider-3{
        background-image: url('imgs/coffee3.jpeg');
    }
    .slider-4{
        background-image: url('imgs/coffee4.jpeg');
    }
    .slider-5{
        background-image: url('imgs/coffee5.jpeg');
    }
    
    .slides{
        position: relative;
        height:50vh;
    }

    .right{
        transform: translateX(100%);
        position: absolute;
        top:46.9%;
        right:0;
        padding-right:.8em;
        transition: ease-in-out;
        transition-duration: .3s;
        cursor:pointer;
    }


    .left{
        transform: translateX(-100%);
        position: absolute;
        top:46.9%;
        left:0;
        padding-left:.8em;
        transition: ease-in-out;
        transition-duration: .3s;
        cursor:pointer;
    }
    .showArrow{
        transform: translateX(0);
    }
    .showImg{
        opacity:1;

    }
    .hideImg{
        opacity:0;
    }
    .java{
        display:inline-block;
        font-size:5em;
        border: 4px solid white;
        padding: 0 .3em;
        line-height: 1em;
        color:white;
        transform: translateX(.5em);
        margin-top:.3em;
    }

    .codingCafe{
        color:white;
        font-weight: lighter;
        transform: translateX(100px);
    }
/* NAVIGATION */

    .navbar {
    background: black;
    top: 0;
    width: 100%;
    height:3rem;
    transition:all 1s ease;
    position: relative;
    z-index: 1;
    margin: 0 0 2em;
    z-index:100;
    position:relative;
    }

    .fixed-nav .navbar {
    position: fixed;
    box-shadow: 0 5px 0 rgba(0,0,0,0.1);
    }

    .navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    }

    .navbar li {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .navbar a:hover{
        letter-spacing: 1px;
    }
    .navbar a{
        text-decoration: none;
        color:white;
        font-family: "Staatliches";
        font-weight:lighter;
        transition: .3s ease;
    }

    li.logo {
    max-width:0;
    overflow: hidden;
    background: white;
    transition: all 0.5s;
    font-weight: 600; 
    font-size: 30px;
    z-index:100;
    height:3rem;
    }
    .logo a{
        color:black;
    }

    .fixed-nav li.logo {
    max-width: 500px;
    }
/* MENU */

    .menuChoice{
        display:flex;
        justify-content: space-evenly;
        border-left:2px solid black;
        font-family:"Staatliches";
        margin:2.5em auto;
        width:50%;
        align-items: center;
        padding:2em;
    }
    .menuChoice span{
        padding:0 1em;
    }
    .choice{
        display:flex;
        place-items: center;
        background-color: #161616;;
        padding: 1em 2em;
        border-radius: 8px;
        cursor: pointer;
        transition: .3s ease;
    }
    .choice:hover{
        background-color: white;
        box-shadow: inset 0px 1px 5px 0px black;
    }


    .choice a{
        text-decoration: none;
        color:white;
        letter-spacing: 1.5px;
    }
    .choice:hover a{
        color:black;
    }


    .menuImgContainer{
        position:relative;
        display: flex;
        align-items: center;
        color: white;
        justify-content: center;
    }

    .menuImg{
        max-height:200px;
        border-radius:50%;
        transition: all .3s ease;
    }
    .menuImgContainer:hover .menuImg{
        border-radius:30%;
        transform: scale(1.1);
        cursor: pointer;
    }

    .menuImgContainer span{
        position: absolute;
        font-family:'Open Sans';
        border:1px solid white;
        font-weight:400;
        padding: .1em .2em;
    }

/* COLD MENU */
    .coldMenu{
        display:none;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding:2em;
    }
/* HOT MENU */
    .hotMenu{
        display:none;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding:2em;
    }

/* ABOUT SECTION */
    .headingWrapper{
    font-size:10rem;
    padding:0 0 0 .2em;
    margin:0 0 0 .2em;
    font-family:'Open Sans Condensed';
    font-weight:700;
    color:white;
    position:relative;
    background-color:black;
    height:200px;
    width:40%;
    float:left;
    }
    .headingWrapper span{
    display:inline-block;
    position:absolute;
    }

    .b{
    z-index:1;     transform:translateX(.4em);
    text-shadow: -3px 0px 20px black, 2px 1px 18px black;
    }

    .o{
    transform:translateX(.75em)
    }
    .u{
    transform:translateX(1.17em);
    z-index:1;
    text-shadow: -3px -2px 18px black;

    }
    .t{
    transform:translateX(1.64em);
    z-index:1;
    text-shadow: -2px -2px 20px black;
    }

    .aboutContent{
        column-count: 3;
        padding: 0 3em 0 2em;
    }

    .lorem{
        margin:5em;
    }

/* SCROLLBAR     */
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
        width: 11px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-color:black
    }
/* MEDIA QUERIES    */

    @media(max-width:800px){
        .menuChoice{
            flex-direction: column;
        }
        .menuChoice h1{
            padding-bottom:.8em;
        }
    }

    @media(max-width:1340px){
        .aboutContent{
            clear:both;
            padding-top: 2em;
        }
    }

    @media(max-width:790px){
        .aboutContent{
            clear:both;
            column-count:2;
            padding-top: 2em;
        }

        .headingWrapper{
            /* padding-right:3em; */
            width:90vw;
            margin:0;
        }
    }

    @media(max-width:650px){
        .aboutContent{
            column-count: 1;
        
        }
    }

   

              
            
!

JS

              
                console.clear();

const info = document.querySelector("#info");
const items = Array.from(document.querySelectorAll(".navbar ul li"));
const styles = items.map(item => window.getComputedStyle(item));

TweenLite.ticker.addEventListener("tick", () => { 
  
  info.innerHTML = `
    ${styles.reduce((res, style, i) => {
      return res += `#${i+1} opacity: ${style.getPropertyValue("opacity")}<br>`
    }, "List item<br>")}  
  `;
});


let imgs=document.querySelectorAll('.slide'),
     current=0, 
     rightArrow=document.querySelector('.right'),
     leftArrow=document.querySelector('.left'),
     slide=document.querySelectorAll('.slide'),
     imgContainer= document.querySelector('.slides'),
     navbar= document.querySelector('.navbar'),
     body= document.querySelector('body');

//Image Slider Functionality

    function reset(){
        imgs.forEach(img=>{
            img.classList.add('hideImg');
        })
    }

    function startSlide(){
        reset();
        imgs[0].classList.remove('hideImg');
        imgs[0].classList.add('showImg');
    }

    function next(){
        reset();
        imgs[current + 1 ].classList.remove('hideImg');
        imgs[current + 1 ].classList.add('showImg');
        current ++;
    }

    function last(){
        reset();
        imgs[current-1].classList.remove('hideImg');
        imgs[current-1].classList.add('showImg');
        current--;
    }

    function leftOrRight(e){
        if(e.offsetX>imgContainer.getBoundingClientRect().width/2&&e.offsetY<imgContainer.getBoundingClientRect().height||e.keyCode==39){
            if(current===imgs.length -1){
            current=-1;
            }
            next();
        }
        if(e.offsetX<window.innerWidth/2&&e.offsetY<imgContainer.getBoundingClientRect().height||e.keyCode==37){
            if(current===0){
            current=imgs.length;
        }
            last();
        }
    }

    function removeClass(element,classToRemove){
        (element).classList.remove(classToRemove);
    }
    function addClass(element,classToAdd){
        (element).classList.remove(classToAdd);
    }

    imgContainer.addEventListener('keyup',leftOrRight)
    imgContainer.addEventListener('click',leftOrRight);

        startSlide();

    let looper=setInterval(() => {
            if(current===imgs.length -1){
            current=-1;
            }
            next();
        }, 4500);

        imgContainer.addEventListener('mouseenter', e=>{
            clearInterval(looper);
            slide.forEach(slide=>{
                slide.style.backgroundColor="transparent";
            });
        });

    slide.forEach(slide=>{
        slide.addEventListener('mousemove', (e)=>{
        let x=e.offsetX;
        let y=e.offsetY;

        if(x>imgContainer.getBoundingClientRect().width/2){
            rightArrow.classList.add('showArrow');
        }else{
            rightArrow.classList.remove('showArrow');
        }
        if(x<imgContainer.getBoundingClientRect().width/2){
            rightArrow.classList.remove('showArrow');
            leftArrow.classList.add('showArrow');
        }else{
            leftArrow.classList.remove('showArrow');
        }
    });
    });

    imgContainer.addEventListener('mouseleave', function(e){
        looper= setInterval(() => {
            if(current===imgs.length -1){
            current=-1;
            }
            next();
        }, 4500);

        imgs.forEach(img=>{
            removeClass(rightArrow, 'showArrow');
            removeClass(leftArrow, 'showArrow');
        });
        slide.forEach(slide=>{
                slide.style.backgroundColor="rgba(0,0,0,0.4)";
            });
    });
//Navbar Functionality

function debounce(func, wait=15, immediate=true) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

let navTop= navbar.offsetTop;

    function stickNav(){

        if (window.scrollY >= navTop){
            body.style.paddingTop = navbar.offsetHeight + 'px';
            body.classList.add('fixed-nav');
        }else{
            body.style.paddingTop=0;
            body.classList.remove('fixed-nav');
        }
    }

    window.addEventListener('scroll', debounce(stickNav));
        
    let coldMenu=document.querySelector('.coldMenu');
    let hotMenu=document.querySelector('.hotMenu');

    
let drinks=[];

let coldButton=document.querySelector('.cold');

let menuChoice=document.querySelector('.menuChoice');
let hotButton=document.querySelector('.hot');

let coldFetched=false;
coldButton.addEventListener('click', ()=>{
    coldMenu.style.display="flex";
    if(hotMenu.style.display='flex'){
        hotMenu.style.display="none";
    }

    if(!coldFetched){
    fetch('./menu.JSON', {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
        .then(response=>response.json())
        .then(data => {
        drinks = [...data.coldDrinks];


        for (var i = 0; i < drinks.length; i++) {
            coldMenu.innerHTML += `<div class="menuImgContainer"><img src="${drinks[i].img}" alt="${drinks[i].drink}" class="menuImg"><span>${drinks[i].drink}</span></div>`
        }
        coldMenu.scrollIntoView(); 

    })
}
coldFetched=true;
})



let hotFetched=false;
hotButton.addEventListener('click', ()=>{
    hotMenu.style.display="flex";
    if(coldMenu.style.display='flex'){
        coldMenu.style.display="none";
    }
    
    if(!hotFetched){
    fetch('./menu.JSON', {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
        .then(response=>response.json())
        .then(data => {
        drinks = [...data.hotDrinks];

        for (var i = 0; i < drinks.length; i++) {
            hotMenu.innerHTML += `<div class="menuImgContainer"><img src="${drinks[i].img}" alt="${drinks[i].drink}" class="menuImg"><span>${drinks[i].drink}</span></div>`
        }


        hotMenu.scrollIntoView(); 

    })
}
hotFetched=true;
})


let myBtn=document.querySelector('.myBtn'),
    content=document.querySelector('.content'),
    overlayContainer=document.querySelector('.overlayContainer'),
    overlay= document.querySelector('.overlay')

    
myBtn.addEventListener('click', fadeOut);

body.style.overflow="hidden";


  function fadeOut() {
    TweenMax.to(".myBtn", .5, {
         y: -100,
         opacity: 0
    });

    TweenMax.to(".backText", 1, {
         y: -400,
         opacity: 0,
         ease: Power4.easeInOut,
         delay: 1,

    });

    TweenMax.from(".overlay", 1.2, {
         ease: Power2.easeInOut,
         onComplete: overflow

    });

    TweenMax.to(".overlay", 2, {
         delay: 1.6,
         top: "-110%",
         ease: Expo.easeInOut,
         visibility: "hidden",
        
    });
    /////////////////////////////////////////////////////////////////////////////////////////////////////////HERE//////////////////////////////////////////////////////////////////////////////////////////
TweenMax.staggerFrom(".navbar ul li", 1, {
delay: 2, opacity:0, y:8, ease: Expo.easeInOut
}, 0.2)
    

    function overflow(){
        content.style.display="initial";
        body.style.overflow="auto";
        }
    }


    let movementStrength=10;
    let height= movementStrength/window.innerHeight;
    let width= movementStrength/window.innerWidth;

    overlay.addEventListener('mousemove', e=>{
        let pageX=e.pageX;
        let pageY=e.pageY;
        let newValueX=width*pageX;
        let newValueY=height*pageY;
        overlay.style.backgroundPosition=`${newValueX}px ${newValueY}px`
    });




              
            
!
999px

Console