Web Goodies

Tips

Ctrl+F "$" in the HTML code to find all the places you'll need update the text that appears on the page.
Don't forget to update all the URLs in the CSS to point to the images on your account/server!

Flexible Purple Windows

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>$Your Page Title Here</title>
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link href="/FlexiblePurpleWindows.css" rel="stylesheet">
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  </head>

<body>
  
  <div class="WindowContainer">
    
    
    <div class="Window WindowSettings1">
      
      
      <div class="WindowTitle-Left">
      </div>
      <div class="WindowTitle WindowTitle-Background">
        $Insert your window's title here!
      </div>
      <div class="WindowTitle-Right">
      </div>
      
      
      <div class="WindowBody-Left">
      </div>
      
      
        
        <div class="WindowBody-Content WindowBody1-Content-Height">
          $Insert your main content here!
        </div>
      
      
      
        
        
        
      
      
      <div class="WindowBody-Right">
      </div>
      
      
      <div class="WindowBottom-Left">
      </div>
      <div class="WindowBottom-Background">
      </div>
      <div class="WindowBottom-Right">
      </div>
    </div>
    
    
    <div class="WindowPadding2"></div>
    
    
    <div class="Window WindowSettings2">
      
      <div class="WindowTitle-Left">
      </div>
      <div class="WindowTitle WindowTitle-Background">
        $Insert your window's title here!
      </div>
      <div class="WindowTitle-Right">
      </div>
      <div class="WindowBody-Left">
      </div>
      
      
        
        
      
      
      
      
        
        <iframe src="/$YourPageNameHere.html" frameborder="0" scrolling="yes" name="frame2" class="mainframe">
        </iframe>
        
      
      
      <div class="WindowBody-Right">
      </div>
      
      <div class="WindowBottom-Left">
      </div>
      <div class="WindowBottom-Background">
      </div>
      <div class="WindowBottom-Right">
      </div>
    </div>
  </div>
  </body>
</html>

CSS

@media (max-width: 768px) {
/* MOBILE SETTINGS
  Feel free to adjust all the numbers
  (except the max-width: 768px in the
  media query)and stylings to your liking! */
  
  /* Overall window width for mobile.
    Adjust the width and add padding, margins,
    etc. to your heart's content. */
  .Window {
    width: 90%;
  }
    
  /* Settings for your first window for mobile.
    Adjust the margin and set width, padding, etc.
    to your heart's content. */
  .WindowSettings1 {
    margin-top: 155px;
  }
  
  /* Adjust the spacing between your first
    and second windows on mobile. */
  .WindowPadding2 {
    height: 10px;
  }
  
  /* Settings for your second window for mobile.
    Adjust the width and set margins, padding, etc.
    to your heart's content. */
  .WindowSettings2 {
    width: 90%;
  }
    
  /* Set the height for your iFrames for mobile.
    You may delete if you are not using iFrames
    for that particular window. For example, if
    you're using iFrames on your first window,
    but an overflow box on your second window,
    you would keep frame1 and delete frame2. */
    .frame1 {
      height: 275px;
      width: 100%;
    }
      
    .frame2 {
      height: 50px;
      width: 100%;
    }
  /* End of iFrame height settings on mobile. */
  
  /* Set the height for your overflow boxes
    for mobile. You may delete if you are not
    using overflow boxes for that particular
    window. For example, if you're using iFrames
    on your first window, but an overflow box on
    your second window, you would delete 
    WindowBody1-Content-Height and keep
    WindowBody2-Content-Height. */
    .WindowBody1-Content-Height {
      height: 275px;
    }
  
    .WindowBody2-Content-Height {
      height: 50px;
    }
  /* End of overflow box height settings for mobile. */
    
  /* You can keep adding windows! There is no third window in
    the HTML provided, but if you would add another window, you
    would include settings for WindowPadding3, WindowSettings3, 
    frame3 (or WindowBody3-Content-Height), etc. here. */
}
/* END OF MOBILE SETTINGS */

@media (min-width: 769px) {
/* DESKTOP SETTINGS
  Feel free to adjust all the numbers
  (except the min-width: 769px in the
  media query)and stylings to your liking! */
  
  /* Window positioning for desktop */
  .WindowContainer {
    position: absolute;
    top: 20px;
    left: 30px;
  }
  
  /* Overall window width for desktop.
    Adjust the width and add padding, margins,
    etc. to your heart's content. */
  .Window {
    width: 700px;
  }
  
  /* Settings for your first window for desktop.
    Adjust the margin and set width, padding, etc.
    to your heart's content. */
  .WindowSettings1 {
    margin: 0px;
  }
  
  /* Adjust the space between your first
    and second windows on desktop. */
  .WindowPadding2 {
    width: 20px;
    float: right;
  }
  
  /* Settings for your second window for desktop.
    Adjust the width and set positioning, padding,
    etc. to your heart's content. */
  .WindowSettings2 {
    width: 200px;
    float: right;
  }
  
  /* Set the height for your iFrames for desktop.
    You may delete if you are not using iFrames
    for that particular window. For example, if
    you're using iFrames on your first window,
    but an overflow box on your second window,
    you would keep frame1 and delete frame2. */
    .frame1 {
      height: 550px;
      width: 100%;
    }
    
    .frame2 {
      height: 250px;
      width: 100%;
    }
  /* End of iFrame height settings on desktop. */
  
  /* Set the height for your overflow boxes
    for desktop. You may delete if you are not
    using overflow boxes for that particular
    window. For example, if you're using iFrames
    on your first window, but an overflow box on
    your second window, you would delete 
    WindowBody1-Content-Height and keep
    WindowBody2-Content-Height. */
    .WindowBody1-Content-Height {
      height: 550px;
    }
    
    .WindowBody2-Content-Height {
      height: 250px;
    }
  /* End of overflow box height settings for desktop. */
  
  /* You can keep adding windows! There is no third window in
    the HTML provided, but if you would add another window, you
    would include settings for WindowPadding3, WindowSettings3, 
    frame3 (or WindowBody3-Content-Height), etc. here. */
}
/* END OF DESKTOP SETTINGS */

/* WINDOW RULES
Note: If your window titles are so long that they're running out of
the windows, adjust the font size for the WindowTitle class below.*/
.WindowTitle {
  color: #eae6f8;
  font-family: 'Inconsolata', monospace;
  font-size: 1.75em;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-shadow: 2px 2px 1px #15192b;
  padding-top: 15px;
  padding-left: 9px;
}

.Window {
  background: #191e33;
  filter: drop-shadow(0px 0px 5px #000000);
  display: inline-grid;
  grid-template-columns: 10px auto 10px;
  grid-template-rows: 58px auto 11px;
  gap: 0;
}

.WindowTitle-Left {
  background-image: url("/WindowTitle_Corner-Left.jpg");
}

.WindowTitle-Background {
  background-image: url("/WindowTitle_Background.jpg");
}

.WindowTitle-Right {
  background-image: url("/WindowTitle_Corner-Right.jpg");
}
    
.WindowBody-Left {
  background-image: url("/WindowBody_Left.jpg");
  background-size: cover;
}
    
.WindowBody-Content {
  border: solid 2px #191e33;
  overflow: auto;
  padding: 10px;
}

.WindowBody-Right {
  background-image: url("/layout/WindowBody_Right.jpg");
  background-size: cover;
}

.WindowBottom-Left {
  background-image: url("/layout/WindowBottom_Corner-Left.jpg");
  height: 11px;
}

.WindowBottom-Background {
  background-image: url("/layout/WindowBottom_Background.jpg");
  height: 11px;
}

.WindowBottom-Right {
  background-image: url("/WindowBottom_Corner-Right.jpg");
  height: 11px;
}

/* OPTIONAL: The following section is
  optional! It is the CSS I designed to
  complement the window's colors. You can
  edit or remove it as you wish. */
body {
  color: #eae6f8;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1.5em;
  
  background-color: #15192b;
  background-image: url("/DefaultSiteBackground.jpg");
  background-repeat: repeat-x;
}

h1 {
  color: #eae6f8;
  font-family: 'Inconsolata', monospace;
  font-size: 1.75em;
  font-weight: bold;
  letter-spacing: 0.1em;
}

a {
  color: #eae6f8;
  font-family: 'Signika Negative', sans-serif;
  text-decoration: none;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

a:hover {
  color: #3d95c5;
}

hr {
  margin-top: 20px;
}

Graphics
Click to download!
Or, manually download here.

Dialog Box

Like this! See? You can even put emojis in me 👾

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>$Your Page Title Here</title><meta charset="UTF-8">
    <meta charset="UTF-8">
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link href="/DialogBox.css" rel="stylesheet">
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  </head>
  
  <body>
    
    <div class="DialogBox">
      <div class="DialogBox-TopLeft">
      </div>
      <div class="DialogBox-Top">
      </div>
      <div class="DialogBox-TopRight">
      </div>
      
      <div class="DialogBox-Left">
      </div>
      <div class="DialogBox-Content">
        
        <span class="DialogBox-Text">
          $Insert your text here!
        </span>
      </div>
      <div class="DialogBox-Right">
      </div>
      
      <div class="DialogBox-BottomLeft">
      </div>
      <div class="DialogBox-Bottom">
      </div>
      <div class="DialogBox-BottomRight">
      </div>
    </div>
    
  </body>
</html>

CSS

/* Change the link hover color here. */
.DialogBoxLink:hover {
    color: #2a73a3;
}

.DialogBoxLink {
    color: #000000;
    text-decoration: none;
}

.DialogBox {
    display: inline-grid;
    grid-template-columns: 30px auto 30px;
    grid-template-rows: 30px auto 30px;
    gap: 0;
}

.DialogBox-TopLeft {
    background-image: url("/BorderCorner-Top-Left.png");
}

.DialogBox-Top {
    background-image: url("/Border-Top.png");
    
}

.DialogBox-TopRight {
    background-image: url("/BorderCorner-Top-Right.png");
    background-size: cover;
}
    
.DialogBox-Left {
    background-image: url("/Border-Left.png");
}
    
.DialogBox-Content {
    padding: 30px;
    background-color: #ffffff;
}

.DialogBox-Right {
    background-image: url("/Border-Right.png");
}

.DialogBox-BottomLeft {
    background-image: url("/BorderCorner-Bottom-Left.png");
    background-size: cover;
}

.DialogBox-Bottom {
    background-image: url("/Border-Bottom.png");
    }

.DialogBox-BottomRight {
    background-image: url("/BorderCorner-Bottom-Right.png");
}

@media (max-width: 768px) {
    .DialogBox-Text {
        font-family: 'Silkscreen', cursive;
        font-size: 3em;
        line-height: 1.2em;
        text-align: center;
    }
    
    .DialogBox {
        width: 90%;
    }
}

@media (min-width: 769px) {
    .DialogBox-Text {
        font-family: 'Silkscreen', cursive;
        font-size: 1.3em;
        line-height: 1.2em;
        text-align: center;
    }
}

Graphics
Click to download!
Or, manually download here.

My only request is no hotlinking! Please save all graphic assets you need and upload them to your own account/server. Thank you!

Tips

Flexible Purple Windows

Dialog Box