Html - making elements appear exactly like my design in proper alignment

Samuel
October 5, 2024
62 views
0 votes
2 Answers

How do i make my elements fit within its given containers so that it fits the screen? i want my website page for the page, " green investment" look like my canva design in the first picture below. I however got the second image beneath that as my result

As you can see the texts are appearing within their containers but they are too large. However the images and its containers are too large and too squished to the right of the page whiole the container at the very top that contains the main title, "green investment" does not seem to keep[ the title in place . The entire layout is squished improperly and a bit too enlarged unevenly. Below is the specific HTML for the elements i am working on

<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>

Below is the specific CSS for the particular element

.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 thev full code, it’s on my JS fiddle: my JS fiddle

how do i make sure the elements appear exactlky like my design? are there tools that can help?

i tried modifying my CSS by adding addiytional attributes like justify content for each containers and adding a text-align: left attribute for the text within its container and making changes to the size of the containers borders but it has not worked

Answers

The layout you want is pretty simple to achieve. First create a parent div which uses display: flex and it will help to align text and image side-by-side after that add your children divs. One for text and another for image and width to them as you want, I have used 60-40% width ratio.

Thats all its simple and I have added few additional properties such as gap: 10px to create space between image and text. Below is working example and if I have missed something then do share.

body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: black;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.text-div {
  width: 60%;
}

.image-div {
  width: 40%
}

.image-div img {
  width: 100%;
  object-fit: cover;
}

<h2 class="mainDiv">
  <!-- Below Div contain all of your text -->
  <div class="text-div">
    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.
  </div>
  <!-- Below div will contain your image -->
  <div class="image-div">
    <img src="https://images.pexels.com/photos/28588325/pexels-photo-28588325/free-photo-of-close-up-of-lush-green-prickly-pear-cacti.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </div>
</h2>

I have fixed the layout issue by doing the following things:

Used flex properties in .green-investment-title to center the heading.
Set color: #fff; in .green-investment-title.
Added padding and gap in .green-content.
Set width: 50%; for .green-text and .green-image-container.
Used clip-path property to display image according to design.
Used multiple <p> inside .green-text.

Note: I didn’t have actual images so I used different ones. You can set them back while using this code in your original one.

body {
  background-image: url("file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg");
  height: 100%;
  background-position: top center;
  background-size: cover;
  margin: 0;
}

.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: url("../img/techno-desgin-bg.avif");
  padding: 80px 0 80px 80px;
}

.green-text {
  width: 50%;
  font-size: 20px;
  font-family: Arial;
}

.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%);
}

<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
          right.
        </p>
      </div>
      <div class="green-image-container">
        <img src="https://images.pexels.com/photos/356036/pexels-photo-356036.jpeg?auto=compress&cs=tinysrgb&w=600" class="cropped-image" />
      </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – making elements appear exactly like my design in proper alignment

Answers