verstanden

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.

Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung

Twinix Design

Free moziloCMS Layouts

mozilo Syntax Syntax Vorlage 1

Card1 Syntax Vorlage

Bei dieser Syntax wird der Inhalt des Covers über {DESCRIPTION}, und der Inhalt der hover Seite über {VALUE} eingetragen.

Beispiel: [card1=Twinix Design hover Infobox|Lorem ipsum dolor.....]

<h3> und Titel könnte man z.B auch durch ein Bild ersetzen.

Beispiel: [card1=[bild|@=Kategorie:Bild.jpg=@]|Lorem ipsum dolor.....]

Twinix Design hover Infobox

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

Read More

*solltest du in deinem Design nicht mit Flexbox arbeiten musst du im CSS Code display: flex; durch display: block; ersetzen.

Falls du nicht weist wie du eigene Syntax Elemente in mozilo anlegst findest du eine Anleitung auf der ofiziellen Seite.

Tipps und Tricks » Benutzerdefinierte Syntaxelemente

CSS Code

/* card1 syntax */
.card1-container{
width: 1000px;
position: relative;
display: flex;
justify-content: space-between;
}

.card1-container .card1{
position: relative;
cursor: pointer;
}

.card1-container .card1 .face{
width: 300px;
height: 200px;
transition: 0.5s;
}

.card1-container .card1 .face.face1{
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}

.card1-container .card1:hover .face.face1{
background: #ff0057;
transform: translateY(0);
}

.card1-container .card1 .face.face1 .card1-content{
opacity: 0.2;
transition: 0.5s;
}

.card1-container .card1:hover .face.face1 .card1-content{
opacity: 1;
}

.card1-container .card1 .face.face1 .card1-content img{
max-width: 300px;
margin: 0;
padding: 0;
}

.card1-container .card1 .face.face1 .card1-content h3{
margin: 10px 0 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 1.5em;
}

.face.face {
padding: 10px;
}
.card1-container .card1 .face.face2{
position: relative;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
transform: translateY(-100px);
}

.card1-container .card1:hover .face.face2{
transform: translateY(0);
}

.card1-container .card1 .face.face2 .card1-content p{
margin: 0;
padding: 0;
}

.card1-container .card1 .face.face2 .card1-content a{
margin: 15px 0 0;
display:inline-block;
text-decoration: none;
font-weight: 900;
color: #333;
padding: 5px;
border: 1px solid #333;
}

.card1-container .card1 .face.face2 .card1-content a:hover{
background: #333;
color: #fff;
}

Syntax Code

card1 = <div class="card1-container"><div class="card1"><div class="face face1">
<div class="card1-content"><h3>{DESCRIPTION}</h3></div></div>
<div class="face face2"><div class="card1-content">{VALUE}</div></div></div></div>

1 2 3 4

Verpasse nichts mehr! und folge moziloCMS