A Pen by Joe Dix

Thumbnail
This awesome code was written by dixign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dixign ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Joe Dix</title>
  
  
  <link rel='stylesheet prefetch' href='https://wwf-webux-dev.azurewebsites.net/dist/css/app.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://wwf-webux-dev.azurewebsites.net/src/js/site.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dixign/a-pen-by-joe-dix-xOZYPy */
/* --------------------- 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%;
  }
  
}

Comments