Preview:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>
      Order food online from India's best food delivery service. Order from
      restaurants near you
    </title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <style>
    * {
  margin: 0;
  padding: 0;
  font-family: 'Mulish', sans-serif;
}

/* navbar section */
.navbar {
  box-shadow: 0 15px 40px -20px rgb(40 44 63 / 15%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  z-index: 1000;
  padding: 0 20px;
}
.navbar .nav {
  max-width: 1200px;
  min-width: 1200px;
  position: relative;
  margin: 0 auto;
  height: 80px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.navbar .left {
  display: flex;
  align-items: center;
}
.navbar .left .logo {
  display: block;
  height: 49px;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-right: 16px;
}
.navbar .left .logo:hover {
  transform: scale(1.1);
}
.navbar .location-div,
.other {
  position: relative;
}
.navbar .location-div {
  display: flex;
  align-items: center;
  margin-left: 30px;
  max-width: 300px;
  height: 30px;
  cursor: pointer;
  margin-bottom: -1px;
  padding-right: 10px;
  font-size: 14px;
}
.navbar .right {
  position: relative;
}
.location-div .other {
  font-weight: 700;
  color: #3d4152;
  float: left;
  padding-bottom: 2px;
  border-bottom: 2px solid #3d4152;
}
.location-div .other:hover {
  color: #fc8019;
  border-bottom: 2px solid #fc8019;
}
.location-div .location {
  display: block;
  font-weight: 300;
  padding-left: 5px;
  margin-left: 5px;
  color: #686b78;
}
.location-div .arrow-down {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #fc8019;
  font-weight: 700;
}
.right .items {
  display: flex;
  align-items: center;
}
.right .items li {
  margin-right: 36px;
  color: #3d4152;
  font-size: 16px;
  font-weight: 500;
  list-style-type: none;
}
.right .items .nav-item {
  display: flex;
  align-items: center;
  padding-left: 28px;
  position: relative;
  height: 80px;
  cursor: pointer;
}
.right .items .nav-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #3d4152;
  font-size: 16px;
}
.nav-item a:hover {
  color: #fc8019;
}

.nav-item a span {
  padding-left: 11px;
}
.right .items li:last-child a svg {
  color: #60b246;
}

/* Content Section */
.restaurants .container {
  max-width: 1200px;
  min-width: 1200px;
  position: relative;
  margin: 0 auto;
  padding-top: 42px;
  top: 80px;
  background: #fff;
  left: 31px;
}
.container .item-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .item-bar .number {
  font-weight: 600;
  font-size: 28px;
  color: #282c3f;
  margin-top: -3px;
}
.container .item-bar::after {
  color: #3d4152;
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  height: 1px;
  top: 81px;
  background: #e9e9eb;
}

.container .item-bar .filters {
  display: flex;
  align-items: center;
}
.container .item-bar .filters div {
  font-size: 16px;
  font-weight: 300;
  color: #686b78;
  margin-left: 35px;
  cursor: pointer;
  position: relative;
}

.filters div:hover::after {
  color: #3d4152;
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  height: 1px;
  top: 31px;
  background: #282c3f;
}
.restaurant-list {
  margin-bottom: 85px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  justify-content: space-between;
  padding-top: 39px;
  margin-top: 25px;
}

.restaurant-list .place-link {
  background: #fff;
  display: block;
  text-decoration: none;
  color: inherit;
}
.restaurant-list .list-item {
  padding: 25px 25px 57px;
  border: 1px solid #fff;
  contain: content;
}
.restaurant-list .list-item:hover {
  border-color: #d3d5df;
  box-shadow: 0 4px 7px 0 rgb(218 220 230 / 60%);
}
.restaurant-list .item-content {
  width: 254px;
  position: relative;
}
.top-img {
  background: #eef0f5;
  width: 254px;
  height: 160px;
  position: relative;
}
.top-img img {
  opacity: 1;
}
.status {
  position: absolute;
  left: -8px;
  top: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 9px 4px;
  max-width: 50%;
  text-transform: uppercase;
}
.status::before {
  position: absolute;
  bottom: -9px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-color: inherit;
  left: 0;
  border-width: 9px 0 0 9px;
}

.place-name-div {
  margin-top: 14px;
}
.place-name-div .name {
  font-size: 17px;
  font-weight: 500;
  /* to bring text in next line */
  word-break: break-word;
}
.place-name-div .food-items {
  color: #686b78;
  font-size: 13px;
  margin-top: 4px;
  font-weight: 300;
}
.info-div {
  display: flex;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  justify-content: space-between;
  color: #535665;
  font-weight: 300;
}
.info-div .rating {
  background-color: #db7c38;
  color: #fff;
  height: 20px;
  width: 36px;
  padding: 0 5px;
  font-weight: 400;
  display: flex;
  align-items: center;
}
.icon-star {
  font-size: 10px;
  margin-right: 4px;
  position: relative;
  top: -1px;
}
.offer-div {
  border-top: 1px solid #e9e9eb;
  padding-top: 14px;
  margin-top: 14px;
  color: #8a584b;
  display: flex;
  align-items: center;
  font-weight: 600;
}
.offer-div .icon-offer-filled {
  font-size: 16px;
  width: 20px;
  height: 16px;
  margin-right: 4px;
}

.offer-div .offer-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}
.offer-text .fa-tags {
  margin-right: 2px;
}

.place:hover .quick-view {
  visibility: visible !important;
}

.quick-view {
  color: #686b78;
  font-size: 13px;
  visibility: hidden;
  border-top: 1px solid #e9e9eb;
  padding-top: 14px;
  margin-top: 14px;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
}

.quick-view .view-btn {
  color: #5d8ed5;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
}
.footer {
  padding: 0 20px;
  z-index: 10;
  background-color: #000;
  min-height: 298px;
  width: 100%;
  color: #fff;
  overflow: scroll;
}
.footer-content {
  width: 100%;
  display: flex;
  background-color: #000000;
  justify-content: space-around;
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  padding: 76px 0;
  height: 100%;
}

.points {
  color: #808080;
  font-size: 15px;
  font-weight: 600;
  /*    border: 1px solid white;*/
  width: 300px;
  margin: 26px 0px 10px 15px;
  /*    padding: 15px 0px 0px 0px;*/
}

.footer-li {
  padding: 20px 10px 2px 0px;
}

.footer-ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.footer-li a {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
}

.footer-li a:hover {
  font-weight: 600;
}

.points img {
  border: 2px solid #808080;
  padding: 10px;
  margin: 30px 0px 10px 57px;
  border-radius: 10px;
  transition: transform 0.5s;
}

.points img:hover {
  transform: scale(1.06);
  cursor: pointer;
}
   </style> 
    <div class="main-container">
      <header class="navbar">
        <div class="global-nav">
          <div class="nav">
            <div class="left">
              <a href="#home" class="logo">
                <svg
                  class="_8pSp-"
                  viewBox="0 0 559 825"
                  height="49"
                  width="34"
                  fill="#fc8019"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M542.92 388.542C546.805 366.526 542.355 349.598 530.881 340.76C513.621 327.466 487.698 320.236 425.954 320.236C380.271 320.236 331.225 320.286 310.268 320.275C308.322 319.894 301.285 317.604 301.02 309.112L300.734 174.289C300.727 165.779 307.531 158.857 315.943 158.839C324.369 158.825 331.204 165.723 331.211 174.226C331.211 174.226 331.421 247.414 331.441 273.424C331.441 275.936 332.892 281.8 338.549 283.328C375.43 293.267 561.865 285.999 558.967 251.804C543.147 109.96 424.476 0 280.394 0C235.021 0 192.065 10.9162 154.026 30.2754C62.9934 77.5955 -1.65904 173.107 0.0324268 283.43C1.23215 361.622 52.2203 500.605 83.434 521.234C97.8202 530.749 116.765 527.228 201.484 527.228C239.903 527.228 275.679 527.355 293.26 527.436C295.087 527.782 304.671 530.001 304.671 538.907L304.894 641.393C304.915 649.907 298.104 656.826 289.678 656.829C281.266 656.843 274.434 649.953 274.42 641.446C274.42 641.446 275.17 600.322 275.17 584.985C275.17 581.435 275.424 575.339 265.178 570.727C231.432 555.553 121.849 564.712 115.701 581.457C113.347 587.899 125.599 612.801 144.459 644.731C170.102 685.624 211.889 747.245 245.601 792.625C261.047 813.417 268.77 823.813 280.467 824.101C292.165 824.389 300.514 814.236 317.213 793.928C383.012 713.909 516.552 537.663 542.92 388.542Z"
                    fill="url(#paint0_linear_19447_66107)"
                  ></path>
                  <defs>
                    <linearGradient
                      id="paint0_linear_19447_66107"
                      x1="445.629"
                      y1="63.8626"
                      x2="160.773"
                      y2="537.598"
                      gradientUnits="userSpaceOnUse"
                    >
                      <stop stop-color="#FF993A"></stop>
                      <stop offset="1" stop-color="#F15700"></stop>
                    </linearGradient>
                  </defs>
                </svg>
              </a>
              <div class="location-div">
                <span class="other">Other</span>
                <span class="location">Bengaluru, Karnataka, India</span>
                <span class="arrow-down"
                  ><i class="fa-solid fa-angle-down"></i
                ></span>
              </div>
            </div>
            <div class="right">
              <ul class="items">
                <li>
                  <div class="nav-item">
                    <a href="">
                      <svg
                        class="_1GTCc"
                        viewBox="5 -1 12 25"
                        height="17"
                        width="17"
                        fill="#686b78"
                      >
                        <path
                          d="M17.6671481,17.1391632 L22.7253317,22.1973467 L20.9226784,24 L15.7041226,18.7814442 C14.1158488,19.8024478 12.225761,20.3946935 10.1973467,20.3946935 C4.56550765,20.3946935 0,15.8291858 0,10.1973467 C0,4.56550765 4.56550765,0 10.1973467,0 C15.8291858,0 20.3946935,4.56550765 20.3946935,10.1973467 C20.3946935,12.8789625 19.3595949,15.3188181 17.6671481,17.1391632 Z M10.1973467,17.8453568 C14.4212261,17.8453568 17.8453568,14.4212261 17.8453568,10.1973467 C17.8453568,5.97346742 14.4212261,2.54933669 10.1973467,2.54933669 C5.97346742,2.54933669 2.54933669,5.97346742 2.54933669,10.1973467 C2.54933669,14.4212261 5.97346742,17.8453568 10.1973467,17.8453568 Z"
                        ></path>
                      </svg>
                      <span>Search</span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="nav-item">
                    <a href="">
                      <svg
                        class="_1GTCc"
                        viewBox="0 0 32 32"
                        height="19"
                        width="19"
                        fill="#686b78"
                      >
                        <path
                          d="M14.2 2.864l-1.899 1.38c-0.612 0.447-1.35 0.687-2.11 0.687h-2.352c-0.386 0-0.727 0.248-0.845 0.613l-0.728 2.238c-0.235 0.721-0.691 1.348-1.302 1.79l-1.905 1.385c-0.311 0.226-0.442 0.626-0.323 0.991l0.728 2.241c0.232 0.719 0.232 1.492-0.001 2.211l-0.727 2.237c-0.119 0.366 0.011 0.767 0.323 0.994l1.906 1.384c0.61 0.445 1.064 1.070 1.3 1.79l0.728 2.24c0.118 0.365 0.459 0.613 0.844 0.613h2.352c0.759 0 1.497 0.24 2.107 0.685l1.9 1.381c0.313 0.227 0.736 0.227 1.048 0.001l1.9-1.38c0.613-0.447 1.349-0.687 2.11-0.687h2.352c0.384 0 0.726-0.248 0.845-0.615l0.727-2.235c0.233-0.719 0.688-1.346 1.302-1.794l1.904-1.383c0.311-0.226 0.442-0.627 0.323-0.993l-0.728-2.239c-0.232-0.718-0.232-1.49 0.001-2.213l0.727-2.238c0.119-0.364-0.012-0.765-0.324-0.992l-1.901-1.383c-0.614-0.445-1.070-1.074-1.302-1.793l-0.727-2.236c-0.119-0.366-0.461-0.614-0.845-0.614h-2.352c-0.76 0-1.497-0.239-2.107-0.685l-1.903-1.382c-0.313-0.227-0.736-0.226-1.047-0.001zM16.829 0.683l1.907 1.385c0.151 0.11 0.331 0.168 0.521 0.168h2.352c1.551 0 2.927 1 3.408 2.475l0.728 2.241c0.057 0.177 0.169 0.332 0.321 0.442l1.902 1.383c1.258 0.912 1.784 2.531 1.304 4.006l-0.726 2.234c-0.058 0.182-0.058 0.375-0.001 0.552l0.727 2.237c0.48 1.477-0.046 3.096-1.303 4.007l-1.9 1.38c-0.153 0.112-0.266 0.268-0.324 0.447l-0.727 2.237c-0.48 1.477-1.856 2.477-3.408 2.477h-2.352c-0.19 0-0.37 0.058-0.523 0.17l-1.904 1.383c-1.256 0.911-2.956 0.911-4.213-0.001l-1.903-1.384c-0.15-0.11-0.332-0.168-0.521-0.168h-2.352c-1.554 0-2.931-1.001-3.408-2.477l-0.726-2.234c-0.059-0.18-0.173-0.338-0.324-0.448l-1.902-1.381c-1.258-0.912-1.784-2.53-1.304-4.008l0.727-2.235c0.058-0.179 0.058-0.373 0.001-0.551l-0.727-2.236c-0.481-1.476 0.046-3.095 1.302-4.006l1.905-1.385c0.151-0.11 0.264-0.265 0.323-0.444l0.727-2.235c0.478-1.476 1.855-2.477 3.408-2.477h2.352c0.189 0 0.371-0.059 0.523-0.17l1.902-1.383c1.256-0.911 2.956-0.911 4.212 0zM18.967 23.002c-1.907 0-3.453-1.546-3.453-3.453s1.546-3.453 3.453-3.453c1.907 0 3.453 1.546 3.453 3.453s-1.546 3.453-3.453 3.453zM18.967 20.307c0.419 0 0.758-0.339 0.758-0.758s-0.339-0.758-0.758-0.758c-0.419 0-0.758 0.339-0.758 0.758s0.339 0.758 0.758 0.758zM10.545 14.549c-1.907 0-3.453-1.546-3.453-3.453s1.546-3.453 3.453-3.453c1.907 0 3.453 1.546 3.453 3.453s-1.546 3.453-3.453 3.453zM10.545 11.855c0.419 0 0.758-0.339 0.758-0.758s-0.339-0.758-0.758-0.758c-0.419 0-0.758 0.339-0.758 0.758s0.339 0.758 0.758 0.758zM17.78 7.882l2.331 1.352-7.591 13.090-2.331-1.352 7.591-13.090z"
                        ></path>
                      </svg>
                      <span>Offers</span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="nav-item">
                    <a href="">
                      <svg
                        class="_1GTCc"
                        viewBox="6 -1 12 25"
                        height="19"
                        width="19"
                        fill="#686b78"
                      >
                        <path
                          d="M21.966903,13.2244898 C22.0156989,12.8231523 22.0408163,12.4145094 22.0408163,12 C22.0408163,11.8357822 22.036874,11.6724851 22.029079,11.5101984 L17.8574333,11.5102041 C17.8707569,11.6717062 17.877551,11.8350597 17.877551,12 C17.877551,12.4199029 17.8335181,12.8295214 17.749818,13.2244898 L21.966903,13.2244898 Z M21.5255943,15.1836735 L16.9414724,15.1836735 C15.8950289,16.8045422 14.0728218,17.877551 12,17.877551 C9.92717823,17.877551 8.1049711,16.8045422 7.05852762,15.1836735 L2.47440565,15.1836735 C3.80564362,19.168549 7.56739481,22.0408163 12,22.0408163 C16.4326052,22.0408163 20.1943564,19.168549 21.5255943,15.1836735 Z M21.7400381,9.55102041 C20.6468384,5.18931674 16.7006382,1.95918367 12,1.95918367 C7.2993618,1.95918367 3.3531616,5.18931674 2.25996187,9.55102041 L6.6553883,9.55102041 C7.58404845,7.5276442 9.62792376,6.12244898 12,6.12244898 C14.3720762,6.12244898 16.4159515,7.5276442 17.3446117,9.55102041 L21.7400381,9.55102041 Z M2.03309705,13.2244898 L6.25018203,13.2244898 C6.16648186,12.8295214 6.12244898,12.4199029 6.12244898,12 C6.12244898,11.8350597 6.1292431,11.6717062 6.14256675,11.5102041 L1.97092075,11.5102041 C1.96312595,11.6724851 1.95918367,11.8357822 1.95918367,12 C1.95918367,12.4145094 1.98430112,12.8231523 2.03309705,13.2244898 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,15.9183673 C14.1640545,15.9183673 15.9183673,14.1640545 15.9183673,12 C15.9183673,9.83594547 14.1640545,8.08163265 12,8.08163265 C9.83594547,8.08163265 8.08163265,9.83594547 8.08163265,12 C8.08163265,14.1640545 9.83594547,15.9183673 12,15.9183673 Z"
                        ></path>
                      </svg>
                      <span>Help</span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="nav-item">
                    <a href="">
                      <svg
                        class="_1GTCc"
                        viewBox="6 0 12 24"
                        height="19"
                        width="18"
                        fill="#686b78"
                      >
                        <path
                          d="M11.9923172,11.2463768 C8.81761115,11.2463768 6.24400341,8.72878961 6.24400341,5.62318841 C6.24400341,2.5175872 8.81761115,0 11.9923172,0 C15.1670232,0 17.740631,2.5175872 17.740631,5.62318841 C17.740631,8.72878961 15.1670232,11.2463768 11.9923172,11.2463768 Z M11.9923172,9.27536232 C14.0542397,9.27536232 15.7257581,7.64022836 15.7257581,5.62318841 C15.7257581,3.60614845 14.0542397,1.97101449 11.9923172,1.97101449 C9.93039471,1.97101449 8.25887628,3.60614845 8.25887628,5.62318841 C8.25887628,7.64022836 9.93039471,9.27536232 11.9923172,9.27536232 Z M24,24 L0,24 L1.21786143,19.7101449 L2.38352552,15.6939891 C2.85911209,14.0398226 4.59284263,12.7536232 6.3530098,12.7536232 L17.6316246,12.7536232 C19.3874139,12.7536232 21.1256928,14.0404157 21.6011089,15.6939891 L22.9903494,20.5259906 C23.0204168,20.63057 23.0450458,20.7352884 23.0641579,20.8398867 L24,24 Z M21.1127477,21.3339312 L21.0851024,21.2122487 C21.0772161,21.1630075 21.0658093,21.1120821 21.0507301,21.0596341 L19.6614896,16.2276325 C19.4305871,15.4245164 18.4851476,14.7246377 17.6316246,14.7246377 L6.3530098,14.7246377 C5.4959645,14.7246377 4.55444948,15.4231177 4.32314478,16.2276325 L2.75521062,21.6811594 L2.65068631,22.0289855 L21.3185825,22.0289855 L21.1127477,21.3339312 Z"
                        ></path>
                      </svg>
                      <span>Sign In</span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="nav-item">
                    <a href="">
                      <svg
                        class="_1GTCc _173fq"
                        viewBox="-1 0 37 32"
                        height="20"
                        width="20"
                        fill="#60b246"
                      >
                        <path
                          d="M4.438 0l-2.598 5.11-1.84 26.124h34.909l-1.906-26.124-2.597-5.11z"
                        ></path>
                      </svg>
                      <span>Cart</span>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>

      <main class="content-section">
        <section class="restaurants">
          <div class="container">
            <div class="item-bar">
              <div class="number">1473 restaurants</div>
              <div class="filters">
                <div class="relevance">Relevance</div>
                <div class="delivery-time">Delivery Time</div>
                <div class="rating">Rating</div>
                <div class="cost-lh">Cost: Low To High</div>
                <div class="cost-hl">Cost: High To Low</div>
              </div>
            </div>
            <div class="restaurant-list">
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                >
                  <div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i
                        ></span>
                        <span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div>
                </a>
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>

                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating" style="background-color: #48c479">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>4.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>

                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating" style="background-color: #48c479">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>4.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
              <div class="place">
                <a
                  href="/restaurants/waffld-domlur-bangalore-303446"
                  class="place-link"
                  ><div class="list-item">
                    <div class="item-content">
                      <div class="top-img">
                        <img
                          class="_2tuBw _12_oN"
                          alt="Waffl'd"
                          width="254"
                          height="160"
                          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/ij1bpqqorgfiia4ty7gh"
                        />
                      </div>
                      <div
                        class="status"
                        style="
                          background: rgb(58, 60, 65);
                          color: rgb(255, 255, 255);
                          border-color: rgb(30, 32, 35) transparent;
                        "
                      >
                        <div class="status-title">Promoted</div>
                      </div>
                      <div class="place-name-div">
                        <div class="name">Waffl'd</div>
                        <div
                          class="food-items"
                          title="Bakery, Desserts, Beverages, Combo, European, Ice Cream, Juices, Waffle, Sweets"
                        >
                          Bakery, Desserts, Beverages, Combo, European, Ice
                          Cream, Juices, Waffle, Sweets
                        </div>
                      </div>
                      <div class="info-div">
                        <div class="rating">
                          <span class="icon-star"
                            ><i class="fa-solid fa-star"></i></span
                          ><span>3.8</span>
                        </div>
                        <div>•</div>
                        <div>44 MINS</div>
                        <div>•</div>
                        <div class="price">₹200 FOR TWO</div>
                      </div>
                      <div class="offer-div">
                        <span class="icon-offer-filled"
                          ><i class="fa-solid fa-tags"></i></span
                        ><span class="offer-text">50% off | Use WELCOME50</span>
                      </div>
                    </div>
                    <div class="quick-view">
                      <span role="button" aria-label="Open" class="view-btn"
                        >Quick View</span
                      >
                    </div>
                  </div></a
                >
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer class="footer">
        <div class="footer-content">
          <div class="points">
            COMPANY
            <ul class="footer-ul">
              <li class="footer-li"><a href="#">About us</a></li>
              <li class="footer-li"><a href="#">Team</a></li>
              <li class="footer-li"><a href="#">Careers</a></li>
              <li class="footer-li"><a href="#">Swiggy Blog</a></li>
              <li class="footer-li"><a href="#">Bug Bounty</a></li>
              <li class="footer-li"><a href="#">Swiggy Super</a></li>
              <li class="footer-li"><a href="#">Swiggy Corporate</a></li>
              <li class="footer-li"><a href="#">Swiggy Instamart</a></li>
            </ul>
          </div>
          <div class="points">
            CONTACT
            <ul class="footer-ul">
              <li class="footer-li"><a href="#">Help & Support</a></li>
              <li class="footer-li"><a href="#">Partner with us</a></li>
              <li class="footer-li"><a href="#">Ride with us</a></li>
            </ul>
          </div>
          <div class="points">
            LEGAL
            <ul class="footer-ul">
              <li class="footer-li"><a href="#">Terms & Conditions</a></li>
              <li class="footer-li"><a href="#">Refund & Cancellation</a></li>
              <li class="footer-li"><a href="#">Privacy Policy</a></li>
              <li class="footer-li"><a href="#">Cookie Policy</a></li>
              <li class="footer-li"><a href="#">Offer Terms</a></li>
              <li class="footer-li"><a href="#">Phishing & Fraud</a></li>
            </ul>
          </div>
          <div class="points">
            <img
              src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,h_108/play_ip0jfp"
              height="54"
            />
            <img
              src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,h_108/iOS_ajgrty"
              height="54"
            />
          </div>
        </div>
      </footer>
    </div>
    <!-- <div class="box">
      <div class="left">
        <div class="top">
          <div class="logo">
            <img
              src="https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Swiggy_logo.svg/2560px-Swiggy_logo.svg.png"
            />
          </div>
          <div class="buttons">
            <a href="#" id="btn1">Login</a>
            <a href="#" id="btn2">Sign up</a>
          </div>
        </div>
        <div class="text">
          <h1 id="text-head">Hungry?</h1>
          <p>Order food from favourite restaurants near you.</p>
        </div>
        <div class="location-box">
          <div class="location-search">
            <input type="text" placeholder="Enter your delivery location" />
          </div>

          <div class="location-button">
            <a href="#">FIND FOOD</a>
          </div>
        </div>
        <div class="bottom">
          <h4>POPULAR CITIES IN INDIA</h4>
          <ul>
            <li><a href="#">Ahmedabad</a></li>
            <li><a href="#">Bangalore</a></li>
            <li><a href="#">Chennai</a></li>
            <li><a href="#">Delhi</a></li>
            <li><a href="#">Gurgaon</a></li>
            <li><a href="#">Hyderabad</a></li>
            <li><a href="#">Kolkata</a></li>
            <li><a href="#">Mumbai</a></li>
            <li><a href="#">Pune</a></li>
            <li><a href="#">& more.</a></li>
          </ul>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="function">
      <div class="fun-box">
        <img
          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_210,h_398/4x_-_No_min_order_x0bxuf"
          width="105"
          height="199"
        />
        <h4>No Minimum Order</h4>
        <p>
          Order in for yourself or for the group, with no restrictions on order
          value
        </p>
      </div>
      <div class="fun-box">
        <img
          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_224,h_412/4x_Live_order_zzotwy"
          width="112"
          height="206"
        />
        <h4>Live Order Tracking</h4>
        <p>
          Know where your order is at all times, from the restaurant to your
          doorstep
        </p>
      </div>
      <div class="fun-box">
        <img
          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_248,h_376/4x_-_Super_fast_delivery_awv7sn"
          width="124"
          height="188"
        />
        <h4>Lightning-Fast Delivery</h4>
        <p>
          Experience Swiggy's superfast delivery for food delivered fresh & on
          time
        </p>
      </div>
    </div>
    <div class="app">
      <div class="app-text">
        <h1>Restaurants in your pocket</h1>
        <p>
          Order from your favorite restaurants & track on the go, with the
          all-new Swiggy app.
        </p>
        <div class="app-button">
          <img
            src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,h_108/play_ip0jfp"
            height="54"
          />
          <img
            src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,h_108/iOS_ajgrty"
            height="54"
          />
        </div>
      </div>
      <div class="app-image">
        <img
          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_768,h_978/pixel_wbdy4n"
          height="489"
          width="384"
        />
        <img
          src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_768,h_978/iPhone_wgconp_j0d1fn"
          height="489"
          width="384"
        />
      </div>
    </div> -->
  </body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter