-1

Sorry for the noob question, but I am trying to write the code for my first website. You can find the 'finished product' here and basically I am trying to write this site I made with Wix from scratch, for my learning. I have the bulk of my markup but I am currently running into trouble with the styling.

The question is how do I style the heading so it's one block of purple and the header still has the break? Currently my header looks like: 

<header><mark style="background-color: #edc5f6">Art + Feminism 
for<br>Medical Learners</mark></header>

I'd like the full block of purple going across with no break in the highlight. How would you approach this problem?

Mel Mikhail
  • 1

1 Answers1

1

I think it's a good idea to read some html and css tutorials and to inspect some websites with the developer tools of the browser (also websites, that are not made with wix!).

You could edit your code like this: 

<style>
.content--upper-border {
    height: 5px;
    background: purple;
}

.content--wrapper {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.header--headline {
    display: inline-block;
    background-color: #edc5f6;
    padding-right: 3rem;
    font-size: 74px;
    font-family: helvetica, sans-serif;
    font-weight: 1000;
}

.header--seperator {
    height: 74px;
    border-bottom: 5px solid black;
}

.is--lifted {
    transform: translate(0, -1px);
}

.has--no-margin {
    margin: 0;
}
</style>

<div class="content--upper-border"></div>
<div class="content--wrapper">
<article>
    <header>
        <h1 class="has--no-margin">
            <div>
<span class="header--headline">
    Art + Feminism
</span>
            </div>
            <div class="is--lifted">
<span class="header--headline">
    for Medical Learners
</span>
            </div>
        </h1>
        <div class="header--seperator">
        </div>
    </header>
</article>
</div>
Fish
  • 91
  • 6