<h1>Healthy Snacks</h1>
<p>Introducing Triple L Banana Chips - crispy and delicious chips made of saba banana!<br> 
These chips are crafted with the finest quality ingredients to give you a tasty treat that's sure to please.<br>
A great snack option for any time, they offer just the right amount of crunch without being overly greasy or heavy.<br>
Enjoy them as an anytime snack or pair with your favorite dip or salad course- either way, these scrumptious chips will be sure to impress everyone around!.</p>



.main{
    width: 100%;
    min-height: 100vh;
    background-image: url(imagesweb/background.jpg);
    background-position: center;
    background-size: cover;
    padding: 10%px 10%;
    overflow: hidden




    *{
    margin: 0;
    padding: 0;
    
}

    
    
.main{
    width: 1500px;
    background-image: url(imagesweb/background.jpg);
    background-position: center;
    background-size: full;
    height: 100vh;
    margin: auto;
    overflow:hidden;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif

}

.navbar{
    width: 95%;
    height:auto;
    margin-left: 30px;
}

.logo{
    float:left;
    padding-top: .8%;
    cursor: pointer;
}

.menu{
    width: 950px;
    float: right;
    height: 70px;
}

ul{
    float: left;
    display: flex;
    padding-top: 30px;
    justify-content: center;
    align-items: center;
    margin-left: 14%;
}
ul li{
    list-style: none;
    margin-left: 60px;
    font-size: 20px;   
}
ul li{
    text-decoration: none;
    color: #fff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    transition: .3s ease;
}
ul li a:hover{
    color:rgb(2, 66, 45);
}

.title{
    position: absolute;
    top: 40%;
    left: 16%;
    transform: translate(-50%,-50%);
}

.title h1{
    cursor: pointer;
    font-family: Tahoma;
    color:black;
    font-size: 50px;

}

.p{
    position: absolute;
    top: 60%;
    left: 17%;
    font-family: Calibri;
    font-size: 20px;
    float:left;
    justify-content: left;
    margin-left: 10%;
    font-weight: bold;
    transform: translate(-50%,-50%);
    width: 700px; 
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: visible;
    text-overflow: clip;
    background-color: rgb(156, 235, 173);
    
}
.p h2{
  font-weight: bold;
  color: #038f55;
  font-size: 24px;
  font-family: tahoma;

}
.image{
    max-width: 20px;
    height: auto;
    border: 5px solid black;
    margin-top: 15%;
    float: right;
    

    

}

.image{

    max-width:350px;
    height: 100px;
    float: right;
    margin-right: 20px;

}

.icon{

    rotate: 30px;
    align-items: right;
}


<small class="text-muted">



 <!DOCTYPE html>
<html lang="en"></html>
<head>
    <meta name="viewpot" content="width=device-width", initial-scale="1.0">
    <title>Triple L Food Products</title>
    <link rel="stylesheet" href="style.css">
    
<head>
<body>
    <section class="header">
        
    </section>

</head>
<body>
    <div class="main">
        <div class="navbar">
            <h2 class="logo"><img src="imagesweb/bananalogo.jpg" alt="My Website Logo" width="150" height="150"></h2>
        </div>
        <div class="menu">
            <ul>
                <li><a href="Home">Home</a></li>
                <li><a href="About">About</a></li>
                <li><a href="Products">Products</a></li>
                <li><a href="Sustainabilty">Sustainability</a></li>
                <li><a href="Contact">Contact</a></li>
                </ul>
            </div>

            <div class="title">
                <h1>Healthy Snacks</h1>
            </div>

            <div class="p">
                <h2 style="font-size:2.25rem;">Triple L Food Products</h2>
                <p>-crispy and delicious chips made of saba banana.<br> 
These chips are crafted with the finest quality ingredients <br>to give you a tasty treat that's sure to please.<br>
Enjoy them as an anytime snack or pair with your favorite dip or salad course<br>
- either way, these scrumptious chips will be sure to impress everyone around!.</p>

                <h3 class="icon"><img src="bananascript.jpg" alt="banana Chips"></h3>
            
        </div>



        BOOT5   
        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Triple L Food Prodcuts</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  .img {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="p-5 bg-primary text-white text-center">
  <h1>Healthy Snacks</h1>
  <p>-crispy and delicious chips made of saba banana.<br> 
These chips are crafted with the finest quality ingredients <br>to give you a tasty treat that's sure to please.<br>
Enjoy them as an anytime snack or pair with your favorite dip or salad course<br>
- either way, these scrumptious chips will be sure to impress everyone around!.</p></p> 
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HOME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SUSTAINABILITY</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3 class="mt-4">Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2020</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

      <h2 class="mt-5">TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2020</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>

<div class="mt-5 p-4 bg-dark text-white text-center">
  <p>Footer</p>
</div>

</body>
</html>

                 
     


            
            

  





</body>
</html> </small>








2nd try
 <!DOCTYPE html>
<html lang="en"></html>
<head>
    <meta name="viewpot" content="width=device-width", initial-scale="1.0">
    <title>Triple L Food Products</title>
    <link rel="stylesheet" href="style.css">
    
<head>
<body>
    <section class="header">
        <nav>
            <a href="index.html"><img src=imagesweb/bananalogo.jpg></a>
            <div class="nav-links">
                <ul>
                    <li><a href=""HOME</a></li>
                    <li><a href=""ABOUT</a></li>
                    <li><a href=""CONTACT</a></li>
                    <li><a href=""PRODUCTS</a></li>
                    <li><a href=""SUSTAINABILITY</a></li>


                </ul>
            </div>
        </nav>
    </section>

</head>
<body>
    
        






</body>
</html> 

 <img src="imagesweb/492079437_1139185248227091_4961049242030477878_n.jpg" alt="Home Image" class="rotate">

 <div class="text-box">
    <div class="header-box">
    <h1>Healthy Snacks</h1>
    </div>
    <p class="description">
    <span class="dash">-</span>
    Crispy and delicious chips made of saba banana.
    These chips are crafted with the finest quality ingredients
    to give you a tasty treat that's sure to please.<br>
    Enjoy them as an anytime snack or pair with your favorite dip or salad course
    – either way, these scrumptious chips will be sure to impress everyone around!
  </p>
     <a href=""class="hero-btn">Visit Us to Know More</a>
     

     .text-box{
   max-width: 600px;       /* limit content width */
   margin-left: 10px;         /* center container horizontally */
   padding-left: 10px;     /* left spacing from screen edge */
   padding-right: 20px;    /* optional right spacing */
   box-sizing: border-box; /* include padding in width */
   padding-top: 30px;
}

.header-box {
  background-color: #9fe870;   /* Light green box */
  display: inline-block;       /* Box wraps the content */
  padding: 8px 10px;          /* Space inside the box */
  border-radius: 6px;          /* Optional: rounded corners */
  margin-bottom: 10px; 
  justify-content: space-between;        /* Space below the box */
}
.header-box h1{
  color: black;                          /* Header text in black */
  font-family: "Poppins", sans-serif;
  margin: 0px;                                /* Remove default margin */
  font-size: 48px;
}

.text-box p{
  color: #73df30;                                 /* light green */
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin: 0;
  font-family: "Poppins", sans-serif;
  padding-left: 10px;
}

.description {
  text-align: left;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 20px;
}

.dash {
  font-weight: bold;
}




SUSTAINABILITY
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sustainability for a Better Future</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Header -->
  <header class="hero">
    <h1>Sustainability</h1>
    <p>Building a greener future for generations to come</p>
  </header>

  <!-- About Section -->
  <section class="section">
    <h2>Healthy Snack</h2>
    <p>
      Our Banana Chips are produced with a steadfast commitment to environmental,
      social and economic sustainability.
    </p>
  </section>

  <!-- Goals Section -->
  <section class="section cards">
    <div class="card">
      <h3>🌍 Environmental Sustainability</h3>
      <h4>Protect natural resources and reduce pollution.</h4>
      <p>The bananas in our chips are sourced from local farms that adhere to responsible agricultural practices,
        thereby reducing the necessity for extensive long-distance transportation and mitigating carbon emissions.
        The production process minimises food waste by utilising ripe bananas that would otherwise be discarded.
        We employ energy-efficient drying methods and refrain from employing artificial preservatives,
        thereby reducing chemical pollution and environmental impact.
        Packaging materials are recyclable and designed to minimise plastic usage.

      </p>
    </div>
    <div class="card">
      <h3>🤝 Social</h3>
      <h4>Support communities and promote equality.</h4>
      <p>We provide support to local farmers by ensuring equitable pricing and consistent demand for their banana crops,
        helping to improve rural livelihoods. Our production facilities maintain safe working conditions and adhere 
        to ethical standards. By promoting natural and wholesome snacks,
        we also contribute to consumer well-being.
      </p>
    </div>
    <div class="card">
      <h3>💼 Economic</h3>
      <h4>Create long-term economic growth responsibly.</h4>
      <p>By sourcing locally, and optimising production efficiency,
         our banana chips production remains cost-effective and scalable.
         This aproach supports long-term business growth while preserving affordability
         for consumers ensuring stable income for farmers.</p>
    </div>
  </section>

  <!-- Actions Section -->
  <section class="section">
    <h2>How You Can Help</h2>
    <ul>
      <li>Reduce waste and recycle</li>
      <li>Save energy and water</li>
      <li>Use sustainable products</li>
      <li>Support eco-friendly businesses</li>
    </ul>
  </section>
    <a href="index.html" class="home-link">← Back to Home</a>

  <!-- Footer -->
  <footer>
    <p>© 2025 Sustainable Future | Together for the planet 🌱</p>
  </footer>

</body>
</html>


/* Container: flex layout to float text and images */
.healthy-snack {
    display: flex;
    align-items: center;     /* vertical center */
    gap: 40px;               /* space between text and images */
    margin: 50px auto;
    flex-wrap: wrap;         /* responsive for smaller screens */
}

/* Text side */
.healthy-snack .text-content {
    flex: 1;                 /* text takes remaining space */
    min-width: 220px;
}

/* Image side */
.healthy-snack .image-stack {
    position: relative;
    width: 250px;
    height: 220px;
}

/* Base image style */
.healthy-snack .stack-img {
    position: absolute !important;
    width: 150px !important;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Left / bottom image */
.healthy-snack .img-1 {
    top: 30px;
    left: 0px;
    transform: rotate(-15deg);
    z-index: 1;
}

/* Right / top image */
.healthy-snack .img-2 {
    top: 0px;
    left: 70px;
    transform: rotate(10deg);
    z-index: 2;
}

/* Responsive: stack text above images on small screens */
@media (max-width: 600px) {
    .healthy-snack {
        flex-direction: column;
        align-items: center;
    }
    .healthy-snack .image-stack {
        margin-top: 20px;
    }
}

