diff options
| author | xengineering <me@xengineering.eu> | 2021-11-27 14:14:51 +0100 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-11-27 14:14:51 +0100 |
| commit | 0de11573b0a4b81d34e9b5005341e746cb4777f2 (patch) | |
| tree | d1a5d7eaae8409b16869a78433a6b3171fdca771 | |
| parent | 73f855d464c034bb832a3093b38e406ec24767f9 (diff) | |
| download | libweb-0de11573b0a4b81d34e9b5005341e746cb4777f2.tar libweb-0de11573b0a4b81d34e9b5005341e746cb4777f2.tar.zst libweb-0de11573b0a4b81d34e9b5005341e746cb4777f2.zip | |
Implement .card and footer
| -rw-r--r-- | css/xengineering.css | 25 | ||||
| -rw-r--r-- | html/test_simple.html | 27 |
2 files changed, 51 insertions, 1 deletions
diff --git a/css/xengineering.css b/css/xengineering.css index a931a02..4a322ed 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -181,6 +181,27 @@ pre { border-radius: 0.5em; } +footer { + height: 3vh; + background-color: rgba(0,0,0,0); +} + +.card { + margin-top: 1vh; + margin-bottom: 1vh; + padding: 1em; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + border-radius: 0.5em; +} + +.card-first-item { + margin-top: 0px; +} + +.card-last-item { + margin-bottom: 0px; +} + /******************************************************************************/ @@ -203,6 +224,10 @@ body { padding-right: 20vw; } +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + } /******************************************************************************/ diff --git a/html/test_simple.html b/html/test_simple.html index 7f01842..f771b29 100644 --- a/html/test_simple.html +++ b/html/test_simple.html @@ -137,7 +137,32 @@ echo "I am $(whoami)" </pre> <!-- .card --> - <div class="card"></div> + <div class="card"> + <h3 class="card-first-item">This is a Card</h3> + <p>Lorem ipsum dolor sit amet, consetetur sadipscing + elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et + justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod + tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. + Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum + dolor sit amet.</p> + <h3>This is a Card</h3> + <p class="card-last-item">Lorem ipsum dolor sit amet, consetetur sadipscing + elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et + justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod + tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. + Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum + dolor sit amet.</p> + </div> + + <footer></footer> <script src="../js/xengineering.js"></script> |