Square Card with Shadow

Use this awesome service component from smarteyeapps.com and boost your website development now

Copy and Paste the code or Download and Use

You can use this Square Card with Shadow 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 Square Card with Shadow 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 class="services">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="session-title">
                                <h2>Services</h2>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque at numquam, asperiores aut praesentium facilis</p>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-1.png">
                                    <h4>High Quality Foods</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-2.png">
                                    <h4>Inspiring Recipes</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-3.png">
                                    <h4>Salutary Meals</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-4.png">
                                    <h4>Veteran Staff</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-5.png">
                                    <h4>Pristine Ingredientss</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="wrapper">
                                <div class="content">
                                    <img src="assets/images/ico-6.png">
                                    <h4>Express Delivery</h4>
                                    <p>There are many variations of passages of Lorem Ipsum 
                                    available, but the majority have suffered alteration in some 
                                    form, by injected humou</p>
                                </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;
}

.services .wrapper {
  display: block;
  position: relative;
  margin: 1.25rem 0;
  padding: 1.25rem 1.875rem;
  background: #fff;
  border-radius: 0.3125rem;
  -webkit-box-shadow: 0 12px 25px -1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 25px -1px rgba(0, 0, 0, 0.1);
}
.services .wrapper .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.625rem 0;
  position: relative;
}
.services .wrapper .content img {
  display: block;
  margin: 0.3125rem;
}
.services .wrapper .content h4 {
  font-size: 1rem;
  color: #3c3c3cfc;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  display: inline-block;
  font-weight: bold;
  margin: 0.3125rem 0;
}
.services .wrapper .content p {
  display: block;
  margin: 0.3125rem 0;
  color: #666666;
  font-size: 0.9rem;
  text-align: justify;
}

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