Restuarent

Stylish and more easy to use restaurant web component from smarteyeapps.com. This component has beautiful social media icons too

Copy and Paste the code or Download and Use

You can use this Restuarent web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Restuarent by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2, Add the HTML Files to the Document
  <section id="teacher" class="team contaienr-fluid">
        <div class="container">
            <div class="session-title">
                <h2>Our Chef</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
            </div>
            <div class="main-team-card d-flex">
                <div class="team-setup">
                    <div class="team-items">
                        <div class="team-user">
                        <img src="images/1.jpg">
                        </div>
                        <div class="team-user-social">
                        <ol>
                            <li><a href=""><i class="fab fa-facebook-square"></i></a></li>
                            <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
                            <li><a href=""><i class="fab fa-pinterest-square"></i></a></li>
                            <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
                        </ol>
                        </div>
                        <div class="team-name">
                        <h2>Mark Anthony</h2>
                        <b>Founder & CEO</b>
                        </div>
                    </div>
                </div>

                <div class="team-setup">
                    <div class="team-items">
                        <div class="team-user">
                        <img src="images/2.jpg">
                        </div>
                        <div class="team-user-social">
                        <ol>
                            <li><a href=""><i class="fab fa-facebook-square"></i></a></li>
                            <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
                            <li><a href=""><i class="fab fa-pinterest-square"></i></a></li>
                            <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
                        </ol>
                        </div>
                        <div class="team-name">
                        <h2>Jessica Lee</h2>
                        <b>Chinese Kitchen Lead</b>
                        </div>
                    </div>
                </div>

                <div class="team-setup">
                    <div class="team-items">
                        <div class="team-user">
                        <img src="images/3.jpg">
                        </div>
                        <div class="team-user-social">
                        <ol>
                            <li><a href=""><i class="fab fa-facebook-square"></i></a></li>
                            <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
                            <li><a href=""><i class="fab fa-pinterest-square"></i></a></li>
                            <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
                        </ol>
                        </div>
                        <div class="team-name">
                        <h2>John Bennett</h2>
                        <b>French Kitchen Lead</b>
                        </div>
                    </div>
                </div>

                <div class="team-setup">
                    <div class="team-items">
                        <div class="team-user">
                        <img src="images/4.jpg">
                        </div>
                        <div class="team-user-social">
                        <ol>
                            <li><a href=""><i class="fab fa-facebook-square"></i></a></li>
                            <li><a href=""><i class="fab fa-twitter-square"></i></a></li>
                            <li><a href=""><i class="fab fa-pinterest-square"></i></a></li>
                            <li><a href=""><i class="fab fa-instagram-square"></i></a></li>
                        </ol>
                        </div>
                        <div class="team-name">
                        <h2>ANDERSON JHON</h2>
                        <b>Sous Chef</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>  
3, Add the CSS Files at the Header of the Document
  .session-title {
  padding: 30px;
  margin: 0px;
}
.session-title h2 {
  width: 100%;
  text-align: center;
}
.session-title p {
  width: 100%;
  text-align: center;
}

.team .heading {
  display: block;
  margin: 1.25rem 0;
  text-align: center;
}
.team .heading h2 {
  font-size: 1.875rem;
  color: #2c2c2c;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  position: relative;
  margin: 0.3125rem 0;
  font-weight: 600;
  display: inline-block;
  padding: 0.3125rem;
}
.team .heading h2::before {
  position: absolute;
  content: "";
  height: 0.1875rem;
  width: 3.125rem;
  background: #ED2433;
  bottom: 0;
}
.team .heading h2 span {
  color: #ED2433;
  margin-left: 0.3125rem;
}
.team .main-team-card {
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 15px;
  margin: 20px 0px;
  position: relative;
  transition: 0.5s;
}
.team .main-team-card .team-setup {
  margin: 0 0 20px 0;
  padding: 10px;
  flex: 1 1 25%;
  width: 25%;
  max-width: 25%;
}
@media screen and (max-width: 375px) {
  .team .main-team-card .team-setup {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    -webkit-flex-direction: 1 1 100%;
    -moz-flex-direction: 1 1 100%;
    -ms-flex-direction: 1 1 100%;
  }
}
@media (min-width: 376px) and (max-width: 767.98px) {
  .team .main-team-card .team-setup {
    width: 50%;
    max-width: 50%;
    flex: 1 1 50%;
    -webkit-flex-direction: 1 1 50%;
    -moz-flex-direction: 1 1 50%;
    -ms-flex-direction: 1 1 50%;
  }
}
.team .main-team-card .team-setup .team-items {
  width: 100%;
  display: block;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
  transition: 0.5s;
  position: relative;
}
.team .main-team-card .team-setup .team-items:hover .team-user-social {
  opacity: 1;
  visibility: visible;
  left: 0;
  display: block;
}
.team .main-team-card .team-setup .team-items:hover .team-user::before {
  width: 100%;
  opacity: 1;
  visibility: visible;
  display: block;
}
.team .main-team-card .team-setup .team-items .team-name {
  padding: 5px 0px 15px 0;
  position: relative;
  display: block;
  text-align: center;
  z-index: 2;
}
.team .main-team-card .team-setup .team-items .team-name::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  top: -10px;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  left: 47%;
  z-index: 1;
}
.team .main-team-card .team-setup .team-items .team-name h2 {
  font-size: 18px;
  color: #2c2c2c;
  margin-bottom: 0px;
}
.team .main-team-card .team-setup .team-items .team-name b {
  font-size: 15px;
  color: #666666;
}
.team .main-team-card .team-setup .team-items .team-user {
  overflow: hidden;
  position: relative;
  transition: 0.5s;
}
.team .main-team-card .team-setup .team-items .team-user img {
  width: 100%;
}
.team .main-team-card .team-setup .team-items .team-user::before {
  position: absolute;
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(237, 36, 51, 0.5);
}
.team .main-team-card .team-setup .team-items .team-user-social {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  padding: 5px 0px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: 0.5s;
  display: block;
  margin: 0.625rem 0 0.3125rem 0;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .team .main-team-card .team-setup .team-items .team-user-social {
    top: 40%;
  }
}
.team .main-team-card .team-setup .team-items .team-user-social ol {
  margin-bottom: 0px;
  padding-left: 0px;
}
.team .main-team-card .team-setup .team-items .team-user-social ol li {
  display: inline-block;
  padding-right: 0.625rem;
  color: #fff;
  transition: 0.6s;
  height: 2.5rem;
  width: 2.5rem;
  background: #ED2433;
  line-height: 2.5rem;
  text-align: center;
  padding: 0rem;
  font-size: 1rem;
  margin-right: 0.3125rem;
}
.team .main-team-card .team-setup .team-items .team-user-social ol li a {
  color: #FFF;
}
.team .main-team-card .team-setup .team-items .team-user-social ol li i {
  font-size: 1.2rem;
  padding-top: 10px;
  text-align: center;
}
.team .main-team-card .team-setup .team-items .team-user-social ol li:hover {
  color: #ED2433;
  transform: translateX(-0.3125rem);
}
.team .main-team-card .team-setup .team-items .team-user-social ol li:hover i {
  color: #fff;
}

Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies