tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Gradiend background in title home collection

This commit is contained in:
Fabiano Alencar 2018-05-11 12:16:20 -03:00
parent bbaf3e9c77
commit 8485130a4b
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/scss/_home-collection.scss
View File

@ -1,14 +1,21 @@
.t-collection--background-title{
position: absolute;
background: linear-gradient(to bottom, transparent 0%, black 126%);
width: 100%;
transform: translate3d(0, -100%, 0);
height: 172px !important;
}
.t-collection--info {
.t-collection--info-img {
max-width: 160px;
max-height: 160px;
@media screen and (min-width: 992px){
transform: translate3d(0,-50%,0);
}
.t-collection--info-img {
max-width: 160px;
max-height: 160px;
@media screen and (min-width: 992px){
transform: translate3d(0,-50%,0);
}
.t-collection--info-title {
@media screen and (min-width: 992px){
transform: translate3d(0,-120%,0);
}
}
.t-collection--info-title {
@media screen and (min-width: 992px){
transform: translate3d(0,-120%,0);
}
}
}

3
src/header-homecollection.php
View File

@ -2,13 +2,14 @@
//Header with banner and menu
get_header('banner'); ?>
<div class="t-collection--background-title p-5"></div>
<div class="container-fluid">
<div class="row t-collection--info ml-sm-5">
<div class="col pr-0">
<img src="http://www.fabianoalencar.esy.es/rosto.png" class="t-collection--info-img rounded-circle img-fluid d-none d-md-block">
</div>
<div class="col-10 pl-0">
<h2 class="mt-3 mt-md-0 t-collection--info-title">Title</h2>
<h2 class="mt-3 mt-md-0 t-collection--info-title text-white">Title</h2>
<div class="d-flex justify-content-between container ml-0 pl-0">
<div>Description of collection</div>
<div>