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.

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

              
                <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <header class="site_header">
        <div class="header_top_bar">
            <div class="content">

                <p class="title">
                    <span class="logged_out_content">
                        <a>
                            <span>
                                Become a WWF member
                            </span>
                            <i class="fa fa-user"></i>
                        </a>
                    </span>
                    <span class="logged_in_content">
                        Hi User, <a>not User?</a>
                        <a>Manage preferences</a>
                    </span>
                </p>

                <div class="social">
                    <span>Follow</span>
                    <a href="https://twitter.com/wwf_uk" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
                    <a href="https://www.facebook.com/WWFUnitedKingdom" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a>
                    <a href="https://www.youtube.com/wwfunitedkingdom" target="_blank" class="youtube"><i class="fa fa-youtube-play"></i></a>
                    <a href="https://instagram.com/wwf_uk/" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
                    <a href="https://www.pinterest.com/wwfuk/" target="_blank" class="pinterest"><i class="fa fa-pinterest"></i></a>
                </div>

                <a class="newsletter js_toggle_newsletter">
                    <span>Newsletter</span>
                    <i class="fa fa-envelope-o"></i>
                </a>

                <a class="search js_toggle_search">
                    <span>search</span>
                    <i class="fa fa-search"></i>
                </a>
            </div>
        </div>




        <div class="header_main">
            <div class="content">

                <a href="/" class="logo_panda_planet">
                    <img class="panda_logo" src="https://wwf-webux-dev.azurewebsites.net/dist/img/logos/wwf_logo_panda.svg" alt="WWF logo - do it for your planet">
                    <img class="text_logo" src="https://wwf-webux-dev.azurewebsites.net/dist/img/logos/wwf_planet.svg" alt="WWF logo - do it for your planet">
                </a>


                <div class="header_search">
                    <div class="input_group input_group--label_inside_right input_group--label_inside_right input_group--label_inside_large_white_bg">
                        <button type="submit">
                            <span class="hidden_text">Search</span>
                            <i class="fa fa-search"></i>
                        </button>
                        <span><input type="search" id="labelinside" class="header_search_input"></span>
                    </div>

                    <button class="close_icon close_icon--header js_toggle_search">Close</button>
                </div>

                <div class="header_newsletter">

                    <div class="newsletter newsletter--horizontal">
                        <p>Sign up to get the latest WWF news delivered straight to your inbox</p>
                        <form action="/" method="post" class="form">
                            <div class="input_group">
                                <label for="first_name_header">First name</label>
                                <input type="text" id="first_name_header" class="header_first_name_input">
                            </div>
                            <div class="input_group">
                                <label for="last_name_header">Last name</label>
                                <input type="text" id="last_name_header">
                            </div>

                            <div class="input_group">
                                <label for="email_header">Email</label>
                                <input type="email" id="email_header">
                            </div>

                            <div class="captcha">
                                <div class="g-recaptcha" data-sitekey="6LdYDiATAAAAAKbR1EmU3Yq5wGNBJXxkQqynIBmJ"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LdYDiATAAAAAKbR1EmU3Yq5wGNBJXxkQqynIBmJ&amp;co=aHR0cDovL3d3Zi13ZWJ1eC1kZXYuYXp1cmV3ZWJzaXRlcy5uZXQ6ODA.&amp;hl=en&amp;v=r20160817124709&amp;size=normal&amp;cb=j7p3fa45pww2" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea></div></div>
                            </div>

                            <button type="submit" class="btn btn--1">Sign Up</button>
                        </form>

                    </div>

                    <button class="close_icon close_icon--header js_toggle_newsletter">
                        <span></span>
                        <span></span>
                        Close
                    </button>

                </div>

                <button class="menu_toggle js_menu_toggle">
                    <i class="fa fa-bars"></i>
                    menu
                </button>

                <nav id="js-site-nav" class="main_nav">
                    <ul>
                        <li>
                            <a href="/wildlife.html" class="has_dropdown js-dropdown-link">Wildlife</a>
                            <ul class="dropdown" dropdown_title="Wildlife">
                                <span class="dropdown_inner dropdown_inner--5_col dropdown_inner--divider">
                                    <li class="dropdown_li">

                                        <ul class="col">
                                            <li><a class="title" href="/wildlife.html">All wildlife</a></li>
                                            <li><a>Adélie penguins</a></li>
                                            <li><a>African elephants</a></li>
                                            <li><a>African lions</a></li>
                                            <li><a>African rhinos</a></li>
                                            <li><a>Amur leopards</a></li>
                                            <li><a>Asian elephants</a></li>
                                            <li><a>Asian rhinos</a></li>
                                        </ul>


                                        <ul class="col">
                                            <li><a>Asian rhinos</a></li>
                                            <li><a>Giant pandas</a></li>
                                            <li><a>Jaguars</a></li>
                                            <li><a>Marine dolphins</a></li>
                                            <li><a>Marine turtles</a></li>
                                            <li><a>Mountain gorillas</a></li>
                                            <li><a href="/wildlife-internal.html">Orang-utans</a></li>
                                            <li><a>Polar bears</a></li>


                                        </ul>

                                        <ul class="col">
                                            <li><a>River dolphins</a></li>
                                            <li><a>Snow leopards</a></li>
                                            <li><a>Tigers</a></li>
                                            <li><a>Whales</a></li>
                                            <li><a>Which animal are you?</a></li>

                                        </ul>

                                    </li>
                                </span>


                                <li class="menu_image_background" style="background-image:url('/dist/img/menu_backgrounds/elephants.jpg');">
                                    <a href="#">
                                        <img src="/dist/img/icons/arrow_right_white.svg" alt="arrow_right">Which animal best describes you?                                   </a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a class="has_dropdown js-dropdown-link">where we work</a>

                            <ul class="dropdown dropdown--work" dropdown_title="where we work">
                                <span class="dropdown_inner dropdown_inner--4_col dropdown_inner--divider">
                                    <li class="dropdown_li">
                                        <ul class="col">
                                            <li><a class="title title--category">Habitats</a></li>
                                            <li><a>Forests</a></li>
                                            <li><a>Oceans</a></li>
                                            <li><a>Freshwaters</a></li>
                                            <li><a>Grasslands</a></li>
                                            <li><a>Wetlands</a></li>
                                            <li><a>Frozen landscapes</a></li>
                                            <li><a>Deserts</a></li>
                                            <li><a>Mountains</a></li>
                                            <li><a>Cities</a></li>

                                        </ul>

                                        <ul class="col">
                                            <li>
                                                <a class="title title--category">Places</a>

                                                <ul>
                                                    <li><a class="title">Africa</a></li>
                                                    <li><a>Namibia</a></li>
                                                    <li><a>Virunga-Bwindi landscape</a></li>
                                                    <li><a>Serengeti &amp; Mara National Parks</a></li>
                                                    <li><a>East African coast</a></li>
                                                    <li><a>Great Ruaha river</a></li>
                                                </ul>

                                                <ul>
                                                    <li><a class="title">Europe</a></li>
                                                    <li><a>UK rivers &amp; chalkstreams</a></li>
                                                    <li><a>Scottish seas</a></li>
                                                    <li><a>Celtic seas</a></li>
                                                </ul>
                                            </li>
                                        </ul>

                                        <ul class="col col--padtop">
                                            <li>

                                                <ul>
                                                    <li><a class="title">Asia</a></li>
                                                    <li><a>Ganges</a></li>
                                                    <li><a>Yangtze</a></li>
                                                    <li><a>Mekong</a></li>
                                                    <li><a>Amur-Heilong</a></li>
                                                    <li><a>Eastern Himalayas</a></li>
                                                    <li><a>Borneo</a></li>
                                                </ul>

                                                <ul>
                                                    <li><a class="title">South America</a></li>
                                                    <li><a>The Amazon</a></li>
                                                    <li><a>Colombia</a></li>
                                                    <li><a>Pantanal</a></li>
                                                </ul>
                                            </li>
                                        </ul>

                                        <ul class="col col--padtop">
                                            <li>
                                                <ul>
                                                    <li><a class="title">Oceans &amp; coasts</a></li>
                                                    <li><a>Coral Triangle</a></li>
                                                    <li><a>East African coast</a></li>
                                                    <li><a>Meso-American reef</a></li>
                                                    <li><a>Welsh coast &amp; seas</a></li>
                                                </ul>
                                                <ul>
                                                    <li><a class="title">Polar regions</a></li>
                                                    <li><a>Arctic</a></li>
                                                    <li><a>Antarctic</a></li>
                                                </ul>
                                            </li>
                                        </ul>


                                    </li>
                                </span>


                                <li class="menu_image_background">
                                    <a href="#">
                                        <span><img src="/dist/img/icons/arrow_right_white.svg" alt="arrow_right"> view all the places we work </span>
                                    </a>
                                </li>
                            </ul>
                        </li>


                        <li><a class="has_dropdown js-dropdown-link">who we are</a></li>
                        <li><a class="has_dropdown js-dropdown-link">what we do</a></li>
                        <li><a>success stories</a></li>
                        <li><a href="fundraising-events.html" class="has_dropdown js-dropdown-link">get involved</a></li>
                    </ul>
                </nav>

                <div class="adopt_donate_buttons">
                    <button class="btn btn--large btn--1 btn--hover_fixed">
                        Adopt
                    </button>
                    <button class="btn btn--large btn--2 btn--hover_fixed">Donate</button>
                </div>
            </div>
        </div>
    </header>


<main class="page_wrapper">

  <div class="four-oh-four">
    
  <div class="form-etc">

    <h1>404</h1>
    <p class="subheading">
      Oh no! It looks like you might be a little lost
    </p>

    <div class="man">

      <div class="eyes"></div>

      <div class="arm"></div>

    </div>
    
    <div class="search">
      
      <p>We've moved a few things around recently. Why not try searching for what you're looking for?</p>

      <div class="input_group input_group--label_inside_right input_group--label_inside_right input_group--label_inside_large_white_bg ">
        <button type="submit"><span class="hidden_text">Search</span><i class="fa fa-search"></i></button>
        <span><input type="text" id="labelinside"></span>
      </div>
      
    </div>
    
  </div>

    <div class="pop-content">
      
      <h2>Popular pages</h2> 
      <p class="sudo-heading">(that you might have been loking for)</p>

     <nav class="grid_wrapper grid_wrapper--large">
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/adelie_penguin.jpg" alt="Adélie Penguins">
                <h3>
                    Adélie Penguins
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/african_elephant.jpg" alt="African Elephants">
                <h3>
                    African Elephants
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/african_lion.jpg" alt="African Lions">
                <h3>
                    African Lions
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/african_rhino.jpg" alt="African Rhinos">
                <h3>
                    African Rhinos
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/amur_leopard.jpg" alt="Amur Leopards">
                <h3>
                    Amur Leopards
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/asian_elephant.jpg" alt="Asian Elephants">
                <h3>
                    Asian Elephants
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/asian_rhino.jpg" alt="Asian Rhinos">
                <h3>
                    Asian Rhinos
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/giant_panda.jpg" alt="Giant Pandas">
                <h3>
                    Giant Pandas
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/jaguar.jpg" alt="Jaguars">
                <h3>
                    Jaguars
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/marine_dolphin.jpg" alt="Marine Dolphins">
                <h3>
                    Marine Dolphins
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/marine_turtle.jpg" alt="Marine Turtles">
                <h3>
                    Marine Turtles
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/mountain_gorilla.jpg" alt="Mountain Gorillas">
                <h3>
                    Mountain Gorillas
                </h3>
            </a>
            <a href="/wildlife-internal.html" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/orangutan.jpg" alt="Orang-utans">
                <h3>
                    Orang-utans
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net//src/img/wildlife/polar_bear.jpg" alt="Polar bears">
                <h3>
                    Polar bears
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/river_dolphin.jpg" alt="River dolphins">
                <h3>
                    River dolphins
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/snow_leopard.jpg" alt="Snow Leopards">
                <h3>
                    Snow Leopards
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/tiger.jpg" alt="Tigers">
                <h3>
                    Tigers
                </h3>
            </a>
            <a href="" class="image_link">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/whale.jpg" alt="Whales">
                <h3>
                    Whales
                </h3>
            </a>
            <a href="" class="image_link image_link--large">
                <img src="https://wwf-webux-dev.azurewebsites.net/src/img/wildlife/chameleon.jpg" alt="Chameleon">
                <div>
                    <h3>
                        Which animal are you?
                    </h3>
                    <p>
                        Have you ever wondered which animal you're most like?
                    </p>
                    <span class="btn btn--outline_white">Find out which</span>
                </div>
            </a>
        </nav>

      </div>

    </div>

  </div>
  
</main>
              
            
!

CSS

              
                /* --------------------- FONT FACE ----------------- */
@font-face {
    font-family: 'WWFRegular';
    src: url('https://www.wwf.org.uk/_css/font/wwf-webfont.eot');
    src: url('https://www.wwf.org.uk/_css/font/wwf-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.wwf.org.uk/_css/font/wwf-webfont.woff') format('woff'),
         url('https://www.wwf.org.uk/_css/font/wwf-webfont.ttf') format('truetype'),
         url('https://www.wwf.org.uk/_css/font/wwf-webfont.svg#WWFRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { margin: 0; padding; 0; }

.four-oh-four {
  background: #0094D5;
  background:#0094D5 url('https://dixign.co.uk/images/404-bg.svg') no-repeat 50% -250px;
  min-height:2000px;
  margin: 0 auto;
  position: relative;
  width: 100%;
    max-width:1800px;
}

.four-oh-four .form-etc {
  height:890px;
  maring:0;
  padding: 0;
  position:relative;
  width:100%;
}

.four-oh-four h1, .four-oh-four p.subheading, .four-oh-four p.sudo-heading {
  color: white;
  font-family: "WWFRegular", sans-serif;
  font-size: 200px;
  font-weight: 400;
  line-height: 0.9em;
  margin: 0 auto;
  position: absolute;
    top: 10px;
    left: 3%;
  text-align: center;
  text-transform: uppercase;
  width: 94%;
}

.four-oh-four p.subheading {
  font-size: 35px;
    top: 190px;
} 

.four-oh-four p.sudo-heading { 
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    margin: 0 0 40px;
    line-height: 1em;
    position: relative;
    top: 0;
    text-transform: none;
}

.man {
  background:url('https://dixign.co.uk/images/man.svg') 50% 0%;
  height:720px;
  margin-left:-180px;
  position: absolute;
    top: 250px;
    left: 30%;
  width: 360px;
  
  transition: all 0.5s ease;
}

.arm {
  background:url('https://dixign.co.uk/images/arm.svg') 0% 0%;
  height:180px;
  position: absolute;
    top: 23px;
    right: 5px;
  width: 160px;
  
  animation-name: headscratch;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  
  -webkit-transform: translateZ(0);
}


@keyframes headscratch {
  from {
    top: 23px;
    right: 5px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    top: 18px;
    right: 10px;
    -ms-transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}

.eyes {
  background:url('https://dixign.co.uk/images/eyes.svg') 0% 0%;
  height:30px;
  position: absolute;
    top: 65px;
    left: 150px;
  width: 70px;
  
  animation-name: lookdown;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  
  -webkit-transform: translateZ(0);
}

@keyframes lookdown {
  0% {
    top: 65px;
  }
  10% {
    top: 70px;
  }
  50% {
    top: 70px;
  } 
  60% {
    top: 65px;
  }
  100% {
    top: 65px;
  }
}

.four-oh-four .search {
  margin-left:-200px;
  position: absolute;
    top: 440px;
    left:50%;
  text-align: center;
  width:400px;
}

.four-oh-four .search p{
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 auto 10px;
  width:90%;
  max-width:500px;
}


.four-oh-four .pop-content {
  position: relative;
  width: 100%;
}

.four-oh-four .pop-content h2 {
  color: white;
  text-align: center;
}

@media (max-width: 1100px){
  
  .four-oh-four .man {
    left:20%;
  }

}

@media (max-width: 700px){
  
  .four-oh-four .man {
    left:50%;
    top:320px;
  }
  
  .four-oh-four .search {
      top: 260px;
  }

  .four-oh-four .search p{ display:none; }

  .four-oh-four .form-etc {
    height:1060px;
  }
  
}

@media (max-width: 410px){

  .four-oh-four .search { 
    left:5%;
    margin-left:0;
    width:90%;
  }
  
}

              
            
!

JS

              
                
              
            
!
999px

Console