Двач.hk прислал битые данные.
Вы видите копию треда, сохраненную 22 февраля 2022 года.
Можете попробовать обновить страницу, чтобы увидеть актуальную версию.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
Вы видите копию треда, сохраненную 22 февраля 2022 года.
Можете попробовать обновить страницу, чтобы увидеть актуальную версию.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
67 Кб, 666x358Сап, двач.
Помогите написать html/css для хеда, примерно как на пике.
Шрифты можно любые использовать
Кнопка в центре должна быть кликабельной.
Помогите написать html/css для хеда, примерно как на пике.
Шрифты можно любые использовать
Кнопка в центре должна быть кликабельной.
>>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>
Ахахаха, блять, ОП.
<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>
>>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>
Ахахаха, блять, ОП.
<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>
мимо проходил
анус уже коптит от злости
Перечитал тонну инфы как сделать, но всё размыто что пиздец.
Дано:
В css задаётся фон страницы -
body {
background: url(images/huetaname.jpg);
}
Картинка размером 1920x1080
Найти:
Как сделать адаптацию размера background под разные размеры экранов
анус уже коптит от злости
Перечитал тонну инфы как сделать, но всё размыто что пиздец.
Дано:
В css задаётся фон страницы -
body {
background: url(images/huetaname.jpg);
}
Картинка размером 1920x1080
Найти:
Как сделать адаптацию размера background под разные размеры экранов
>>5868
Дык у тебя высота контейнера на который он фон применяет, не задана. Поэтому он и делает repeat
Неправильно ты, дядя Фёдор, в вёрстку вкатываешься.
Дык у тебя высота контейнера на который он фон применяет, не задана. Поэтому он и делает repeat
>мобилки не в приоритете
Неправильно ты, дядя Фёдор, в вёрстку вкатываешься.
>>5869
Я конечно дико извиняюсь за такой тупёж, но это же будет фон контейнера, а не фон страницы. Или я что-то не догоняю.
Можешь написать пример? Если конечно не затруднит
Хотя бы вкатиться в нормальный скилл для начала, потом уже можно на мобилки
Я конечно дико извиняюсь за такой тупёж, но это же будет фон контейнера, а не фон страницы. Или я что-то не догоняю.
Можешь написать пример? Если конечно не затруднит
Хотя бы вкатиться в нормальный скилл для начала, потом уже можно на мобилки
15 Кб, 1808x172>>5870
Если тебе нужно на всю страницу, делаешь всё то же самое для body. Но у body, опять же, нет понятия высоты и оно не будет понимать, как растягивать твою картинку (cover - про ширину).
Если тебе нужно на всю страницу, делаешь всё то же самое для body. Но у body, опять же, нет понятия высоты и оно не будет понимать, как растягивать твою картинку (cover - про ширину).
>>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. Делаю чисто для себя одну страницу, для понимания работы этого всего. Придумал себе в голове это, а реализовать сложно. Никаких коммерческих коварных планов не имею.
Анон.
Тыжмойпрограммист, спасибо тебе.
Всего то дело в 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. Делаю чисто для себя одну страницу, для понимания работы этого всего. Придумал себе в голове это, а реализовать сложно. Никаких коммерческих коварных планов не имею.
Анон.
>>5879
Ты что делаешь, окаянный? Зачем тебе скрипты?
<a href="ссылка">что угодно, хоть всю страницу сюда запихни</a>
Смотри, для того, чтобы понять вообще про позиционирование элементов на странице - вкури bootstrap. Он сейчас не актуален, но даст базу.
Ты что делаешь, окаянный? Зачем тебе скрипты?
<a href="ссылка">что угодно, хоть всю страницу сюда запихни</a>
Смотри, для того, чтобы понять вообще про позиционирование элементов на странице - вкури bootstrap. Он сейчас не актуален, но даст базу.
>>5879
То есть, ты с одной стороны
Но ты даже не можешь в сетку, не слышал про mobile-first и применяешь ебанутые методы. Мне очень интересно, где ты нашёл такие материалы для обучения.
То есть, ты с одной стороны
>вкатиться в нормальный скилл для начала, потом уже можно на мобилки
Но ты даже не можешь в сетку, не слышал про mobile-first и применяешь ебанутые методы. Мне очень интересно, где ты нашёл такие материалы для обучения.
>>5929
Уроки Артемия Лебедева
Уроки Артемия Лебедева
>>5846 (OP)
Вёрстка блока - работа. За это деньги платить принято у нормальных людей.
Зачем мне тебе что-то делать за спасибо? Я изучал, тратил время и силы, а ты нахаляву хочешь мои скиллы использовать?
миморазраб
Вёрстка блока - работа. За это деньги платить принято у нормальных людей.
Зачем мне тебе что-то делать за спасибо? Я изучал, тратил время и силы, а ты нахаляву хочешь мои скиллы использовать?
миморазраб
>>6014
Но ты не разработчик, а верстала позорная. Нижняя ступень вебдев-иерархии, стоящая на одном уровне с копирайтером и специалистом по постингу смишнявок в паблик вконтаче.
>Вёрстка блока
>миморазраб
Но ты не разработчик, а верстала позорная. Нижняя ступень вебдев-иерархии, стоящая на одном уровне с копирайтером и специалистом по постингу смишнявок в паблик вконтаче.
>>6016
Где я написал, что я верстала? Вёрстка это вообще базовый навык для вебдева и умеют в неё все более-менее.
Другое дело, что позиция верстальщика всегда есть в серьёзных местах - никто лучше толкового версталы не заебётся с совместимостью браузеров, их поддержкой и читабельностью кода.
Ты тему не сечёшь просто и у тебя жопа горит
Где я написал, что я верстала? Вёрстка это вообще базовый навык для вебдева и умеют в неё все более-менее.
Другое дело, что позиция верстальщика всегда есть в серьёзных местах - никто лучше толкового версталы не заебётся с совместимостью браузеров, их поддержкой и читабельностью кода.
Ты тему не сечёшь просто и у тебя жопа горит
>>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>
<!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>
>>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>
<!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>
Двач.hk прислал битые данные.
Вы видите копию треда, сохраненную 22 февраля 2022 года.
Можете попробовать обновить страницу, чтобы увидеть актуальную версию.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
Вы видите копию треда, сохраненную 22 февраля 2022 года.
Можете попробовать обновить страницу, чтобы увидеть актуальную версию.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.