Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2019, 10:25
Новичок на форуме
Отправить личное сообщение для bohdan_a Посмотреть профиль Найти все сообщения от bohdan_a
 
Регистрация: 19.06.2019
Сообщений: 8

Подскажите как сделать фон (бутстрап)
Подскажите, пожалуйста, как сдеалать бекграунд как в разделе 'stay in touch' с помощью бутстрапа??

https://www.figma.com/file/cFDh3T5KC...ode-id=1%3A731
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2019, 13:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

<html>
	<head>
		<style>

html, body {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100%;
	overflow: auto;
}

footer {
	background: rgb(41, 47, 66);
	background-clip: padding-box;
	border-top: 200px solid rgba(0, 0, 0, 0);
	border-image: linear-gradient(297.2deg, rgb(134, 190, 38), rgb(196, 229, 139)) 50;
	border-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 100 100" fill="none" \
		xmlns="http://www.w3.org/2000/svg">\
		<defs>\
			<linearGradient id="grad" x1="100%" y1="0%" x2="0%" y2="0%">\
				<stop offset="0%" style="stop-color:rgb(134, 190, 38);stop-opacity:1" />\
				<stop offset="100%" style="stop-color:rgb(196, 229, 139);stop-opacity:1" />\
			</linearGradient>\
		</defs>\
		<path d="M 0 0 Q 10 60 50 59 Q 90 50 100 90 V 100 H 0 z" fill="url(%23grad)"/>\
		<path d="M 0 10 Q 10 60 50 60 Q 90 60 100 100 H 0 z" fill="rgb(41, 47, 66)"/>\
	</svg>');
	border-image-slice: 100% 0 0 0 fill;
	border-image-width: 200px 0 0 0;
	border-image-outset: 0;
	border-image-repeat: stretch round;
	padding: 1em;
	color: white;
}

main {
	flex: 1;
}

		</style>
	</head>
	<body>
		<header></header>
		<main></main>
		<footer>Stay in touch</footer>
	</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как сделать newperson jQuery 4 03.12.2015 00:56
Подскажите как правильно сделать анимацию выезда ? Валерий1996 Общие вопросы Javascript 1 06.09.2015 12:49
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
Подскажите как сделать! scream AJAX и COMET 2 29.10.2012 08:56
Как сделать фон, главной страницы на изображении ? asked86 (X)HTML/CSS 3 03.04.2009 01:54