offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 09:00:28 +01:00
Code Issues Projects Releases Wiki Activity

cards

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-08-20 16:42:19 +02:00
parent 61316b8a6b
commit b6970f306d
2 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
homepage/theme/templates/base.html
View File

@ -83,7 +83,31 @@
</div> </div>
<div class="feature"> <div class="feature">
<div class="container-full"> <div class="container-full">
FEATURE
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="cardtext">
Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="cardtext">
Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="cardtext">
Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="cta-top"> <div class="cta-top">

45
styles/index.css
View File

@ -305,7 +305,7 @@ nav ul li ul li a {
height: 70px; height: 70px;
width: 70px; width: 70px;
} }
/* Mobile Styles */
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.nav-mobile { .nav-mobile {
display: block; display: block;
@ -339,7 +339,7 @@ nav ul li ul li a {
*/ */
} }
} }
/* Desktop Styles */
@media screen and (min-width: 961px) { @media screen and (min-width: 961px) {
.nav-list { .nav-list {
display: block !important; display: block !important;
@ -386,5 +386,44 @@ nav ul li ul li a {
/* --------------------------------------------------- /* ---------------------------------------------------
IMAGES CARDS
----------------------------------------------------*/ ----------------------------------------------------*/
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
}
.card-body {
flex: 1 1 auto;
text-align: center;
}
.card-deck {
display: flex;
flex-direction: column;
}
.card-deck .card {
margin: 0 0 15px 0;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
/* Card */
.card-deck {
flex-flow: row wrap;
margin: 0 -15px 0 -15px;
}
.card-deck .card {
display: flex;
flex: 1 0 0%;
flex-direction: column;
margin: 0 15px 0 15px;
}
}