index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Platzi Video</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="src/css/home.css" />
  <link rel="stylesheet" href="src/css/modal.css" />
</head>
<body>
  <section class="home" id="home">
    <div class="home-sidebar">
      <div class="sidebar">
        <div class="logo">
          <figure class="logo-image">
            <img src="src/images/platzi-video.png" alt="Platzi Video - la Plataforma de videos cheveres"/>
          </figure>
        </div>
        <div class="sidebarPlaylist">
          <h2 class="sidebarPlaylist-title">Mi Playlist <span class="btn warning">Escuchar Playlist</span> </h2>
          <ol class="myPlaylist">
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Reasons To Choose A Notebook Over A Computer Desktop
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Programming
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Pa Bailar
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Top 10 mundial
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Platzi Video
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Luis y sus amigos
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  Bailar y Bailar
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  13 reasons why
                </span>
              </a>
            </li>
            <li class="myPlaylist-item">
              <a href="#">
                <span>
                  El mundial
                </span>
              </a>
            </li>
          </ol>
        </div>
        <div class="sidebarPlaylist">
          <h2 class="sidebarPlaylist-title">Playlist de amigos</h2>
          <ul class="playlistFriends" id="playlistFriends">
            <li class="playlistFriends-item" >
              <a href="#">
                <img src="src/images/covers/echame-la-culpa.jpg" alt="echame la culpa" />
                <span>
                  Luis Fonsi
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div class="home-primary">
      <!-- <section class="primary"> -->
        <div class="primary-search">
          <form action="" class="search" id="form">
            <input type="text" name="name" placeholder="Buscar un artista o tema favorito"/>
          </form>
        </div>
        <div class="primary-user">
          <div class="user">
            <p>
              <img src="src/images/covers/gorillaz.jpg" alt=""/>
              <span>Leonidas Esteban</span>
            </p>
          </div>
        </div>
        <div class="primary-list">
          <div class="primaryPlaylist">
            <h3 class="primaryPlaylist-topic">A los golpes</h3>
            <h2 class="primaryPlaylist-title">Acción</h2>
            <div class="primaryPlaylist-list" id="action">
              <img src="src/images/loader.gif" width="50" height="50" alt="">
            </div>
          </div>
          <div class="primaryPlaylist">
            <h3 class="primaryPlaylist-topic">Para llorar</h3>
            <h2 class="primaryPlaylist-title">Drama</h2>
            <div class="primaryPlaylist-list" id="drama">
              <img src="src/images/loader.gif" width="50" height="50" alt="">
            </div>
          </div>
          <div class="primaryPlaylist">
            <h3 class="primaryPlaylist-topic">Dibujitos animados</h3>
            <h2 class="primaryPlaylist-title">Animación</h2>
            <div class="primaryPlaylist-list" id="animation">
              <img src="src/images/loader.gif" width="50" height="50" alt="">
            </div>
          </div>
        </div>
      <!-- </section> -->
    </div>
    <div class="home-featuring" id="featuring">
    </div>
  </section>
  <div class="overlay" id="overlay">
  </div>
  <div class="modal" id="modal">
    <h1>Título de pelicula</h1>
    <div class="modal-content">
      <img src="" alt="" width="170" height="256">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione impedit maiores enim alias ex accusantium quasi cum autem, nam, voluptas tenetur laudantium quod! Odit voluptate illo, voluptas vel quia, quae.</p>
    </div>
    <div class="modal-buttons">
      <button class="modal-btn primary" id="hide-modal">Cerrar Modal</button>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="src/js/home.js"></script>
</body>
</html>