Skip to content

Instantly share code, notes, and snippets.

@edgabaldi
Created July 26, 2019 17:36
Show Gist options
  • Save edgabaldi/ffb509cfbc567d30147803d9d38131ec to your computer and use it in GitHub Desktop.
Save edgabaldi/ffb509cfbc567d30147803d9d38131ec to your computer and use it in GitHub Desktop.
My card
.row{ margin: 10px; }
.col{ padding: 5px; }
.card{
border-radius: 4px;
background: #fff;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
transition: 0.1s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.1s box-shadow, 0.1s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
padding: 10px 80px 10px 10px;
cursor: pointer;
}
.card:hover{
transform: scale(1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}
.card img{
position: absolute;
top: 20px;
right: 15px;
max-height: 120px;
}
.card-movimento{
background-image: url(https://traderativo.com/wp-content/uploads/2019/07/movimento.png);
background-repeat: no-repeat;
background-position: right top;
background-size: 80px;
}
.card-mentoria{
background-image: url(https://traderativo.com/wp-content/uploads/2019/07/mentoria.png);
background-repeat: no-repeat;
background-position: right top;
background-size: 80px;
}
.card-operacao{
background-image: url(https://traderativo.com/wp-content/uploads/2019/07/operacao.png);
background-repeat: no-repeat;
background-position: right top;
background-size: 80px;
}
.card-actions{
border-top: 1px solid #CCC;
padding: 16px 24px;
position: relative;
}
.card h3{
font-size: 20px;
}
.card p{
line-height: 24px;
color: #616161;
}
<div class="row">
<div class="col">
<div class="card card-mentoria">
<h3>Ionic Native</h3>
<p>A curated set of ES5/ES6/TypeScript wrappers for plugins to easily add any native functionality to your Ionic apps.</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card-movimento">
<h3>Ionic Native</h3>
<p>A curated set of ES5/ES6/TypeScript wrappers for plugins to easily add any native functionality to your Ionic apps.</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card-operacao">
<h3>Ionic Native</h3>
<p>A curated set of ES5/ES6/TypeScript wrappers for plugins to easily add any native functionality to your Ionic apps.</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment