Is there a way to fix the list to become horizontal and teh banner to become orange

Question

Is there a way to fix the list to become horizontal and teh banner to become orange

27 Views Asked by Newbie At 28 March 2024 at 03:54

I am trying to make this website, a copy of it. But, I am not being successful in these titles. I need them to be horizontal and I also need the banner to become orange, as it looks in the website. Please help me. I have tried the flex options and still not been able to manage to fix it. I have tried the you tube videos as well.

Original Q&A

There are 1 best solutions below

**Newbie** · Answer 1 · 2024-03-28T04:00:53.183000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UCOOK | Meal Kits & Meal Delivery Service South Africa</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>

  <body>
    <!-- Banner section -->
    <div class="banner">
      <div class="banner__content">
        <div class="banner__text">
          Public holiday delivery dates: Deliveries for 1 April will occur on 2
          April, while those for 31 March will occur as normal.
        </div>
        <button class="banner__close" type="button">
          <span class="material-icons"> close </span>
        </button>
      </div>
    </div>

    <!-- Header section with navigation -->
    <header>
      <nav>
        <ul class="horizontal-list">
          <li><a href="#Option1">MEAL KITS</a></li>
          <li><a href="#Option2">FROZEN</a></li>
          <li><a href="#Option3">WINE</a></li>
          <li><a href="#Option4">MARKET</a></li>
          <li><a href="#Option5">WEEKEND BOXES</a></li>
          <li><a href="#Option6">ABOUT UCOOK</a></li>
          <li><a href="#Option7">PARTNER WITH US</a></li>
          <li><a href="#Option8">GIFT CARDS</a></li>
          <li><a href="#Option9">EASTER BOXES</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main content -->
    <main>
      <!-- Section for "MEAL KITS" -->
      <section id="Option1">
        <div class="container">
          <img
            src="https://images.ucook.co.za/images/width=1000%7Cencoding=webp/c82cdc3c/c82cdc3c-cc37-4c0c-b4ca-8b97e8d7beeb.webp"
            alt="display picture of ucook"
          />
          <h2>Dinner, made easy</h2>
          <h3>Fresh ingredients from the farm</h3>
          <p>
            We deliver easy to follow and delicious recipes, and perfectly
            pre-portioned fresh ingredients to your door every week.
          </p>
        </div>
      </section>

      <!-- Section for "HOW DOES IT WORK?" -->
      <section id="Option2">
        <div class="container">
          <h1>How does it work?</h1>
          <ul>
            <li>1. You choose</li>
            <p>
              Sign up, pick from 24 new recipes every week with orders closing
              at 9am on Wednesday, and pause your account at any time
            </p>
            <li>2. We deliver</li>
            <p>
              Get a weekly delivery of perfectly portioned fresh produce,
              shipped in an insulated cold box
            </p>
            <li>3. You cook</li>
            <p>
              Get simple-to-follow recipes and create restaurant-quality dishes
              in your own home with no more meal planning or food waste
            </p>
          </ul>
          <p>Got more Questions? - check out our FAQ's</p>
        </div>
      </section>

      <!-- Section for "DISCOVER OUR WINES" -->
      <section id="Option3">
        <div class="container">
          <h1>Discover our wines</h1>
          <img
            src="https://images.ucook.co.za/images/width=400%7Cencoding=webp/bc39d138/bc39d138-b4ad-4b62-9864-6e8a8093d1c7.webp"
            alt="wine picture"
          />
          <p>
            Pair your meals with the perfect bottle of wine. Our curated
            selection of wines complements our recipes perfectly.
          </p>
        </div>
      </section>

      <!-- Add more sections as needed -->
    </main>

    <!-- Footer section -->
    <footer>
      <p>
        2024 © UCOOK. All rights reserved by The Supper Society Proprietary
        Limited | Liquor License: WCP/042073 | GAU/10615
      </p>
      <p>
        Visit UCOOK website
        <a
          href="https://www.ucook.co.za/?gad_source=1&gclid=CjwKCAjw5ImwBhBtEiwAFHDZx-k0R0NzFxkxjE-2vpugKMDPO3POK8cEQdIiGze8JGreeecQtETdExoC_agQAvD_BwE"
          >here</a
        >.
      </p>
    </footer>

    <!-- JavaScript for closing the banner https://www.youtube.com/watch?v=x-LVUk2IxDU-->
    <script>
      document
        .querySelector(".banner__close")
        .addEventListener("click", function () {
          this.closest(".banner").style.display = "none";
        });
    </script>
  </body>
</html>


and the css code: // Add your SCSS styles here

.banner {
  background: orange;
}

.banner__content {
  padding: 16px;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #ffffff; // Set font color to white
}

.banner__text {
  flex-grow: 1;
  line-height: 1.4;
  font-family: 'Quicksand', sans-serif;
}

.banner__close {
  background: none;
  border: none;
  cursor: pointer;
}

// Other styles...

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f7f7f7;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* Make the list items flex items */
  justify-content: space-around; /* Horizontally distribute the items */
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}


main {
  padding: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.container img {
  max-width: 100%;
}

section {
  margin-bottom: 50px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

Is there a way to fix the list to become horizontal and teh banner to become orange

There are 1 best solutions below

Related Questions in HTML

Related Questions in SASS

Related Questions in BANNER

Trending Questions

Popular # Hahtags

Popular Questions