How do I get the words in black to fit around the word in red like in my design using css and html-CodePudding

enter code herereference photo to go along with question enter code heremy css enter code heremy hmtl

I was thinking maybe I'd have to break "Pages from a" "Love" and "Manifesto" into 3 separate chunks, but I don't know how to get "Pages from a" and "Manifesto" to fit around the word love like how I've designed it. I really don't want to use an image of it if I don't have to, I'd rather learn the proper way.

I'm new to coding and I tried to look around and figure this out on my own, but if I'm being honest I don't even know how to search for a solution or where to even start to go about this because I just don't know enough about the topic to know if what I'm seeing will even help.

Please help!

*{
    margin: 0;
    border: 1px solid black;
}

.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}

h1{

    color: black;
    font-family: fino;
    text-align: center;
}

.love{
    font-family: adorn-smooth-pomander, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: red;
}

 <div class=title>
        <h1>
            Pages from a <span >Love</span> 
            Manifesto 
        </h1>
    </div>  

    
        <h2>
            Devised by Dom Torrez | Department of Theatre Art
        </h2>

CodePudding user response：

Since the element .love is a child of the h1 you can position the .love absolutely and position relative on the h1. Then set the top and left position to position it relative to its parent element.

Add the h2 element to the title so flex can be used on title with flex-direction set to column. Repeat flex and column flex direction on h1 element so the children will stack. Wrap the first section in a span and give it a class so it can be nudged to the left 1rem. Style love element with cursive and love class. Then wrap the first letter of love in a span tag and give it a class so it can be enlarged using font-size.

h2 element style and add flex and justify-content: center, then further adjust with margin. Add padding to accommodate the love characters.

* {
  margin: 0;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  color: black;
  font-family: fino;
  display: flex;
  /* flex allows ease of centering elements */
  flex-direction: column;
  /* set flex direction as column */
  align-items: end;
  /* center items */
  position: relative;
  /* set position to relative */
  padding-left: 3.8rem;
  /* this makes space for the love characters */
  letter-spacing: -1px;
}

h2 {
  /* add flex to h2 element for centering */
  display: flex;
  justify-content: center;
  letter-spacing: -1px;
  font-size: .9rem;
  margin-left: 2rem;
  margin-top: -.5rem;
}

.big {
  font-size: 5rem;
}

.first {
  margin-right: 1rem;
}

.love {
  /* style font to similar of the logo */
  font-family: adorn-smooth-pomander, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: red;
  position: absolute;
  /* position absolute to remove element from page flow */
  top: -.7rem;
  /* top set to the top position of next element set to position relative */
  left: 0;
  /* left set to the left position of next element set to position relative */
  font-size: 4rem;
}

.cursive {
  /* helper class to style love */
  font-family: 'Dancing Script', cursive;
}

<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=Dancing Script&display=swap" rel="stylesheet">
<div class=title>
  <h1>
    <span >PAGES FROM A </span>
    <span >
      <span >L</span>ove
    </span> 
    MANIFESTO
  </h1>
  <h2>
    Devised by Dom Torrez | Department of Theatre Art
  </h2>
</div>

CodePudding user response：

First of all, i don't think you should do this in pure HTML/CSS at all.

The proper way to do it is probably using an svg or actually an Image.

But if you insist on doing it with CSS, here you go

* {
  margin: 0;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

h1 {
  color: black;
  font-family: fino;
  font-size: 2em;
  line-height: 1;
  text-transform: uppercase;

}

h2 {
  display: inline-block;
  font-size: 1em;
  margin-left: -50px;
}

.pages {
  margin-left: -40px;
}

.love {
  font-family: adorn-smooth-pomander, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  text-transform: initial;
  color: red;
  float: left;
}

.ove {
  display: inline-block;
  font-size: .45em;
  line-height: 0.5;
  transform: translateY(-20px);
}

 <div class=title>
   <h1>
     <span >Pages from a</span> <span >L<span >ove</span></span><br> Manifesto
   </h1>
 </div>


 <h2>
   Devised by Dom Torrez | Department of Theatre Art
 </h2>

I think the float was your missing puzzle piece to wrap the rest around the "Love". Now you have to change the position of the rest of the text with either negative margins or transfrom: translate. But again, i would advise to not do this, because you would only work with "Magic Numbers" and it's easy to break.