Created
July 26, 2019 17:36
-
-
Save edgabaldi/ffb509cfbc567d30147803d9d38131ec to your computer and use it in GitHub Desktop.
My card
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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