Стайлинг моего первого сайта - PullRequest
Новая
       5

Стайлинг моего первого сайта

0 голосов
/ 29 августа 2018

Извините за вопрос noob, но я пытаюсь написать код для моего первого сайта. Вы можете найти «готовый продукт» здесь , и в основном я пытаюсь написать этот сайт, который я создал с помощью Wix с нуля, для моего изучения. У меня большая часть разметки, но сейчас у меня проблемы со стилем.

Вопрос в том, как мне оформить заголовок, чтобы он был фиолетовым, а в заголовке все еще был разрыв? В настоящее время мой заголовок выглядит так: 

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

Мне бы хотелось, чтобы весь фиолетовый блок проходил без перерывов в выделении. Как бы вы подошли к этой проблеме?

1 Ответ

0 голосов
/ 29 августа 2018

Я думаю, что было бы неплохо прочитать некоторые учебные пособия по html и css и проверить некоторые веб-сайты с помощью инструментов разработчика браузера (также веб-сайтов, которые не созданы с помощью wix!).

Вы можете редактировать свой код так: 

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