hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

layout with isotope

Browse source
This commit is contained in:
Set Sakrecoer 2019-11-05 11:31:36 +01:00
parent 20ebba4337
commit 864b1ccc7f
4 changed files with 85 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

112
_sass/isotope.scss
View file

@ -47,118 +47,6 @@
border-radius: 0 0.5em 0.5em 0;
}
/* ---- isotope ---- */
.grid {
// border: 1px solid #333;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 1180px;
margin: auto;
}
/* clear fix */
.grid:after {
content: '';
clear: both;
}
/* ---- .element-item ---- */
.element-item {
flex: 1 0 250px;
height: 600px;
width: 300px;
background-repeat: no-repeat;
background-color: #ff00ff;
background-position-x: center;
background-position-y: -20px;
background-size: 100%;
transition: .2s ease-in-out;
border-radius: 3px;
margin: 20px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-self: flex-end;
justify-items: flex-start;
flex-direction: row-reverse;
.cartouche {
background-color: #f4f4f4;
width: 100%;
height: 50%;
border-radius: 3px;
padding: 0 0 0 0;
}
h4, h5, p {
flex: 0 0 auto;
margin: 10px;
padding: 5px;
border-radius: 3px;
}
h4 {
font-size: 1.5em;
background-color: #fff;
}
h5 {
font-size: 1em;
background-color: #fff;
}
p, a {
font-size: 1em;
}
a.cta {
border-radius: 100px;
padding: 10px 20px;
background: linear-gradient(270deg, #ff00ff, #426a00);
background-size: 400% 400%;
color: #fff;
-webkit-animation: AnimationName 15s ease infinite;
-moz-animation: AnimationName 15s ease infinite;
animation: AnimationName 15s ease infinite;
font-weight: 700;
text-decoration: none;
transition: 1s ease;
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
}
a:hover.cta {
background: #fff;
color: #ff00ff;
text-shadow: none;
}
}
.element-item>* {
margin: 0;
padding: 0;
}