IMG20200116175849.JPG67 Кб, 666x358
Сап, двач. Помогите написать html/css для хеда, 125846 В конец треда | Веб
Сап, двач.
Помогите написать html/css для хеда, примерно как на пике.
Шрифты можно любые использовать
Кнопка в центре должна быть кликабельной.
2 125847
3 125860
>>5846 (OP)
Ахахаха, блять, ОП.

<style>
.hero {
background: url(bg.jpg) no-repeat center center fixed; background-size: cover;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

#text {
margin: 0;
position: absolute;
top: 50%;
}

.button {
background-color: white;
color: black;
border: 2px solid #555555;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}

</style>

<div class="hero"
<div id="text">
<h1></h1>
<a href="link.com" class="button"/>
</div>
</div>
3 125860
>>5846 (OP)
Ахахаха, блять, ОП.

<style>
.hero {
background: url(bg.jpg) no-repeat center center fixed; background-size: cover;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

#text {
margin: 0;
position: absolute;
top: 50%;
}

.button {
background-color: white;
color: black;
border: 2px solid #555555;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}

</style>

<div class="hero"
<div id="text">
<h1></h1>
<a href="link.com" class="button"/>
</div>
</div>
4 125863
мимо проходил
анус уже коптит от злости
Перечитал тонну инфы как сделать, но всё размыто что пиздец.
Дано:
В css задаётся фон страницы -
body {
background: url(images/huetaname.jpg);
}
Картинка размером 1920x1080
Найти:
Как сделать адаптацию размера background под разные размеры экранов
5 125864
>>5863
UPD:
background-size 100%; - не то!
6 125865
>>5863
background-size: cover;
Либо пили отдельно под мобилку/планшет, что лучше в 95% случаев.
изображение.png26 Кб, 1073x749
7 125868
>>5865
мобилки не в приоритете.
.
.
повторяется фон. no-repeat не помогает
8 125869
>>5868
Дык у тебя высота контейнера на который он фон применяет, не задана. Поэтому он и делает repeat

>мобилки не в приоритете


Неправильно ты, дядя Фёдор, в вёрстку вкатываешься.
9 125870
>>5869
Я конечно дико извиняюсь за такой тупёж, но это же будет фон контейнера, а не фон страницы. Или я что-то не догоняю.
Можешь написать пример? Если конечно не затруднит
Хотя бы вкатиться в нормальный скилл для начала, потом уже можно на мобилки
Безымянный.png15 Кб, 1808x172
10 125872
>>5870
Если тебе нужно на всю страницу, делаешь всё то же самое для body. Но у body, опять же, нет понятия высоты и оно не будет понимать, как растягивать твою картинку (cover - про ширину).
11 125879
>>5872
Тыжмойпрограммист, спасибо тебе.
Всего то дело в width:100% под background. Аж стыдно.

Теперь бы разобраться как почти такое же проделать с onClick="location.href='ссылка'"> находящимся на этом самом background, чтобы не ездил при масштабе страницы и изменении окна браузера.

#clickme {
position: absolute;
float: center;
top: 26.7%; //Это я тут пытался подстроить в конкретное место, выравнивая от верхнего края браузера
left: 37.8%; //Это я тут пытался подстроить в конкретное место, выравнивая от левого края браузера
height: 50%; //размер моей области onclick - высота
width: 12.6%; //размер моей области onclick - ширина
background: red;
opacity: 0.5; //прозрачность
}

P.S. Делаю чисто для себя одну страницу, для понимания работы этого всего. Придумал себе в голове это, а реализовать сложно. Никаких коммерческих коварных планов не имею.
Анон.
12 125928
>>5879
Ты что делаешь, окаянный? Зачем тебе скрипты?

<a href="ссылка">что угодно, хоть всю страницу сюда запихни</a>

Смотри, для того, чтобы понять вообще про позиционирование элементов на странице - вкури bootstrap. Он сейчас не актуален, но даст базу.
13 125929
>>5879
То есть, ты с одной стороны

>вкатиться в нормальный скилл для начала, потом уже можно на мобилки


Но ты даже не можешь в сетку, не слышал про mobile-first и применяешь ебанутые методы. Мне очень интересно, где ты нашёл такие материалы для обучения.
14 125940
>>5929
Уроки Артемия Лебедева
15 126014
>>5846 (OP)
Вёрстка блока - работа. За это деньги платить принято у нормальных людей.
Зачем мне тебе что-то делать за спасибо? Я изучал, тратил время и силы, а ты нахаляву хочешь мои скиллы использовать?

миморазраб
16 126016
>>6014

>Вёрстка блока


>миморазраб



Но ты не разработчик, а верстала позорная. Нижняя ступень вебдев-иерархии, стоящая на одном уровне с копирайтером и специалистом по постингу смишнявок в паблик вконтаче.
17 126017
>>6016
Где я написал, что я верстала? Вёрстка это вообще базовый навык для вебдева и умеют в неё все более-менее.
Другое дело, что позиция верстальщика всегда есть в серьёзных местах - никто лучше толкового версталы не заебётся с совместимостью браузеров, их поддержкой и читабельностью кода.

Ты тему не сечёшь просто и у тебя жопа горит
18 126137
>>5846 (OP)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Верстач</title>
</head>
<body>
<header>
<div class="container">
<div class="header__logo">
<h1>Startap</h1>
</div>
<div class="top__menu">
<nav>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="banner">
<div class="banner__inner">
<h2>Welcome to startup</h2>
<p>Бла-бла-бла</p>
<a href="#">Кнопка</a>
</div>
</section>
</body>
</html>
18 126137
>>5846 (OP)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Верстач</title>
</head>
<body>
<header>
<div class="container">
<div class="header__logo">
<h1>Startap</h1>
</div>
<div class="top__menu">
<nav>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
<li><a href="#">Welcome</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="banner">
<div class="banner__inner">
<h2>Welcome to startup</h2>
<p>Бла-бла-бла</p>
<a href="#">Кнопка</a>
</div>
</section>
</body>
</html>
Обновить тред