Hero Image Font Color

Hi there,

How do I change the color of the scrolling header font on my page? http://evaladhani.com/

It’s currently white and yellow and flushes out with the color of my hero image.

Thank you,
Eva

Hi Eva,

Did you mean the animated text in header? Here is the css code to change the font color:

.header-container h1 {
    color: black;
}
.header-container h1 span {
    color: red;
}

Thanks, Awan.

Another question - how do I change the color of the text below it “Disrupting the status quo since 1989”, as well as the gray and yellow buttons?

Thank you,
E

Hi,

Here is the css code to change the font color of the header text description:

.header-container h4 {
    color: #f2d25b;
}

<link href=“http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css” rel=“stylesheet”>

<section class=“hero”>
<div class=“row intro”>
<div class=“small-centered medium-uncentered medium-6 large-7 columns”>
<h1>Truth? What truth?</h1>
<p>Don’t you want to take a leap of faith? Or become an old man, filled with regret, waiting to die alone!</p>
</div>
<div class=“small-centered medium-uncentered medium-6 large-5 columns”>
<div class=“tech-img”></div>
</div>
</div>
</section>

Hi,

How do I change the color of the buttons “experience” and “journal”?

Thank you,
Eva

Hi,

Try this for the “experience” button:

.header-container .button.light {
    border-color: red;
    color: red;
}

.header-container .button.light:hover {
    color: white;
    background-color: red;
}

and this for the “journal”:

.header-container .button {
    border-color: black;
    color: black;
}
.header-container .button:hover {
    background-color: black;
    color: white;
}