Index

by enagu

HTML

<html>
  <head>
    
  </head>
  <body>
    <div class="top-panel">
      <div class="search">
        <input type="text" placeholder="Buscar">
      </div>
    </div>
    <div class="videos">
    
      <div class="video">
        <div class="video-header">
          <span class="title">Title</span>
          <div class="tags">
            <span class="tag">Tag1</span>
            <span class="tag">Tag2</span>
          </div>
        </div>
        
        <div class="video-media">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </div>
       
       <div class="video-footer">
         <a href="https://www.example.com" class="page">example</a>
       </div>
      </div>
      
    </div>
  </body>
</html>

SCSS

html, body {
  margin: auto;
  overflow-y: auto;
  width: 100%;
  background-color: #1f2023;
  overflow-x: hidden;
  font-family: monospace;
}

.top-panel {
  display: flex;
  justify-content: flex-end;
  color: #fff;
  
  .search {
    margin-right: 0.5rem;
    
  }
}

.video {
  display: inline-block;
  position: relative;
  width: auto;
  max-width: 95%;
  margin: 3px;
  vertical-align: top;
  text-align: left;
  background-color: #262932;
  padding: 3px;
  box-sizing: border-box;
  color: #fff;
  
  .video-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #C4C8D4;
  }
  
  .video-header:hover {
    white-space: normal;
  }
  
  .video-footer {
    a {
      color: #fff;
    }
  }
}