Help Pretty Please-- How to put text in my div box - Pictures for reference!

Site URL: https://sphere-flamingo-wkge.squarespace.com/

I designed a text background in Photoshop and am trying to make it a reality in ccs (I'm using it now on the first page of my site as a background image (password: me)  but I know it would work so much better if I used CSS instead. 

I'm using this code but when I try to put text in the div it ruins everything. 

<div class="about"></div>

.about {
  height: 500px;
  width: 500px;
  background-color: #4397b5;
}

.about::after {
  content: " ";
  position: absolute;
  transform: translate3d(5px, 5px, 0);
  height: 500px;
  width: 500px;
  border: 1px solid black;
  box-sizing: border-box;
}
 

I cannot figure out what I'm doing wrong.  Can anybody help me? 

Thank you in advance! 

2 hours ago, andreallevin said:

I cannot figure out what I'm doing wrong.  Can anybody help me? 

There are some issues with your HTML. Remove, make a copy somewhere, the current HTML and try the following.

<div class="this" style="width: 500px; padding: 85px; font-family: Arial; font-size: 20px; color: #f7e1cd; display: inline-block;">

  <p>
  
    Twenty-three-year-old Betsy Moran has a way with men. She scores a date with
    eligible Dr. Paul Elliott, and then one with widowed surgeon Dr.
    Stevenson—never mind that he’s twice her age!
    
    </p>
    
  <p style="font-style : italic; font-weight : bold; text-align : center;">
  
    “I’m just sick that I lost my temper and shot you!”
    
    </p>
    
  </div>

Let us know how it goes.

thank you! I'm going to try this. I let you know what happens. You're a good man! 

Ok I don't think I explained my issue clearly. The issue is on this page:

https://sphere-flamingo-wkge.squarespace.com/new-index (passwork:me)

I want the text to stay within the stroke but it only pushes the stroke out of whack. 

Is there anyway I can put text IN this div? 

'm using this code but when I try to put text in the div it ruins everything. 

<div class="about"></div>

.about {
  height: 500px;
  width: 500px;
  background-color: #4397b5;
}

.about::after {
  content: " ";
  position: absolute;
  transform: translate3d(5px, 5px, 0);
  height: 500px;
  width: 500px;
  border: 1px solid black;
  box-sizing: border-box;
}
 

2 hours ago, andreallevin said:

Ok I don't think I explained my issue clearly.

If I gather correctly. You are going for an effect similar to the following?

If I recall correctly ::before and ::after have some differences in how they behave compared to real elements on the page. Hence the unexpected behaviour.

Since you've created the base for this effect in a code block I suggest using divs to handle the text and stroke. If I'm on the right track let me know and I'll post the code I came up with.

And please, other folks with ideas please feel free to pitch in!

That is correct! I can't wait to see your code! THANK YOU!

<style>

  .about {
  
    --box-size : 500px;
    --stroke-offset : 5px;
    --text-offset : 1em;
    
    }
    
  .about-stroke {
  
    border : 1px solid black;
    height : calc( var( --box-size ) + var( --text-offset ) );
    position : absolute;
    transform : translate( var( --stroke-offset ), var( --stroke-offset ) );
    width : calc( var( --box-size ) + var( --text-offset ) );
    
    }
    
  .about-text {
  
    background-color : #4397b5;
    height : var( --box-size );
    padding-left : var( --text-offset );
    padding-right : var( --text-offset );
    padding-top : var( --text-offset );
    width : calc( var( --box-size ) - var( --text-offset ) );
    
    }
    
  </style>

<div class="about">

  <div class="about-stroke">
  
    </div>
    
  <div class="about-text">
    
    The text is going on the outside of the stroke and pushing it over. Is there way to get it to stay inside it?
    
    </div>
    
  </div>

Let us know how it goes.

thank you so much for this! I'm going to try today (I had another project and now I'm back to this one) you are a coding saint!! 

Hey, I couldn't get this to work -- I'm sure I'm doing something wrong. -- is some of the code supposed to be in the header because it has java script? I'm sure you don't have time to help me but if you do I'd be so grateful. I've got to stop designing things that I can't achieve. 

There is no JavaScript. It is all CSS. It needs to go into a code block like your previous code.

Mr. Credon.

You have made my dreams come true. I cannot thank you enough for this. It is perfect. 

You are amazing. I hope your day is as great as you just made mine!!