I am trying to make my website look like my design in the first image below but i also want to add another text beneath the first image and text as shown in the second image beneath the first image
After some coding i got the result in the first image below, it’s almost the same but the ‘our history’ text is on thre right even though it is within the same div and the flex direction is set to column to make it vertical. i changed my code again and got the second result in the second image below the first result image
As you can seem my image is squished leftwards along with the text on its right side. i want the ‘our history’ title and the paragraphs beneath the title to be below both the image and the text that is on the right side of the image. below is the sprecific html css for the two container elements. beneath that is the specific CSS for these elements.
html,
body {
height: 100%;
margin: 0;
}
body {
background-color: white;
background-image: url('file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
}
.data-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.about-content {
display: flex;
flex-direction: column;
}
.about-container {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100vw;
height: 100vh;
flex-direction: row;
}
.about-us-image {
width: 30vw;
height: calc(30vw * 4 / 3);
overflow: hidden;
box-shadow: 30px 30px #56aeff;
.about-image {
height: 594px;
width: 400px;
box-sizing: border-box;
object-fit: fill;
}
.about-us-text {
text-align: left;
padding: 100px;
width: 50%;
box-sizing: border-box;
align-self: start;
padding: 80px 50px 0 0;
padding-left: none;
padding-top: 0%;
padding-right: 25px;
width: 30vw;
}
.about-history {
display: flex;
flex-direction: row;
}<div class="about-content">
<div class="about-container">
<div class="about-us-image">
<img class="about-image" src="https://i.sstatic.net/xFCKtHKi.png" alt="smiling-handsome-asian-manager-with-modern-device">
</img>
</div>
<div class="about-us-text">
<h2>
<h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
<p>
<p style=font-size:20px; ">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands.
Our team provides the essential services required for an easy turn key investment, so that you don't have to do the hardwork but enjoy the fruitful results of your retirement investment
<br>
<br>
We strive to deliver the best investment and retirement experience to you. We have helped over a hundred clients find their perfect invest and retirement match in Bali and other unexplored frontier markets in newly emerging islands across Indonesia. Our Team is made up of stafff members who specialize in accounting, business law, and investment education. To discover more about our team of staff and their unique skil of expertise, read through our stadf team profile below. if you have contactred us brefore and would like to reach us to discuss your queries regarding </p>
</div>
<div class="about-history ">
<h2><h2 style="color: #56aeff; ">Our History</h2>
<div class="history-text ">
<div class="history-column-1 ">
<p>The genesis of our company is the dream of Samuel, the founder of our company and a local who was born and raised on thed island of Bali. Having been raised in the island, he sees the potential of the islands booming tourism industry and how it can used to elevate the overall well being of the community in Bali and other islands as well as boosting the economy of Indonesia. For this reason he traveled to Australia to complete his bachelors in human resources. </p>
</div>
<div class="history-coluimn-2 ">
<p>Unfortunately his studies was cut short by a sudden accident, which made him return home to recover. throughoput his recovery he realised that the time to intice people to come to invest in his home island is now</p>
</div>
</div>
</div>
</div>JsFiddle
i tried fixing the flex issues on my own and ask other programmers online but it only solved it halfway and there are still issues in the placement of my elements.
6
In your code, you missed some closing divs and added the inline styles, Avoid using the inline style in the tag. Also, you have to use the tag to another tag and not close we don’t require a double tag for heading.
I have added some code as per your requirement below to modify some changes like removing the double h2 tag and inline styling and adding a closing bracket to the end of the code.
html,
body {
height: 100%;
margin: 0;
}
body {
background-color: white;
background-image: url('file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.data-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.about-content {
display: flex;
flex-direction: column;
}
.about-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.about-us-image {
width: 30vw;
height: calc(30vw * 4 / 3);
overflow: hidden;
box-shadow: 30px 30px #56aeff;
}
.about-image {
height: 100%;
width: 100%;
}
.about-us-text {
padding: 0 50px;
width: 100%;
max-width: 30vw;
margin: 0 auto;
}
.about-us-text h2 {
color: #56aeff;
font-size: 40px;
font-family: Arial;
}
.about-us-text p {
font-size: 20px;
}
.about-history {
padding: 50px 0;
}
.about-history h2 {
color: #56aeff;
margin: 0;
}
.history-text {
display: flex;
column-gap: 40px;
}
.history-text>div {
flex: 1;
}<div class="about-content">
<div class="about-container">
<div class="about-us-image">
<img class="about-image" src="https://i.sstatic.net/xFCKtHKi.png" alt="smiling-handsome-asian-manager-with-modern-device" />
</div>
<div class="about-us-text">
<h2>Who We Are</h2>
<p>With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands. Our team provides the essential services required for an easy turn key investment, so that you don't have to do the hardwork but enjoy the fruitful results of your retirement investment</p>
<p>We strive to deliver the best investment and retirement experience to you. We have helped over a hundred clients find their perfect invest and retirement match in Bali and other unexplored frontier markets in newly emerging islands across Indonesia. Our Team is made up of stafff members who specialize in accounting, business law, and investment education. To discover more about our team of staff and their unique skil of expertise, read through our stadf team profile below. if you have contactred us brefore and would like to reach us to discuss your queries regarding</p>
</div>
<div class="about-history">
<h2>Our History</h2>
<div class="history-text">
<div class="history-column-1">
<p>The genesis of our company is the dream of Samuel, the founder of our company and a local who was born and raised on thed island of Bali. Having been raised in the island, he sees the potential of the islands booming tourism industry and how it can used to elevate the overall well being of the community in Bali and other islands as well as boosting the economy of Indonesia. For this reason he traveled to Australia to complete his bachelors in human resources. </p>
</div>
<div class="history-coluimn-2">
<p>Unfortunately his studies was cut short by a sudden accident, which made him return home to recover. throughoput his recovery he realised that the time to intice people to come to invest in his home island is now</p>
</div>
</div>
</div>
</div>
</div>Now you can change the font size and spacing-related design as per your requirements.
3