Un code par codex

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 May 2025

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

Un code par codex

Recommandé

Un code de Metehan

Un code par alejandrokundrah

Un code par pan4o

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code par alejandrokundrah

Un code par pan4o

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS