Um código por codex

Abrir no Editor Publique Seu Código

Recomendado

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

Um código por codex

Recomendado

Um Código de Metehan

Um site de jornal responsivo

Um código de Mete

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um site de jornal responsivo

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS