Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 30, 2021 at 4:53 am #1308030
    schizm00

    **Warning: Fairly NSFW link** provided for examples. Apologies in advance. This is a little embarrassing but the client wants this layout.

    I need help with 2 things here.

    Bio

    Question #1: The “Bio” text right below the first picture. How do I create that with the horizontal lines on each side?
    Question #2: The “Quick Facts” section at the bottom. That layout. I have it recreated, except for the fact that I cannot get the second column of text. How would I align it? I can’t simply hit the space bar 30 times because the alignment would be wrong. There must be an easier way.

    Thanks in advance.

    July 3, 2021 at 9:05 pm #1308597
    Mike

    Hey schizm00,
    Thank you for your patience, for the first example I used a code block element:
    2021-07-03_004.jpg
    the css is

    .bio-title::before {
    content: "";
    width: 200px;
    height: 1px;
    background-color: #aaa;
    margin-right: 20px;
    box-sizing: border-box;
}
.bio-title::after {
    content: "";
    width: 200px;
    height: 1px;
    background-color: #aaa;
    margin-left: 20px;
    box-sizing: border-box;
}
.bio-title {
    font-size: 64px;
    text-align: center;
    color: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    and the html structure is:
    <h1 class="bio-title"><span>Bio</span></h1>
    you could use a text element if you wish.
    The result is:
    2021-07-03_005.jpg
    For the second example I again used a code block element, inside a grid row element:
    2021-07-03_006.jpg
    this is the code inside the code block:

    <table>
<tbody><tr>
<td>Height</td>
<td>5’11</td>
</tr>
<tr>
<td>Nationality</td>
<td>American</td>
</tr>
<tr>
<td>Age</td>
<td>25</td>
</tr>
<tr>
<td>Bust</td>
<td>Natural</td>
</tr>
<tr>
<td>Shoe</td>
<td>10</td>
</tr>
<tr>
<td>Eyes</td>
<td>Blue</td>
</tr>
<tr>
<td>Hosting</td>
<td>Incall/Outcall</td>
</tr>
</tbody></table>

    this is the result:
    2021-07-03_007.jpg
    Please give this a try 🙂

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.