#html #css
#HTML #css
Вопрос:
введите описание изображения здесь, пожалуйста, помогите мне, если вы знаете, спасибо, и если кто-нибудь уже создавал веб-сайт для ресторана, пожалуйста, пришлите мне код. Я хочу использовать ее в качестве ссылки, я буду вам очень благодарен, это мне очень поможет.
/* home section */
#home{
display: flex;
flex-direction: column;
padding: 3px 200px;
justify-content: center;
align-items: center;
}
#home::before{
content: "";
background-image: url("../images/1.jpeg");
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
opacity: 1.4;
}
<section id="home">
<h1 class="h-primary">Welcome to Half Dozen Shawarma</h1>
<p class ="h-primary"> Lorem 14</p>
<button class = "btn"> Menu </button>
Комментарии:
1. Stackoverflow предназначен для того, чтобы задавать вопросы об ошибках или когда вы поражены, вы не можете попросить других разработчиков отправить весь код, не попробовав что-то самостоятельно… Но поскольку вы новичок, я собираюсь опубликовать ссылку, которая может вам помочь … github.com/marynganga/Restaurant-Website-Template . Удачи и счастливого обучения…
2. Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы выделить именно то, что вам нужно. Как написано в настоящее время, трудно точно сказать, о чем вы спрашиваете.
Ответ №1:
демонстрация: https://codepen.io/shahemm/pen/YzrWvBv
Вот вы где :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="home">
<h1 class="h-primary">Welcome to Half Dozen Shawarma</h1>
<p class ="h-primary"> Lorem 14</p>
<button class = "btn"> Menu </button>
</body>
</html>
css :
#home{
display: flex;
flex-direction: column;
padding: 3px 200px;
justify-content: center;
align-items: center;}
#home::before{
content: "";
background-image: url("https://picsum.photos/1280/1080");
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
opacity: 1.4;}
и чтобы наклониться больше, посетите https://www.w3schools.com/cssref/pr_background-image.asp
Счастливого обучения 🙂