Restaurant Menu Website HTML CSS

Open In Editor Publish Your Code

<div class="lunch menu-restaurant">
          <span class="clearfix">
            <a class="menu-title" href="#">Grilled Chicken Salad</a>
            <span style="left: 166px; right: 44px;" class="menu-line"></span>
            <span class="menu-price">$18.49</span>
          </span>
          <span class="menu-subtitle">Grilled chicken breast with a mix of fresh greens and a vinaigrette dressing.</span>
        </div>
        <div class="lunch menu-restaurant">
          <span class="clearfix">
            <a class="menu-title" href="#">BBQ Pulled Pork Sandwich</a>
            <span style="left: 166px; right: 44px;" class="menu-line"></span>
            <span class="menu-price">$14.99</span>
          </span>
          <span class="menu-subtitle">Slow-cooked pulled pork with barbecue sauce, served with fries.</span>
        </div>

<div class="dinner menu-restaurant">
          <span class="clearfix">
            <a class="menu-title" href="#">Grilled Salmon</a>
            <span style="left: 166px; right: 44px;" class="menu-line"></span>
            <span class="menu-price">$22.99</span>
          </span>
          <span class="menu-subtitle">Perfectly grilled salmon served with mashed potatoes and steamed vegetables.</span>
        </div>
        <div class="dinner menu-restaurant">
          <span class="clearfix">
            <a class="menu-title" href="#">Steak Frites</a>
            <span style="left: 166px; right: 44px;" class="menu-line"></span>
            <span class="menu-price">$29.99</span>
          </span>
          <span class="menu-subtitle">Juicy steak served with crispy fries and garlic butter.</span>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.header-h {
    font-size: 35px;
    color: #F26B38; /* Updated color */
    font-size: 46px;
    font-family: 'Satisfy', sans-serif;
    font-weight: 300;
}

ul {
    list-style: none;
}

.header-p {
    color: #9C9C9C; /* Updated color */
    font-size: 16px;
}
.section-padding {
    padding: 60px 0px;
}

.marb-35 {
    margin-bottom: 35px;
}

.menu-restaurant {
    width: 50%;
    float: left;
    padding: 15px;
    position: relative;
}

.menu-restaurant .menu-title {
    float: left;
    font-family: Montserrat, arial;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #F26B38; /* Updated color */
}

.menu-restaurant .menu-line {
    position: absolute;
    bottom: 6px;
    border-bottom: 1px dotted rgba(0, 0, 0, .3);
    margin-left: .6em;
    margin-right: .6em;
}

.menu-restaurant .menu-price {
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}

.menu-restaurant .menu-subtitle {
    display: block;
    float: left;
    color: #A9A9A9; /* Updated color */
    font-family: Satisfy, 'Open Sans', arial;
    font-size: 1.2rem;
}

.menu-restaurant span.clearfix {
    position: relative;
    display: block;
}

#menu-filters ul li a.active, #menu-filters ul li a:hover {
    background: #F26B38; /* Updated color */
    color: #fff;
    border: 1px solid #F26B38; /* Updated color */
}

#menu-filters ul li {
    display: inline-block;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

#menu-filters ul li a {
    padding: 10px 20px;
    font-size: 14px;
    color: #565656;
    border-radius: 0px;
    border: 1px solid #BBBBBB;
    text-decoration: none;
    cursor: pointer;
}

@media (min-width: 20px) and (max-width: 450px) {
    .menu-restaurant {
        width: 100%;
    }
    .header-h {
        font-size: 35px;
    }
    .header-p {
        font-size: 14px;
    }
}

.msg-row {
    margin-top: 56px;
}

.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
}

.bg-1 {
    background-color: #FFA500; /* Updated color */
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.bg-14 {
    background-color: #A1D36A; /* Updated color */
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.dark-blue {
    color: #2A2D36; /* Updated color */
    font-size: 24px;
    margin-top: 0;
}

.light-blue {
    color: #9C9C9C; /* Updated color */
    font-size: 16px;
    margin-bottom: 1px;
}

.media-body {
    margin-left: 10px;
    padding-left: 13px;
}

.media-2 {
    margin-top: 30px;
}

.form-group {
    margin: 8px 0 9px !important;
    padding-bottom: 10px;
}

.contact-form .form-control {
    color: #000 !important;
    font-size: 16px;
    font-weight: normal;
    height: 38px;
    line-height: 1.42857;
    padding: 7px 0;
}

.form-control, .form-group .form-control {
    border: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#E65F00), to(#E65F00)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#E65F00, #E65F00), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#E65F00, #E65F00), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#E65F00, #E65F00), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 0 2px, 100% 1px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}

.contact-form {
    margin: 8px 0 9px !important;
    padding-bottom: 10px;
}

.phone-in-talk, .hour-icon {
    font-size: 35px;
    line-height: 70px;
    color: rgb(255, 255, 255);
}

.contact-form textarea.form-control {
    color: #000 !important;
    height: auto;
}

.contacts-btn {
    background-color: #F26B38 !important; /* Updated color */
    color: #ffffff !important;
    width: 170px;
    height: 54px;
    border-radius: 3px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    border: 0px;
    color: #000 !important;
}

.validation {
    color: red;
    display: none;
    margin: 0 0 20px;
    font-weight: 400;
    font-size: 13px;
}

#sendmessage {
    color: green;
    border: 1px solid green;
    display: none;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

#errormessage {
    color: red;
    display: none;
    border: 1px solid red;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

#sendmessage.show, #errormessage.show, .show {
    display: block;
}

Restaurant Menu Website HTML CSS

Recommended

Hover Button Animation CSS

Movie Website Landing Page Example

Portfolio Website HTML CSS Template

HTML

CSS

JS

Recommended

Hover Button Animation CSS

Movie Website Landing Page Example

Portfolio Website HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS