Этого треда уже нет.
Это копия, сохраненная 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>
Тред утонул или удален.
Это копия, сохраненная 22 февраля 2022 года.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
Это копия, сохраненная 22 февраля 2022 года.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.