Как сделать так, чтобы в начале блока была расположена картинка на картинке была ещё одна картинка, а справа от картинок был текст?
Ответы (2 шт):
Автор решения: Dovgal Dima
→ Ссылка
document.addEventListener("DOMContentLoaded", function () {
const btnMoreAbout = document.getElementById("btnMoreAbout");
const popup = document.getElementById("popup");
const close = document.getElementById("close");
btnMoreAbout.addEventListener("click", function () {
popup.style.display = "block";
});
close.addEventListener("click", function () {
popup.style.display = "none";
});
});
.container {
max-width: 1100px;
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.block {
flex: 1;
display: flex;
flex-direction: row;
}
.flex-align-justify-center {
display: flex;
align-items: center;
justify-content: center;
}
.block-img, .block-content {
flex: 1;
}
.block-img img {
width: 250px;
}
.btn-more-about {
padding: 15px 25px;
border: 2px solid black;
border-radius: 30px;
font-weight: bold;
margin: 10px 10px 10px 0;
}
/*@media (max-width: 1000px) {
.block {
flex-direction: column;
}
}*/
/* Стили для попапа */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #3a3a3a;
color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: red;
font-weight: bold;
}
.popup h2 {
font-size: 24px;
}
.popup p {
font-size: 16px;
}
<div class="container">
<div class="block">
<div class="block-img flex-align-justify-center">
<img src="http://surl.li/mlanj" alt="img">
</div>
<div class="block-content flex-align-justify-center">
<div>
<h2>We provide healthy food for your family</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since.
</p>
<p> It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised.
</p>
<button id="btnMoreAbout" class="btn-more-about">More About Us</button>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup-content">
<span class="close" id="close">×</span>
<h2>Come and visit us</h2>
<p>(404) 857 - 0107</p>
<p>[email protected]</p>
<p>837 W.Marshall Lane ...</p>
</div>
</div>
Пример кода, в котором по клику на кнопку появляеться модальное окно поверх контента
Автор решения: darinka poznyak
→ Ссылка
Если Вам нужен блок, в котором слева есть картинка, поверх картинки блок с текстом, справа текст и кнопка, и всё это нужно сделать только при помощи html, css, то это можно реализовать следующим образом
.container {
width: 900px;
height: 600px;
border: 1px solid black;
margin: auto;
position: relative;
}
.block_image {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
left: 10px;
}
.block_text {
width: 300px;
height: 200px;
border-radius: 8px;
position: absolute;
background-color: black;
top: 330px;
left: 140px;
}
.block_text h3 {
color: white;
padding-left: 10px;
}
.block_text p {
color: white;
padding-left: 10px;
}
.block_text2 {
width: 400px;
height: 350px;
position: absolute;
top: 130px;
right: 20px;
}
.block_text2 h1,
h2,
p {
padding-left: 10px;
}
button {
width: 150px;
height: 50px;
border-radius: 50px;
position: absolute;
left: 10px;
background-color: white;
}
<div class="container">
<img class="block_image" src="https://p1.zoon.ru/preview/wWms_WrGbhGaEMwrZJRWhA/2400x1500x85/1/f/a/original_5554908f40c08885758b7356_62f240c5e02141.61633353.jpg" alt="shaverma">
<div class="block_text">
<h3>Come and visit us</h3>
<p>(414) 857-0107</p>
<p>[email protected]</p>
<p>837 W. Marshall Lane Marshalltown, IA 50158, Los Angeles</p>
</div>
<div class="block_text2">
<h1>We provide healthy food for your family</h1>
<h2>lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor</h2>
<p>lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</p>
<form action="#">
<button>More about us</button>
</form>
</div>
</div>
