Day 7 - Halloween Coding Challenges 2023 - Python, HTML, and CSS

[simong1993]

🎃 Spooky Challenge - Day 7 🎃

Legend speaks of a haunted message, concealed by the spirits and only decipherable using a touch of Python and the allure of web styles.

The old tome reads:

A cryptic message, hidden so deep,
In Python's embrace, the secret it keeps.
With HTML and CSS, bring it to sight,
Decode the message, and show your might!

def encode_message(message):
    return ''.join([chr(ord(char) + 1) for char in message])

# A simple encoding for the message "hello1"
print(encode_message("hello1"))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Cryptic Message</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hidden-message">
        <!-- Insert the encoded message from Python here -->
    </div>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    background: url('https://png.pngtree.com/thumb_back/fh260/background/20230617/pngtree-halloween-wallpapers-and-backgrounds-for-laptop-or-desktop-image_2968567.jpg') no-repeat center center fixed;
    background-size: cover;
    color: red;
    text-align: center;
    padding-top: 50px;
}

.hidden-message {
    font-size: 2em;
    letter-spacing: 10px;
    user-select: none;  /* prevents the message from being easily copied */
}

Your tasks:

1. Run the Python code to obtain the encoded message.
2. Place this message in the HTML.
3. Use CSS to style this message creatively.
4. Manually decode the message to unveil its original form and the number it holds.

🔗 Useful Resource: W3Schools' CSS Text Effects to style the message.

🔗 Platform Suggestion: Use Repl.it for Python and CodePen for the HTML and CSS magic.

Spoiler: Day 7 Answer

Bravo, code whisperer! By uniting Python, HTML, and CSS, you've unveiled the spirits' secret!

Running the Python code produces the cryptic message "ifmmp2". Decoding it (simply by reversing the Python encoding process) reveals the word "hello1". The hidden number is thus "1".

The spirits of the Web Manor applaud your prowess in unveiling the cryptic message by mastering these three crafts.