hi everyone. i am very new to HTML programming. i can make certain elements of my design appear but the alignments are always faulty I am trying to make my website look like my design in the first image below. Sadly despite my best attempts I got the second image in the comments as my result
can someone here please mentor me and check my code for this particular design? below is my HTML:
<!doctype html>
<html>
<head>
<title>Green Investment</title>
<link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
</head>
<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
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.
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 right. </p>
</div>
<div class="green-image-container">
<img src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/solar%20cells.jpg">
</div>
</div>
</body>
</html>
beneath is the specific CSS for the elements in my design I am trying to edit
green-investment-title {
width: 100%;
height: 45px;
background-color: #56aeff;
display:flex;
}
.green-content{
display: flex;
flex-direction: row;
}
.green-text {
justify-content: left;
text-align: left;
font-size: 20px;
font-family: Arial;
}
.green-image-container{
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
if you want to view the full code, it is on Js fiddle: https://jsfiddle.net/schmueller23/zcagurqy/1/
please go easy on me guys. i know as beginners we are supposed to learn things on our own. i have done so but it is not that easy when putting it into practice. please tell me how to fix it and give me the explanation why the solution is in such a way so i can learn. Thank you
