The Deviant Blog: Designing your door page

At DeviantLives you have a lot of artistic freedom on the design of your room door. You can use a combination of HTML, CSS, and JavaScript to enhance the look and feel of your room door.

Lets start with some basics by providing a template for a simple room door where we add

Background color
Font color
A picture (centered)
A title (Centered)
Some Text (Centered)

<html>
<head>
<style>
body {
  background-color:black; /*background color for the entire page*/
  color:white;            /*font color for the entire page*/
}
h1 {
  color:red;             /*font color for the Heading*/
  font-weight:bold;      /*Making the Heading bold*/
}
/* Mobile Entry Page Styles */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        padding: 20px 16px;
    }
    
    /* Mobile-friendly checkboxes */
    input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important;
    }
    
    /* Touch-friendly labels */
    label {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 8px 0 !important;
        cursor: pointer !important;
        font-size: 16px !important;
    }
    
    /* Better buttons */
    .cssButton, input[type="submit"], input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }
    
    /* Better text inputs */
    input[type="text"], input[type="password"] {
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    
    /* Focus indicators */
    input:focus, button:focus {
        outline: 2px solid #4CAF50 !important;
        outline-offset: 2px !important;
    }
}
</style>
</head>
<body>
<center>  <!-- In this case I want everything centered -->
<h1>
My Room Name or anything you want for this top line/heading.  Or simply remove this.
</h1>

 <!-- I may want an image or so -->
<br><img src="[Some image URL here]" />
<br><br><span>Here is some text and here are some rules for my room</span>
<span>

<br><br>
<br> Rule 1 
<br> Rule 2
</span>
</center>
</body>
</html>

This should get you started. Here is an example of this code being used: Exp Lab

The Deviant Blog

DeviantLives

Saturday, February 15, 2025

Designing your door page

No comments:

Post a Comment