A Pen by Gustavo

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Gustavo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://use.fontawesome.com/6dd30361cd.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<header>
  <h1>melhores investimentos</h1>
</header>
<hr class="hr-header"/>

<!--<nav>
  <div class="nav-item">
  </div>
  <div class="nav-item">
    <i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i>
  </div>
  <div class="nav-item">
  </div>
</nav>-->


<div class="main">
  <div class="main-content">
  <ul class="comments">
   
  <li class="comment">
    <section class="author">
      <img class="photo" src="data:image/png;base64,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" width="60" >
      <span class="name">pointlessjon</span>
    </section>
    <section class="content guga-comment">
      <p>Oi Naty, como posso ajudar?</p>
    </section>
  </li>
    
    <li class="comment comment-user">
     <section class="content-user">
      <p>Guga, o que tem de bom hoje? 
</p>
    </section>
  </li>
    
    <li class="comment">
    <section class="author">
      <img class="photo" src="data:image/png;base64,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" width="60" >
      <span class="name">pointlessjon</span>
    </section>
    <section class="content">
      <p>Olha, você precisa de liquidez diária? Ou vai poder deixar o dinheiro investido? E tem algum prazo específico?
</p>
    </section>
  </li>
    
    <li class="comment comment-user">
     <section class="content-user">
      <p>Isso, com liquidez diária.
</p>
    </section>
  </li>
    
    <li class="comment">
    <section class="author">
      <img class="photo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABIFBMVEX////Dl3JVNzIAvqW0h2RkRjwAqpqWbVBaQTcAvKS2imbHmnQArJ1TNTGTak5lRzxTOzNfQTlMKSO/k28As58ArpwApJKwf1nAkWjv5Ny4hmKadVpGHxelf2G7hWAAuZ5aPDWvj29NMC5aOCzp5uWdc1VQMCpLyraNZ0+ofVytiWdonIRePTKufFNnTkrf29qVhoTUz87w+vnJwsG4r67f9fFxVESf4NXPrZHhzLx51cbA6+PUtp7z8fGEYU4zuKqgjWyHdXOkmJZULiBCGQ/AuLed4NRBpI/hzb18l3zWvq1nwreWj3GO0MfN7Oiq3ddvxbuGlHhXn4mPYkC0oJDEtaK2noPQyLqjiHF+aGFwWVaOfXtkSkaroJ5NIxK+mHtxst4FAAAOMElEQVR4nO2dC1faSBvHwXJZEwKGWIqgSJFYgtYblbptoWq13bb2vt3duvXt9/8W70xCLpPMZCYhT4Ke/Z+zvaxMmF+e60wuzeXANTm8PD+43vvZXVJ/Xp+dX+5P+EP6h6PLJ0ijwz78BOfS/s1Zd329Xt9WlCUkRdnerq/Xr2+Y8+6Pbs72ltbxGFPoD3sHI/45yUajfxHNtolGart+8fNJcNaH52f1C+dsOFLQx8/2M5g/R6Oz+vp2EM6Zdr1+7mU8PL/Gp4P18e31s8WyY/98KQzPUn3d/vTlWRjdjHF7gcx4+GO9TvFNvxW3zWDsP9mj0nXVIlKthn5Ru+bnLw6zBptptMc3H55wHQH2b/YuKCcD02E0WzUTUllfiLw6+rnON59pwUnu8jpoa2VmvIBU5Kg/s6ZD/nktxod0ebAddE5F6VLxZoz1Jxnz9c8uRPzTEiX2kP3YfJYZswW8EYq/EHWJ4AsCqsX1LJPN/s/6vHyh2t368aP2v4O0sSajc9RjLS3tHRwIByBVyhI9vzjausHf1083EPvne1aPpeB2E9SAxd3zVNFMjSipPrYBOXzF4qv0+dR504pH3dAEg6X+SJlvX7zsCYgTgZaXpptiziOUPb66qhDibnqFYrI3Z1nwS8GUXEctvkrLjPu8ZU5MhVd704zXqSwRRxcJRiAhvq/u7qawuBhdAPEJIRbhEQ8BAYUQt4ARJ2AuaolPWCzCxuIeTJKxpfBLP0o3kIDnCZeJoARsuAVYNPZBgxBLEan9r+BK/zWsj5oSICzuQQEersMDChFuXQIRpmFCoS68uAsDuJ+GCUWyKTLiCIQQOpFalZa31rcEs1rsghZ7tITqmpBChK8gyn4ftFRYZUIVJQTJNZegTmoXQkFCkBX/AWwmtXOoGCFISQSuFbOZ14SqBXJTAELYRCNoOpcw+VQzAS73UQmTXyZOYKuhWBm8xYRCawpownRS6d0lFOlGgQlzoIRRwxCEcAmwWkQOQ4hqkVMhCaMCghDuwREKXD4MECYPmPsBGIiRnRSEELLzjgwIso8BuMSPnEmRAAifwBFGd1KQ1dMIjjA6IMhlfbitthgmBFnjT8D2aaJ2bFCEYG1bDBMCEUJtY8QABLpD6t+4hMqSorAbojgmLO6C3N52E5pMaQz4frdeD/VktfG4qPSo4+LUQqht/bByoRTHSz0E4wr9rdetTQe6UZAs6dSRsQCBCPvscqF0EYahD6bTcQ1pPJ5OB+UZWsGWQTMiacJaTRW6P6q4BXORlGlDRTEwgkSqQEoa0GLRWylUHQ0yBkWROzJgHr1grp96eoEvqcvxUbVtnRSpzN8WBrkyw15d9KZ+e9EABxQn9fqoDYg+WhjwEIEIGb23UhQApEYhAah7jiIVpqHxWINY4ueYnWnPEAAs0DZBPHxF30GQHceqrXGQEQQwl6MSKiI+WigGAT2bM+o4OAJnHb08aBuGJAW8FuquIWrfpoSBSZKGlJdICyrdmnd/Ta1taIHUa483/7/ka87B7ommpRqmCRFc3pLc7hGAPVVDJrVvmVXVQV7GH9M0tjPoajqEtMvAPbrd8rZkeaNGACq9cV7rzQBVtdbWZOfDTEppShCC3fRN6Wr8JpRcNmvK7ZrPgEobQffMDNIdD4aynPeJAinJEtH87N4AEVK6Gl8i9fHl5Q2VAOz1pthkWnswGGxs5IN4NEoJH4gwIszSAuvMH4hKjTjhUmCqyF7TntWTo1/VwcwlZSwGneOwGu79bIcfeiNxC4wwsIDqDfwnm8IoS23Uk08HGxqPKkSytygC3ROVo9R8Ms/4fdRLyTcah7DtMSJQ443l81Kfk85DwJWWDqHv4kVvEB6FScqba17B3c7uC0QykwITbrhGBHyQjQxEpcvJpIlKS4UwR2wLK+M0CWW3OQW6g9YUEYjKIFXCqW1E0IcRiVWwb/cCmtCpF6DPIhKB6Ou6gQnRGiwNQuKWjK6UKqGTamCfevbs7fvqPTihk2rAnkYw5Vkj+lIpPKHdmsK1pViey4gK0dGkQGh3NUA73rbczRpyYZECob0hBfwMotu49fSMCIH2g22Z9cK6vOTbzHcI4y+UQke6NgR+4NncTJpi+XdxZxPR2m1ie0mcL3ykvDEd4/cPqVD7wbYO6tMC/eqSNZHpCtY0BiFvJLKwhu0I+hQp0qHO2iE1p1Fb+Q1rZRzVivJ4NrIW+qkNFfwdGSctOuBsT8yaJproIBqiPHBGTsNGyhvdM1jAtccMQJNQs6eJFAkwn3cHrjA3fEzEKfCrathb7xI+wS7hSrTqIXlGboSavwC2H2xqwjRhgHAjCiA5MpSwCfsmpbUH4oRRAjEK4dp/hP8RJkU4jACYzw9vByGREUNzfkCacBbOllAeO/OM2NSIj8yY0HG2iOXQY/6V4SIT4kjEM12JlmcijcyYEC2BprXfaoMYyye0cEAjp9yRWRMKXeBlMQqNhCYM7dpSURN4ic8EBL5C6kqGBcz9znbTdACbfwAT5rSMCU+gAXMTiWXFaE1MPDV/gQMinTymM8ITNpvv0gBEZnx3cpJBMn3xAjwEvfqVOiF8AJJ6R/FUUMDm7ykT0pob0EAEbmUoojQ3oG7aTBuQFoigbpp2GOZyf6Trpuk7aW5CIaS5KWe1ILoMSd9JUeEXclPJMMLCk/NjVy8yIKQtpPyzlY1quVzVJbqhZEnHPzYEzJiBk+aEck0BEZRNRsqsTT78U4EMlX6ewaKVRB+JXp6pWjZQHpLt27zzWsEoV+0f6gtqQgEjyg4hhqxWy7quG+g/88+udK6bZmNCgUiUjbKA+IEIvXHB1gteTdSqfMBymVdG01oz0US7XkpMTtN5jFWd2yeksupliF8x5EI5jLFaLnCDMDsfxaItovyVAVUFOmSVXkX8gKmue4P6JdCeylpBr/oo0d/1gsjOeDOLboZEpIQiLbJQBdTt4oFqhmiX3syqUHhEyzbU6ctmxdfMii+87Z9llnEkjBhd6Wwe8kWLxWQAF8BFLZ3AIGafZFy9o9TF+QEzLhOk1gpBM87JJ2e0nmDqRdCM86SbLHtRltZ+BRhjIzZPFutf/7W1FkiqsRC15smiOairNf91qeibxM3mi8Xlw5q8I68vRkRs5hcqgTKEAtILeYfM54o0pGiPLad9dWk+oazzIIKn3iLzufIakmPG22Y+V2siCUfOa7fPfI7aZYNjRlkzyg+znuYcauMFfRijZFSr+m0nNHf0rfc9EYwywjP34Qq3ntCE1A2XEV+3kAx7B65wJwgtSnMLyiAvXFSNu0NIF34S7k4TmmnoThMW7jph4a4TzgrlMOtpzqHwS2tOT3eU9Txjq/9NCPBBCv8YNZD+DLOhu4Bsfc96onEVZkLidQUPFnNnjasJm6/qe+R9eCsjsR9yedv/Zt7W8NaF4uTvf5guWqW9HfvxX/u3yI797/98+yZuQDsYC3/9fRssOTn8sxyGVw57vfmDx8PvcO9ETELHH17uPGbceMHnsyLy8c7LD8dZg1B19OlzpVEqvekUDMZdQlVd5NXfnTelUqPy+fmCReXx00cNhIdlTtPQA3z6bCuDK+swjcajpwtjyufP7m1u3rtvzaxyZb/7xDDvLsE+i1f2QnDYS68q1oHu44M+e541HDYemgjWqjWx0teOO136PwQRqs7X2XFWzaNubmZqSst4My3PZlZhvb9GUDMTlpbtA2dlyuPXj1w6Uzbh23kQW28dJ/UKmfJ1qqY8en3Ph+dx08ZchA3CSQnIe6/Tyq/Hfuv53PRLfMTWl4CTkpZMw5BHzzZp34503zZih4/CIpwdwuek7lncfAZux6f0ryaMGDsSO2/DTDjTJ1jARzT/9BuxNIxpwYeVcBOa2nwEyHcU8sUeI+LWLZYJ35T4JsQC89TjQIJjGLGyEwexsyNiQqxVIMQj7rl1jOj2buJy+jWBr7kPg4gnwDu59hxLD6Mitk4dQJ6roI+8hAB8L+I/DmFpGA2x9dAZyfsOHAuN98kDPm2InN/lmIitU3cgx0ctP2kkXjSOG1G+39SpOGLnyh0meA4bSYfi+yg+NEs3X0Qzasdp1vhB6Bw/YT/92Ig+BVQ0WiJmbLW+uoDcQuF8svExUcKXrhfx/NSL2Djlm7Fz1RAH9MR5skY8bniOzCsZHkRkxmE4Y2foMSAX8J53GolG4mfvkbl+uuxFLCFGlq+2MF8UwFViHh8SJKwQR+b6qdeKpUpl57RDCchWq3NF8PEBl8lpVJID/NggD831U/JkVyqNndMWopxx4j90Wlc7JfLE8VyD9FHspsmthz/4Ds0/24HTXSm92Xl7dfpwKA1PT6/e7rwpVaI6BuEZJmFyVf99yS/++Q7MByFVTCr7d/Kc8QFX/WMSzKaBQ4ucccqM2BI4Y8uUYUkBHvnDsCTipxEYBfgoPpFgvTimEIrNalmEUehI1LOVWKr5RCMU8VPWzKLzUX00uVQTSKWmhPzUnBzFv+xjCJ4mqo+Wkqv5L6lHFz37JuRqcIb3V4XxmJ6Q1FI/kNpnijBDTLm8urp6Hwv9Hm0o3UdLiXU1tFRqWSHaNOcQy88TSqaBni2mEeOLZcKk1oj0VJqmEZmpKqFk+pl1fIEOPBExTVgqfU6EMNiVOoqQTudQSElNpjNlHz8lN2XX02Q6U2YqTY0wBDCRZErtSm2lARgShsl0puxUWkqnXoQSJpFM6V3pghAm0pkyutIFIUyiM2V1pYtBmERnGhaG2RM25gdkd6WLQTh/Z/r8zhOGFosFIJz/pr6776VhTdsiECbQtoUsLRaAMInFRWhfmjVhMjumYbkmY8KkNkyfNzLdqWHv0pQSu5R/9IkVjFkSvhcz4P8BsdVhWkNE2JMAAAAASUVORK5CYII=" width="60" >
      <span class="name">pointlessjon</span>
    </section>
    <section class="content">
      <p>@jurus, qual melhor investimento com liquidez diária pra Naty?
</p>
    </section>
  </li>
    
    <li class="comment ">
    <section class="author">
      <img class="photo" src="http://bot.jurusdigital.com.br/assets/images/jurus-logo.svg" width="45px" height="45px">
      <span class="name">jurus</span>
    </section>
    <section class="content content-jurus">
      <p>Com liquidez diária eu destaco três. 
</p>
    </section>
  </li>
    
    <li class="comment ">
    <section class="author">
      <img class="photo" src="http://bot.jurusdigital.com.br/assets/images/jurus-logo.svg" width="45px" height="45px">
      <span class="name">jurus</span>
    </section>
    <section class="content content-jurus">
      <p>Primeira opção abaixo você encontra se for cliente da Órama, rendendo hoje 10% ao ano, mas com espectativa de está rendendo uns 12% no final como você pode ver no gráfico. Clica nos cards pra você ver mais opções.
</p>
    </section>
  </li>
    
    <li class="comment invest-grid">   
    <div class="group">
      <div class="item" style="background-color:#555">
          <div class="item-taxa">            
             <h3>CDB</h3>
            <h5 class="emissor">BANCO PAN</h5> 
             <h5 class="taxa">118% CDI</h5>  
            <hr>
             <h5>vencimento</h5>
            <h5>20/11/2019</h5> 
          </div>
         
          <p class="descricao">* Opção com a maior rentabilidade disponível</p>
      
  </div>
      
      <div class="item" >
          <div class="item-taxa">
            
             <h3>CDB</h3>
            <h5 class="emissor">BANCO PAN</h5> 
             <h5 class="taxa">117% CDI</h5>  
            <hr>
             <h5>vencimento</h5>
            <h5>20/11/2020</h5> 
          </div>
         
          <p class="descricao">* Opção com o prazo mais prazo</p>
      
  </div><div class="item" style="background-color:#555">
          <div class="item-taxa">
            
             <h3>CDB</h3>
            <h5 class="emissor">BANCO PAN</h5> 
             <h5 class="taxa">116% CDI</h5>  
            <hr>
             <h5>vencimento</h5>
            <h5>20/11/2019</h5> 
          </div>
         
          <p class="descricao">* Opção com o melhor rating</p>
      
  </div>
</ul>
</div>
  
  
</div>

<footer>
  
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gugaime/a-pen-by-gustavo-gXXqyV */
body {
  padding: 0;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
}
header {
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, #306ab2 0%, #00e1ed 70%, #00e1ed 70%);
}
header h1 {
  margin: 0;
  display: inline-block;
  position: absolute;
  left: 43%;
  top: 30px;
  color: #fff;
  font-size: 1.2rem;
}
hr.hr-header {
  margin: 0;
  border: 1px solid #ccc;
}
nav {
  width: 60px;
  position: fixed;
  top: 40%;
  left: 10px;
  cursor: pointer;
  text-align: center;
}
nav .nav-item {
  background: #00cdac;
  border: 1px solid #888;
  border-radius: 50%;
  padding: 5px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  margin: 5px auto;
  color: white;
}
.main {
  width: 1000px;
  background-color: #ffffff;
  margin: 10px auto;
  border-radius: 15px;
  position: relative;
}
.main .main-content {
  padding: 25px;
}
.comments {
  margin: 0px auto;
  padding: 0;
}
.comments .comment-user {
  text-align: right;
}
.comments .comment {
  list-style: none;
  padding: 0 0 30px 60px;
  position: relative;
  color: #444;
}
.comments .comment .author {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  text-align: center;
  white-space: nowrap;
}
.comments .comment .author .name {
  color: #ffffff;
  display: block;
  font-size: .75em;
}
.comments .comment .author .photo {
  @include drop-shadow;
  border: 0;
}
.comments .comment .content {
  @include drop-shadow;
  padding: 0.5em;
  border-radius: .5em;
  position: relative;
  display: inline-block;
}
.comments .comment .content p {
  margin: .5em 0;
}
.comments .comment .content-user {
  @include drop-shadow;
  padding: .25em 1em;
  border-radius: .5em;
  background: #eee;
  position: relative;
  display: inline-block;
  background-color: white;
  border: solid 1px #aaa;
}
.comments .comment .content-user p {
  margin: .5em 0;
}
.comments .comment .content-image {
  @include drop-shadow;
  padding: 0;
  position: relative;
  width: 300px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4), 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 4px 2px -2px rgba(0, 0, 0, 0.22);
  border-radius: 5px 5px 5px 5px;
}
.comments .comment .content-image .descricao {
  border-radius: 5px;
  background: #1976D2;
  border: 1px solid #1976D2;
  color: white;
}
.comments .comment .content-image .descricao h4 {
  margin: 15px;
  font-size: 1.1rem;
}
.comments .comment .content-image .descricao h5 {
  margin: 15px;
  font-weight: normal;
}
.comments .comment.you {
  padding: 0 0em 2em 0;
}
.comments .comment.you .author {
  left: auto;
  right: 0;
  text-align: left;
}
.comments .comment.you .content:before {
  left: auto;
  right: -0.95em;
  border-right: 1em solid transparent;
  border-left: 0;
}
.comments .content-jurus {
  background-color: #eee;
}
.group {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 220px;
  width: 220px;
  background: linear-gradient(to bottom, #fff, #ddd);
  margin: 15px;
  border: 1px solid #eee;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #666;
  border-radius: 6px;
}
.item-taxa {
  height: 120px;
  width: 100%;
  position: relative;
  text-align: center;
}
.item-taxa h3 {
  margin-bottom: 0px;
}
.item-taxa h4 {
  margin: 5px;
  font-size: 16px;
}
.item-taxa h5 {
  margin: 0px;
  font-size: 14px;
  font-weight: normal;
}
.item-taxa h5.taxa {
  color: #CDDC39;
  margin-bottom: 15px;
  background-color: #777;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: bold;
}
.item-taxa hr {
  width: 25px;
  border: 1px solid #ddd;
}
.item-taxa h5.emissor {
  color: #444;
  margin-bottom: 10px;
  font-size: 10px;
}
.item-image {
  height: 120px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
  text-align: center;
}
.itemTitle {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
h4 {
  font-size: 12px;
  margin: 10px;
}
p.descricao {
  font-style: italic;
  font-size: 12px;
  margin: 30px 10px;
  color: #FF5722;
}
.item:hover {
  cursor: pointer;
  transform: scale(1.025);
  background-color: #ddd;
}
.input-bar {
  border-radius: 0 0 15px 15px;
  width: 100%;
  height: 80px;
  background-color: #C4C4C4;
  position: absolute;
  bottom: 0;
}
footer {
  width: 100%;
  height: 80px;
  background-color: #666;
}

Comments