Sebo88
Sebo88

Reputation: 9

HTML DIV setups for Text location

While trying to set up a menu I am wondering about the proper approach for this type of design.--The style should look like the following---

Added Photo to show--enter image description here

So I have tried a few different options here is where i am at code wise... i have tried to use multiple divs, but what would be the easiest way to achieve the above layout? i can get it to be center in this format but i cannot get the text to be the above style in a grid layout.

My assumption is it is my HTML but i have tried as much as writing the price in its own DIV to attempt to manipulate position but that does not line up at all.

.menu {
  width: 100%;
  height: auto;
  background-image: url("../img/staff-bartender.jpg");
  background-color: rgb(0, 4, 17);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
}
<article class="menu">
  <h2>Food & Drink</h2>
  <div class="menuitems">
    <div>
      <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
      <p class="text-uppercase">Drinks Soda $2 Coke products
      </p>
      <p class="text-uppercase">Coffee $2 Cream and sugar</p>
      <p class="text-uppercase">Beer $5 Delicious and refreshing</p>
      <p class="text-uppercase">Wine $5 Light and fruity</p>
      <p class="text-uppercase">Cocktail $10</p>
    
        <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
        <p class="text-uppercase">fried Pickles $6 Golden and crispy with tang!</p>
        <p class="text-uppercase">Buffalo Wings $10 5 wings per order</p>
      </div>
    </div>
</article>

Upvotes: 0

Views: 49

Answers (1)

user18332436
user18332436

Reputation:

Try this code.

.menu {
        width: 100%;
        height: auto;
        background-image: url("../img/staff-bartender.jpg");
        background-color: rgb(0, 4, 17);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
    }
    .menuitems_outer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .menuitems{
        width: 50%;
        max-width: 30%;
        text-align: left;
    }
    .menuitems h5{
        display: flex;
        justify-content: space-between;
    }
<article class="menu">
    <h2>Food & Drink</h2>
    <div class="menuitems_outer">
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
            <h5 class="text-uppercase">Drinks Soda <span>$2</span></h5>
            <p>Coke products</p>
            <h5 class="text-uppercase">Coffee <span>$2</span></h5>
            <p>Cream and sugar</p>
            <h5 class="text-uppercase">Beer <span>$5</span></h5>
            <p>Delicious and refreshing</p>
            <h5 class="text-uppercase">Wine <span>$5</span></h5>
            <p>Light and fruity</p>
            <h5 class="text-uppercase">Cocktail <span>$10</span></h5>
        </div>
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
            <h5 class="text-uppercase">Fried Pickles <span>$6</span></h5>
            <p>Golden and crispy with tang!</p>
            <h5 class="text-uppercase">Buffalo Wings <span>$10</span></h5>
            <p>5 wings per order</p>
        </div>
    </div>
</article>

Upvotes: 1

Related Questions