Tutorials: Unterschied zwischen den Versionen
Aus wiki.kometin.at
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| (46 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| Zeile 5: | Zeile 5: | ||
<style> | <style> | ||
.tutorial-container { | .tutorial-container { | ||
margin-left: | margin-left: 11rem; | ||
width: 800px; | width: 800px; | ||
height: | height:300px; | ||
display:flex; | display:flex; | ||
flex-direction:row; | flex-direction:row; | ||
justify-content:center; | justify-content:center; | ||
gap: | gap:15px; | ||
align-items:flex-start; | align-items:flex-start; | ||
flex-wrap:wrap; | flex-wrap:wrap; | ||
align-content: flex-start; | align-content: flex-start; | ||
background-image: url("https://wiki.kometin.at/images/b/b8/Polotno.png"); | |||
background-size: cover; | |||
} | } | ||
.card { | .card { | ||
border: | |||
margin- | margin-top: 30px; | ||
padding: 15px; | |||
border: solid white 3px; | |||
border-radius: 50%; | |||
} | |||
@media screen and (max-width: 80em) | |||
{ | |||
.tutorial-container { | |||
margin-left: 0; | |||
width: 100%; | |||
height: 800px; | |||
} | |||
} | |||
.card a { | |||
color: white; | |||
width: 100%; | |||
height: 100%; | |||
} | } | ||
.card:hover { | |||
border: yellow solid 2px; | |||
} | |||
.card a:hover { | |||
color: yellow; | |||
} | |||
.tutorial-header { | |||
text-align: center; | |||
margin-top: 30px; | |||
padding: 15px; | |||
border: solid yellow 3px; | |||
border-radius: 50%; | |||
font-size: 20px; | |||
border-radius: 50%; | |||
width: 150px; | |||
margin-left: 27rem; | |||
margin-bottom: 1rem; | |||
} | |||
</style> | </style> | ||
<div class="tutorial-header"> | |||
Unsere Tutorials | |||
</div> | |||
<div class="tutorial-container" > | <div class="tutorial-container" > | ||
<div class="card"> | <div class="card"> | ||
| Zeile 50: | Zeile 92: | ||
<a href="https://wiki.kometin.at/Blogbeitrag-tutorial">Blog</a> | <a href="https://wiki.kometin.at/Blogbeitrag-tutorial">Blog</a> | ||
</div> | </div> | ||
<div class="card"> | |||
<a href="https://wiki.kometin.at/naehen">Nähen</a> | |||
</div> | |||
<div class="card"> | |||
<a href="https://wiki.kometin.at/monatsuebersicht">Monatsübersicht</a> | |||
</div> | |||
</div> | </div> | ||
</html> | </html> | ||
