Text and Button Adjustment

vividvisuals

Hey guys, I've spent the last 30-40 minutes trying to figure this thing out and am sure it would be quick work for you experts.

I'm trying to figure out how to add a header / title text to the following section and to center the button below the body text (which is justified).

Any ideas on how to accomplish this?

See the white section here: https://www.vividvisuals.asia/All-Pages/Travel-Photography/n-kTXr8W/TRAVEL-PHOTOGRAPHY

Big thanks!

Hikin' Mike

Use these instead:

HTML

<div class="text-box">
  <h2>Header</h2>
  <p>With every travel snap, our goal is simple: to vividly capture the essence of a destination through its people, places and stories.Punchy but authentic, our style of travel photography is intended to evoke a sense of awe and splendor while always staying true to life.If you have a story, tour or idea that you think we could help out with, please get in touch with us and share what you have in mind. Otherwise, please enjoy browsing through some of our travel albums!</p>
  <div class="button"><a href="https://www.vividvisuals.asia/Contact-Forms/GET-IN-TOUCH/n-JrrRLg">Let's Make Magic</a></div>
</div>

CSS:

.text-box {
  padding: 25px;
  background-color: rgba( 0, 0, 0, .025 );
  text-align: center;
}

.text-box h2 {
  font-size: 32px;
  color: red;
  text-transform: uppercase;
}

.text-box p {
  font-size: 20px;
  text-align: justify;
}

.text-box .button {margin: 50px auto 25px;}

.text-box a {
  color: #000;
  font-size: 20px;
  padding: 10px;
  text-transform: uppercase;
  transition: all 1250ms cubic-bezier( 0.19, 1, 0.22 ,1 );
  box-shadow: inset 0 0 20px rgba( 255, 255, 255, 0 );
  outline: 1px solid rgba( 0, 0, 0, 1 );
  outline-offset: 0;
  text-shadow: none;
}

  .text-box a:hover {
    border: 1px solid black;
    box-shadow: inset 0 0 20px rgba( 255, 255, 255, 0.5 ),0 0 20px rgba( 255, 255, 255, 0.2 );
    outline-color: rgba( 255, 255, 255, 0 );
    outline-offset: 15px;
    text-shadow: 1px 1px 2px #427388;
  }

vividvisuals

You're a wizard, @hikin' mike...thanks!

A very small point, but one that would be good to figure out before I start replicating this block for other sections of the site:

1. The shade of white seems to be a bit different from the white sections on my homepage
2. Is there a way to make the fonts identical too? The font on this version using the text box is a bit heavier / more bold.

Ideally it would be consistent throughout.

Thanks again!

homepage: www.vividvisuals.asia
page in question with white section: https://www.vividvisuals.asia/All-Pages/Travel-Photography/n-kTXr8W/TRAVEL-PHOTOGRAPHY

Hikin' Mike

@vividvisuals said:
1. The shade of white seems to be a bit different from the white sections on my homepage

One says #fff, the other says rgba( 255,255,255,1). I used the eye dropper in Photoshop and the same white color.

@vividvisuals said:
2. Is there a way to make the fonts identical too? The font on this version using the text box is a bit heavier / more bold.

Add font-weight: 300; to the text-box p section:

.text-box p {
    font-size: 25px;
    text-align: justify;
    padding: 10px;
    line-height: 30px;
    font-weight: 300;
}

vividvisuals

What a rockstar. Thanks, Hikin' Mike!

YuriV

Hello! I have been running into an issue and was wondering if someone knows how to fix it. Is there a way to change the "buy photos" button when opening up the gallery? After reading through one of the threads I put in the code to change the main Cta to "Buy Tutorials" but when I click and individual tutorial its still "buy photos," which needs to be changed. Let me know if you can help!
https://www.vantowskiphotography.com/Tutorials

Hikin' Mike

@YuriV said:
Hello! I have been running into an issue and was wondering if someone knows how to fix it. Is there a way to change the "buy photos" button when opening up the gallery? After reading through one of the threads I put in the code to change the main Cta to "Buy Tutorials" but when I click and individual tutorial its still "buy photos," which needs to be changed. Let me know if you can help!
https://www.vantowskiphotography.com/Tutorials

Create a new thread.