karaokend

In this example below you will see how to do a karaokend with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>karaokend</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,700''>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Pacifico'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

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

  
</head>

<body>

  
<section class="hero">
  <div class="container">
    <h1 class="logo">karaokend</h1>
    <div class="form-control"><i class="fa fa-search"></i><i class="fa fa-times-circle"></i>
      <input class="txt-search" placeholder="Busca canci├│n o artista"/>
    </div>
  </div>
</section>
<section>
  <div class="container search-results">
    <h2><i class="fa fa-hashtag"> </i>tendencias</h2>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
    <div class="song-row"><span class="lbl-added hide"><i class="fa fa-check-circle hide"> </i>Agregado!</span>
      <div class="img-preview"> <span class="time"><i class="fa fa-play"></i> 3:31</span><img src="http://lorempixel.com/200/70/cats"/></div>
      <p class="title">Queen - We are the champions</p><span class="btn-add"><i class="fa fa-plus"></i><i class="fa fa-trash hide"></i></span>
    </div>
  </div>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/anareyna/karaokend-dGOoEd */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.transition,
.logo,
.logo:hover,
.search-results .song-row .btn-add {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.relative {
  position: relative;
}
.hide {
  display: none;
}
body {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  background: #211d20;
}
.hero {
  color: #211d20;
  padding: 50px 0 80px;
  background: -webkit-linear-gradient(top, #fd0, #e6c700);
  background: -moz-linear-gradient(top, #fd0, #e6c700);
  background: -o-linear-gradient(top, #fd0, #e6c700);
  background: -ms-linear-gradient(top, #fd0, #e6c700);
  background: linear-gradient(to bottom, #fd0, #e6c700);
}
.lbl-added {
  position: absolute;
  bottom: 0;
  right: 80px;
  z-index: 1;
  font-size: 18px;
}
.lbl-added .fa {
  margin-right: 10px;
  font-size: 24px;
  vertical-align: bottom;
}
.form-control {
  position: relative;
}
.txt-search {
  border: none;
  padding-left: 60px;
  padding-right: 50px;
  width: 100%;
  -webkit-box-shadow: 0px 12px 20px rgba(0,0,0,0.15);
  box-shadow: 0px 12px 20px rgba(0,0,0,0.15);
  border-radius: 100px;
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  outline: none;
  color: inherit;
}
.fa-search {
  position: absolute;
  font-size: 24px;
  line-height: 60px;
  color: inherit;
  left: 25px;
}
.fa-times-circle {
  color: #ccc;
  position: absolute;
  right: 20px;
  font-size: 25px;
  line-height: 60px;
  cursor: pointer;
  display: none;
}
.container {
  margin: auto;
  width: 70%;
}
.logo {
  font-family: 'Pacifico', sans-serif;
  text-align: center;
  margin: 0;
  letter-spacing: -3px;
  font-size: 70px;
  font-weight: normal;
  color: inherit;
  margin-bottom: 20px;
}
.logo:hover {
  letter-spacing: 0;
}
.search-results {
  margin-top: 40px;
  margin-bottom: 40px;
}
.search-results .song-row {
  margin: 10px 0;
  background: #1a171a;
  border-radius: 10px;
  position: relative;
  height: 70px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.search-results .song-row .img-preview {
  position: relative;
  height: 70px;
}
.search-results .song-row .img-preview:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.4);
}
.search-results .song-row .img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-results .song-row .img-preview .time {
  text-align: center;
  line-height: 70px;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 20px;
}
.search-results .song-row .title {
  font-size: 24px;
  margin-left: 20px;
}
.search-results .song-row .btn-add {
  background: #fd0;
  color: #211d20;
  height: 100%;
  text-align: center;
  position: absolute;
  right: 0;
  font-size: 30px;
  width: 70px;
  cursor: pointer;
}
.search-results .song-row .btn-add.active {
  background: #e73827;
}
.search-results .song-row .btn-add.active .fa-trash {
  display: block;
}
.search-results .song-row .btn-add.active .fa-plus {
  display: none;
}
.search-results .song-row .btn-add .fa {
  line-height: 70px;
  width: 100%;
}
h2 {
  font-family: 'Pacifico', sans-serif;
  font-size: 28px;
  border-radius: 50px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1a171a;
  color: #fd0;
}
@media all and (max-width: 699px) {
  .container {
    width: 90%;
  }
}


/*Downloaded from https://www.codeseek.co/anareyna/karaokend-dGOoEd */
(function() {
  var dom;

  dom = {
    btnClear: $('.fa-times-circle'),
    txtSearch: $('.txt-search'),
    btnAdd: $('.btn-add'),
    lblAdded: $('.lbl-added')
  };

  dom.btnClear.on('click', function() {
    dom.txtSearch.val('');
    $(this).hide();
    dom.txtSearch.focus();
  });

  dom.txtSearch.on('keyup', function() {
    if ($(this).val().length) {
      return dom.btnClear.show();
    } else {
      return dom.btnClear.hide();
    }
  });

  dom.btnAdd.on('click', function() {
    $(this).toggleClass('active');
    return $(this).siblings('.lbl-added').show().addClass('animated fadeOutUp');
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFBLEdBQUEsR0FDQztJQUFBLFFBQUEsRUFBVSxDQUFBLENBQUUsa0JBQUYsQ0FBVjtJQUNBLFNBQUEsRUFBVyxDQUFBLENBQUUsYUFBRixDQURYO0lBRUEsTUFBQSxFQUFRLENBQUEsQ0FBRSxVQUFGLENBRlI7SUFHQSxRQUFBLEVBQVUsQ0FBQSxDQUFFLFlBQUY7RUFIVjs7RUFJRCxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQWIsQ0FBZ0IsT0FBaEIsRUFBeUIsUUFBQSxDQUFBLENBQUE7SUFDeEIsR0FBRyxDQUFDLFNBQVMsQ0FBQyxHQUFkLENBQWtCLEVBQWxCO0lBQ0EsQ0FBQSxDQUFFLElBQUYsQ0FBSSxDQUFDLElBQUwsQ0FBQTtJQUNBLEdBQUcsQ0FBQyxTQUFTLENBQUMsS0FBZCxDQUFBO0VBSHdCLENBQXpCOztFQU1BLEdBQUcsQ0FBQyxTQUFTLENBQUMsRUFBZCxDQUFpQixPQUFqQixFQUEwQixRQUFBLENBQUEsQ0FBQTtJQUN6QixJQUFHLENBQUEsQ0FBRSxJQUFGLENBQUksQ0FBQyxHQUFMLENBQUEsQ0FBVSxDQUFDLE1BQWQ7YUFDQyxHQUFHLENBQUMsUUFBUSxDQUFDLElBQWIsQ0FBQSxFQUREO0tBQUEsTUFBQTthQUdDLEdBQUcsQ0FBQyxRQUFRLENBQUMsSUFBYixDQUFBLEVBSEQ7O0VBRHlCLENBQTFCOztFQU1BLEdBQUcsQ0FBQyxNQUFNLENBQUMsRUFBWCxDQUFjLE9BQWQsRUFBdUIsUUFBQSxDQUFBLENBQUE7SUFDdEIsQ0FBQSxDQUFFLElBQUYsQ0FBSSxDQUFDLFdBQUwsQ0FBaUIsUUFBakI7V0FDQSxDQUFBLENBQUUsSUFBRixDQUFJLENBQUMsUUFBTCxDQUFjLFlBQWQsQ0FBMkIsQ0FBQyxJQUE1QixDQUFBLENBQWtDLENBQUMsUUFBbkMsQ0FBNEMsb0JBQTVDO0VBRnNCLENBQXZCO0FBakJBIiwic291cmNlc0NvbnRlbnQiOlsiZG9tID1cblx0YnRuQ2xlYXI6ICQoJy5mYS10aW1lcy1jaXJjbGUnKVxuXHR0eHRTZWFyY2g6ICQoJy50eHQtc2VhcmNoJylcblx0YnRuQWRkOiAkKCcuYnRuLWFkZCcpXG5cdGxibEFkZGVkOiAkKCcubGJsLWFkZGVkJylcbmRvbS5idG5DbGVhci5vbiAnY2xpY2snLCAtPlxuXHRkb20udHh0U2VhcmNoLnZhbCgnJylcblx0JChAKS5oaWRlKClcblx0ZG9tLnR4dFNlYXJjaC5mb2N1cygpXG5cdHJldHVyblxuXG5kb20udHh0U2VhcmNoLm9uICdrZXl1cCcsIC0+XG5cdGlmICQoQCkudmFsKCkubGVuZ3RoXG5cdFx0ZG9tLmJ0bkNsZWFyLnNob3coKVxuXHRlbHNlXG5cdFx0ZG9tLmJ0bkNsZWFyLmhpZGUoKVxuXHRcdFxuZG9tLmJ0bkFkZC5vbiAnY2xpY2snLCAtPlxuXHQkKEApLnRvZ2dsZUNsYXNzICdhY3RpdmUnXG5cdCQoQCkuc2libGluZ3MoJy5sYmwtYWRkZWQnKS5zaG93KCkuYWRkQ2xhc3MoJ2FuaW1hdGVkIGZhZGVPdXRVcCcpIl19
//# sourceURL=coffeescript

Comments