diff options
| author | xengineering <me@xengineering.eu> | 2021-09-04 18:14:59 +0200 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-09-04 18:14:59 +0200 |
| commit | f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412 (patch) | |
| tree | 0da5d2f32795315ab1aaa326e1cb3bf0de5ef16c | |
| parent | 19db808d938d2755764c728dcea1573ef34708fc (diff) | |
| download | libweb-f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412.tar libweb-f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412.tar.zst libweb-f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412.zip | |
Add Container Element
| -rw-r--r-- | css/xengineering.css | 25 | ||||
| -rw-r--r-- | html/template.html | 12 |
2 files changed, 37 insertions, 0 deletions
diff --git a/css/xengineering.css b/css/xengineering.css index 18bfbf7..0224dc1 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -19,6 +19,10 @@ main { background-color: white; } +h1 { + text-align: center; +} + a { text-decoration: none; color: blue; @@ -62,6 +66,27 @@ pre { border-radius: 5px; } +main div { + color: black; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + padding: 10px; + border-radius: 5px; +} + +main div:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +main div h3 { + margin-top: 0px; + text-align: center; +} + +main div p { + margin-bottom: 0px; + text-align: center; +} + /******************************************************************************/ diff --git a/html/template.html b/html/template.html index 9c1b5a8..eaaf9e7 100644 --- a/html/template.html +++ b/html/template.html @@ -25,12 +25,24 @@ <main> <h1>libweb</h1> + <p>A repository with reusable components for web development.</p> + <p>This is a link to <a href="https://example.com">example.com</a>.</p> + + <p>Have a look at this beautiful code:</p> <pre><code>#!/usr/bin/python3 print("This is just some example code!") </code></pre> + + <p>Sometimes it is quite nice to put things into containers:</p> + <a href="https://xengineering.eu"> + <div href="https://xengineering.eu"> + <h3>This is a Container</h3> + <p>Containers are very good.</p> + </div> + </a> </main> <script> |