Html

HTML - Center Div

Code

3 Ways to Center a < div >

Credits to https://twitter.com/BilliCodes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering a Div - Three Methods</title>
    <style>
        .container {
            height: 100vh; /* Full height */
            position: relative; /* Required for absolute positioning */
            background-color: #f0f0f0;
        }

        /* (1) Flexbox Method */
        .flexbox {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* Full viewport height */
        }

        /* (2) Grid Method */
        .grid {
            display: grid;
            place-items: center; /* Center using grid */
            height: 100vh; /* Full viewport height */
        }

        /* (3) Absolute Positioning Method */
        .absolute {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Offset to center */
        }      
    </style>
</head>

<body>
    <div class="container">
        <!-- Flexbox Method -->
        <div class="centered flexbox">Centered with Flexbox</div>

        <!-- Grid Method -->
        <div class="centered grid">Centered with CSS Grid</div>
        
        <!-- Absolute Positioning Method -->
        <div class="centered absolute">Centered with Absolute Positioning</div>
    </div>
</body>

</html>
Any Comments ?

sha256: 85678db9aeded3bf6ba6bce5bf56014023c834cdd99b62f0d8427f3c12a65360

HTMX & Nginx

OpenBSD

Little Test with HTMX & Nginx

recently, i saw the Keynote - “Full-Stack Python” (Andy “Pandy” Knight) and i read an article about html & websockets. So I thought why not give it a try?

Preview

Requirements

the usual stuff:

  • Virtual Machine (here: OpenBSD VM)
  • FQDN Pointing to your Box
  • SSL Cert

Webroot

on your webserver, create a new webroot wherever you have your pages located.

su - webmaster
mkdir -p /var/www/virtual/your.page.de
cd /var/www/virtual/your.page.de/

main.py

the main part of the python code …

HTMLQ

OpenBSD

stumpled upon some thing cool, htmlq! It’s like jq, but for HTML.

Installation Rust

htmlq need rust. so, let’s install rust first.

doas pkg_add rust

cat << 'EOF' |doas tee -a /etc/profile
# Rust/Cargo
export PATH=$PATH:/root/.cargo/bin

EOF
. /etc/profile

Install HTMLQ

doas cargo install htmlq

some Examples

curl -s https://www.openbsd.org | htmlq --attribute href a |head

Example

user@nixbox$ curl -s https://www.openbsd.org | htmlq --attribute href a |head
goals.html
plat.html
security.html
crypto.html
events.html
innovations.html
faq/faq4.html#Download
anoncvs.html
https://cvsweb.openbsd.org/
https://github.com/openbsd

curl --silent https://www.nytimes.com | htmlq a --attribute href -b https://www.nytimes.com

Example

Hugo Forms PHP

Blog

Wanna add some simple forms and process the Content with PHP ?

Add RawHTML Template

if not yet done

mkdir layouts/shortcodes/
cat << 'EOF' > layouts/shortcodes/rawhtml.html
<!-- raw html -->
{{.Inner}}
EOF

Create Script

cat << 'EOF' > static/welcome.php
<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>

</body>
</html>
EOF

Create new Post and add rawhtml

without " " between { and {

hugo new content/post/rawtest.md

vim content/post/rawtest.md

{ {<rawhtml>} }
<form action="/welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
{ {</rawhtml>} }

Example

Just a small Form Example

Name:
E-mail:

HugoIO Templates

Blog

Custom Template Stuff

mkdir -p layouts/shortcodes

cat << 'EOF' > layouts/shortcodes/date.html
{{ now.Format "2006-01-02 03:04:05" }}
EOF

Insert Code in Template

current date ? { {< date >} }

Result ?

current date ?? 2024-10-22 06:45:09

Add RawHTML

Create Template

cat << 'EOF' > layouts/shortcodes/rawhtml.html
<!-- raw html -->
{{.Inner}}
EOF

Add Code

{ {< rawhtml >} }
  <p class="speshal-fancy-custom">
    This is <strong>raw HTML</strong>, inside Markdown.
  </p>
{ {< /rawhtml >} }

Result ?

This is raw HTML, inside Markdown.