So I made a box where I import three images one below the others. and left the right empty space. Now I wanted to put text on the right side. But unable to do.
.rcorners1 {
border-radius: 70px;
/* background: #73ad21; */
background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?t=st=1652835318~exp=1652835918~hmac=a388e1f2f27925587acc85600e642cc8b312a7e7e4b957e9b73a7b636f7dd68d&w=900);
padding: 20px;
/* flex: auto; */
width: 950px;
height: 250px;
}
.rcorners2 {
border-radius: 25px;
background: white;
border: 1px solid brown;
/* border: brown; */
/* background-image: url(./images/Background.jpg); */
padding: 20px;
/* float: none; */
/* position: absolute; */
margin-top: -150px;
/* flex: auto; */
width: 800px;
height: 400px;
}
.text {
color: white;
}
/* .leftWrapper {
float: left;
width: 32%;
height: 650px;
} */
.container {
position: relative;
/* margin-left: 200px; */
}
.image1 {
position: relative;
width: 200px;
padding: auto;
height: 300px;
margin: 1px;
/* padding: 4px; */
border: 4px solid white;
margin-top: 30px;
margin-left: -250px;
outline-style: groove;
outline-color: brown;
z-index: 3;
}
.image2 {
position: absolute;
border: 4px solid white;
/* margin-top: -70px; */
width: 170px;
height: 260px;
top: 30px;
left: 30px;
/* padding: auto; */
outline-style: groove;
outline-color: brown;
/* outline-width: 12px; */
/* border: 1px green solid; */
/* margin-bottom: 38px; */
margin-top: 20px;
margin-left: 150px;
z-index: 2;
}
.image3 {
width: 150px;
/* position: relative; */
outline-style: groove;
border: 4px solid white;
/* outline-color: brown; */
height: 230px;
top: 30px;
left: 30px;
padding: auto;
z-index: 3;
/* margin-top: -50px; */
margin-bottom: -20px;
margin-left: 50px;
}
.h1 {
/* position: relative; */
font-size: 40px;
font-weight: lighter;
/* margin-top: -50px; */
text-align: right;
}
<!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>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<center>
<div class="rcorners1">
<div class="text">
<h1>Digital Card Details</h1>
</div>
</div>
<div class="rcorners2">
<div class="container">
<img class="image1" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
<img class="image2" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
<img class="image3" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
</div>
<h1>Hello</h1>
<!-- <a href=""></a> -->
</div>
</center>
</body>
</html>
How it looks like when importing images from URL - Codepen I want that hello should appear on the right side within the box and right there.
Leave the alignment of images i have to do only text on right side. and what if i have to do multiple text there. Like h1, p, and photos also
you can create a div that contain all text and set its position:absolute
;then position it as you wanted using right
and top
property.
.rcorners1 {
border-radius: 70px;
/* background: #73ad21; */
background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?t=st=1652835318~exp=1652835918~hmac=a388e1f2f27925587acc85600e642cc8b312a7e7e4b957e9b73a7b636f7dd68d&w=900);
padding: 20px;
/* flex: auto; */
width: 950px;
height: 250px;
}
.rcorners2 {
border-radius: 25px;
background: white;
border: 1px solid brown;
/* border: brown; */
/* background-image: url(./images/Background.jpg); */
padding: 20px;
/* float: none; */
/* position: absolute; */
margin-top: -150px;
/* flex: auto; */
width: 800px;
height: 400px;
}
.text {
color: white;
}
/* .leftWrapper {
float: left;
width: 32%;
height: 650px;
} */
.container {
position: relative;
}
.image1 {
/* position: fixed; */
width: 260px;
padding: auto;
height: 380px;
margin: 1px;
/* padding: 4px; */
border: 4px solid white;
margin-left: -200px;
outline-style: groove;
outline-color: brown;
z-index: 3;
}
.image2 {
/* position: absolute; */
border: 4px solid white;
width: 220px;
height: 320px;
top: 30px;
left: 30px;
/* padding: auto; */
outline-style: groove;
outline-color: brown;
/* outline-width: 12px; */
/* border: 1px green solid; */
margin-bottom: 38px;
margin-left: -100px;
z-index: 2;
}
.image3 {
width: 150px;
/* position: relative; */
outline-style: groove;
border: 4px solid white;
/* outline-color: brown; */
height: 220px;
top: 30px;
left: 30px;
padding: auto;
z-index: 3;
margin-bottom: 100px;
margin-left: -100px;
}
.inner-text{
color:black;
position:absolute;
right:0;
top:50%;
}
<!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>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<center>
<div class="rcorners1">
<div class="text">
<h1>Digital Card Details</h1>
</div>
</div>
<div class="rcorners2">
<div class="container">
<img class="image1" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
<img class="image2" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
<img class="image3" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
<div class="inner-text">
text here
</div>
</div>
<!-- <a href=""></a> -->
</div>
</center>
</body>
</html>