Ein Code von Codex

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

8 June 2025

Stick Merge Spiel HTML5 Quellcode

HTML

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

Ein Code von Codex

Empfohlen

Ein Code von programmationant

Ein Code von solosimbaa86

Stick Merge Spiel HTML5 Quellcode

HTML

CSS

JS

Empfohlen

Ein Code von programmationant

Ein Code von solosimbaa86

Stick Merge Spiel HTML5 Quellcode

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS