Hero Image Font Color


#1

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


#2

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;
}

#3

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


#4

Hi,

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

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

#5

<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>


#6

Hi,

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

Thank you,
Eva


#7

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;
}