header.php

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title><?php wp_title(); ?></title>
      <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen"/>

      <?php wp_enqueue_style( 'open-sans', 'https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet', array(), null, 'all' ); ?>


      <?php wp_enqueue_script('jquery'); ?>
      <?php wp_head(); ?>
    </head>
  <body>

 <!-- topo -->
  <header id="topo">
    <!-- grupo de textos e mídia do topo -->

    <img src="<?php bloginfo('template_directory'); ?>/assets/img/etiqueta-itens.png" alt="imagem" class="etiqueta"/>

    <!-- menu -->
    <nav class="menu">
      <img src="<?php bloginfo('template_directory'); ?>/assets/img/hamburger.png" alt="imagem" class="hamburger"/>
      <p class="txt-menu">Menu</p>
    </nav>
    <!-- fim menu -->

    <!-- menu aberto -->
    <nav class="menu-open">

      <div id="close">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/close.png" alt="imagem" class="btn-close"/>
      </div>

      <ul>
        <li><a href="#">A Origem</a></li>
        <li class="disabled">O Frigorífico</li>
        <li class="disabled">Manuseio da Carne</li>
        <li class="disabled">Nossa Loja</li>
        <li class="disabled">O Atendimento</li>
      </ul>


    </nav>
    <!-- fim menu aberto -->

    <div class="wrap">
       <figure id="logotype">
         <img src="<?php bloginfo('template_directory'); ?>/assets/img/logo.png" alt="imagem" class="logo"/>

         <img src="<?php bloginfo('template_directory'); ?>/assets/img/title-topo.png" alt="imagem" class="title-topo"/>
      </figure>

       <!-- vídeos -->
       <div class="videos-group">
         <div class="v-category-1">
           <p class="txt-video-1">A Origem</p>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/border.png" alt="imagem" class="border-1"/>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/thumb-1.png" alt="imagem" class="thumb-1"/>
         </div>

         <div class="v-category-2">
           <p class="txt-video-2">O Frigorífico</p>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/border.png" alt="imagem" class="border-2"/>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/thumb-2.png" alt="imagem" class="thumb-2"/>
         </div>

         <div class="v-category-3">
           <p class="txt-video-3">Manuseio Da Carne</p>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/border.png" alt="imagem" class="border-3"/>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/thumb-3.png" alt="imagem" class="thumb-3"/>
         </div>

         <div class="v-category-4">
           <p class="txt-video-4">Nossa Loja</p>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/border.png" alt="imagem" class="border-4"/>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/thumb-4.png" alt="imagem" class="thumb-4"/>
         </div>

         <div class="v-category-5">
           <p class="txt-video-5">O Antendimento</p>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/border.png" alt="imagem" class="border-5"/>
           <img src="<?php bloginfo('template_directory'); ?>/assets/img/thumb-5.png" alt="imagem" class="thumb-5"/>
         </div>

         <div id="mousecontrol">
           <p class="txt-mc-1">Role para baixo para ver</p>
              <img src="<?php bloginfo('template_directory'); ?>/assets/img/mousecontrol.png" alt="imagem" class="mousecontrol"/>
           <p class="txt-mc-2">todo nosso compromisso</p>
         </div>

       </div>
       <!-- fim vídeos -->
    </div>
    <!-- fim do grupo de textos e mídia -->
</header>