How to add text to the sliding doors?-CodePudding

Here was my attempt: https://jsfiddle.net/p872350m/1/

I am trying to add text to the sliding curtain doors, how exactly do I do that?

The text is supposed to flow or slide with the curtains and it does not.

so that the text stays attached to the sliding doors.

I did something, or some things wrong or incorrectly.

How would that be done?

I tried doing it here but what I did does not work, or is not working.

The first issue I noticed is that the text does not stay in the middle, when the window gets bigger and smaller.

The second issue is that the text does not split apart with the sliding doors.

Would I need to attach half the text to one door, then then the other half to the other?

.panel-left p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: right;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-left p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}

.panel-right p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  font-family: 'Roboto', sansleftserif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-right p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}

<div >
        <p>added text to</p>
      </div>
      <div >
        <p>the curtain player.</p>
      </div>

CodePudding user response：

If I understood this correctly you want the text to move with your curtains to open. In that case, you can split your text in two parts and give each part f.e the left curtain text to be at the flex-end of its parent's justify-content, and the right curtain text to be at the flex-start of its parent's justify-content. And after this you move the whole parent to open

CodePudding user response：

.panel-left p {
   position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: right;
  text-align: right;
  font-family: 'Roboto', sansleftserif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}


.panel-right p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  font-family: 'Roboto', sansleftserif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

this is the css code for the panel-right and left that makes the paragraphs stay like that

  <div >
    <p>the </p>
  </div>
  <div >
    <p>curtain player.</p>
  </div>

and the panels' text is separated in two pieces (correct me if i misunderstood your question)