- Joined
- Oct 6, 2024
- Messages
- 3
- Reaction score
- 0
hi everyone I am new here and a beginner in HTML programming. I am trying to make my web page look like my design from Canva below.
However the second image beneath t is what I got, it's almost there but both my image and landing page are beneath the text instead of being on the right side of the screen even though they are within different container divs , how do fix this?
below is my specific HTML for this particular design
below is the specific CSS
if you want to view the full code layout it is on my js fiddle : https://jsfiddle.net/schmueller23/zcagurqy/3/
how do I fix my errors? thank you
However the second image beneath t is what I got, it's almost there but both my image and landing page are beneath the text instead of being on the right side of the screen even though they are within different container divs , how do fix this?
below is my specific HTML for this particular design
HTML:
<body>
<div class="green-investment-title">
<h1>Green Investment</h1>
</div>
<div class="green-content">
<div class="green-text">
<h2>Profit from the green revolution</h2>
<p>
Reduce your carbon foot print and make a positive impact on the
environment and the community by investing in clean and green energy.
Bali offers untaped green investment potential as the booming tourism
industry draws an international crowd of environmentally conscious
people to the island who not only want to livre a healthy lifestyle
being close to nature but also perserve it
</p>
<p>
Despite the vast potential of being an ecohub the island’s
consciousness towards the environment is poorly managed due to a
mentality of unhygienic lifestyle especially relating to waste
disposal. Passed down from generations, the people of Bali are taught
that everything used in their daily life are easily disposed of by
dumping them out in nature and in public places. This sort of
mentality exists because their ancestors haver grown accustomed to
using everyday items made from natural materialks like wood and plant
fiber. However times have changed as people use everyday items that
are synthetically made that damage nature. Unfortunately the Balinese
have not caught up to this change as they are still stuck with the
outdated mindset of their ancestors.
</p>
<p>
This is where you, the investor come in. You can invest in building
green businesses like solar farms, recycling plant, public parks and
green spaces to instill a mentality of care for motherr nature. By
doing this you will improve the island’s green image and gain more
clients in thed process. To get updates on new green investments in
Bali and other islands indoinesia, subscribe to our newsletter on the bottom of the
image onm the right.
</p>
<div class="green-image-container">
<img class="cropped-image" src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/solar%20cells.jpg" />
</div>
<div class="green-newsletter-apply">
<form id="green-form">
<label>
First Name
<input name="first_name" type="text" required>
</label>
<label>
Last Name
<input name="last_name" type="text" required>
</label>
<label>
Email
<input name="email" type="text" required>
</label>
<button> register </button>
</div>
</div>
</div>
</body>below is the specific CSS
CSS:
.green-investment-title {
width: 100%;
height: 70px;
background-color: #56aeff;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.green-content {
display: flex;
flex-direction: row;
gap: 20px;
background-image: none;
padding: 80px 0 80px 80px;
}
.green-text {
width: 50%;
font-size: 20px;
font-family: Arial;
}
.green-newsletter-apply {
height: 300px;
width: 450px;
background-color: #E6C536;
}
.green-image-container {
width: 50%;
height: auto;
overflow: hidden;
position: relative;
}
.cropped-image {
width: 100%;
height: auto;
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}if you want to view the full code layout it is on my js fiddle : https://jsfiddle.net/schmueller23/zcagurqy/3/
how do I fix my errors? thank you
