diff --git a/templates/services.html b/templates/services.html
new file mode 100644
index 00000000..59097fb5
--- /dev/null
+++ b/templates/services.html
@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+
+
+<style>
+@import url('https://fonts.googleapis.com/css?family=Poppins|Ubuntu&display=swap');
+
+
+*
+{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body
+{
+    background: #fff;
+    font-family: 'Ubuntu', sans-serif;
+
+}
+
+.services
+{
+    display: block;
+    position: relative;
+    padding: 0;
+
+}
+.container
+{
+    max-width: 1200px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.services-title
+{
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+    
+}
+.services-box
+{
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+    margin-top: -15px;
+    
+}
+
+.title{
+    margin-left: 15px;
+    position: relative;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 40px;
+    text-align: center;
+    top: 26px;
+}
+/**
+.services-title>span {
+    height: 36px;
+    width: 130px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    display: inline-block;
+    font-size: 20px;
+    color:rgb(255, 74, 50);
+ 
+}****/
+.services-title h2 {
+    margin-top: -10px;
+    margin-bottom: 6px;
+    text-transform: capitalize;
+    font-size: 36px;
+    line-height: 48px;
+    font-weight: 700;
+    color: #333;
+    font-family: 'ubuntu',sans-serif;
+
+}
+.services-title h2 span
+{
+    color: #3c44a9;
+}
+
+
+.box
+{
+    position: relative;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    max-width: 33.333333%;
+
+}
+.ser-box
+{    margin-top: 75px;
+    padding: 0 60px;
+    padding-bottom: 30px;
+    min-height: 198px;
+    text-align: center;
+    border-radius: 10px;
+    background-color: #fff;
+    -webkit-transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    -ms-transition: all .4s ease-in-out;
+    -o-transition: all .4s ease-in-out;
+    transition: all .4s ease-in-out;
+    -webkit-box-shadow: 0 0 25px 0 rgba(20,27,201,.17);
+    box-shadow: 0 0 25px 0 rgba(20,27,201,.17);
+}
+
+.ser-box .icon
+{
+    margin-bottom: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    text-align: center;
+}
+.ser-box h4
+{
+    font-size: 20px;
+    line-height: 1;
+    font-weight: 700;
+    color: #3c44a9;
+    margin-top: -10px;
+    font-family: 'Ubuntu', sans-serif;
+
+}
+.ser-box p {
+    color: #61648e;
+    line-height: 24px;
+    margin-top: 20px;
+    font-family: 'Ubuntu', sans-serif;
+
+}
+
+
+.ser-box:hover {
+ background-image:-moz-linear-gradient(-45deg,#fb0054 0%,#f55b2a 100%);
+ background-image:-webkit-linear-gradient(-45deg,#fb0054 0%,#f55b2a 100%);
+ background-image:-ms-linear-gradient(-45deg,#fb0054 0%,#f55b2a 100%);
+ -webkit-box-shadow:0 0 25px 0 rgba(20,27,201,.05);
+ box-shadow:0 0 25px 0 rgba(20,27,201,.05);
+ cursor:pointer
+}
+
+.ser-box:hover h4,
+.ser-box:hover p {
+ color:#fff
+}
+
+
+
+.services-box .box:nth-child(1) .ser-box:hover {
+ background-image:-webkit-linear-gradient(-45deg,#34b5bf 0%,#210c59 100%);
+ background-image:linear-gradient(-45deg,#34b5bf 0%,#210c59 100%)
+}
+.services-box .box:nth-child(3) .ser-box:hover {
+ background-image:-webkit-linear-gradient(-45deg,#3615e7 0%,#44a2f6 100%);
+ background-image:linear-gradient(-45deg,#3615e7 0%,#44a2f6 100%)
+}
+.services-box .box:nth-child(4) .ser-box:hover{
+ background-image:-webkit-linear-gradient(-45deg,#fc6a0e 0%,#fdb642 100%);
+ background-image:linear-gradient(-45deg,#fc6a0e 0%,#fdb642 100%);
+}
+.services-box .box:nth-child(5) .ser-box:hover {
+ background-image:linear-gradient(-45deg,#8d40fb 0%,#5a57fb 100%);
+ background-image:-webkit-linear-gradient(-45deg,#8d40fb 0%,#5a57fb 100%);
+
+}
+.services-box .box:nth-child(6) .ser-box:hover {
+ background-image:-webkit-linear-gradient(-45deg,#27b88d 0%,#22dd73 100%);
+ background-image:linear-gradient(-45deg,#27b88d 0%,#22dd73 100%)
+}
+
+
+
+
+
+
+@media (min-width: 768px){
+.box 
+{
+    flex: 0 0 50% !important;
+    max-width: 50% !important;
+}
+
+}
+
+
+
+@media (min-width: 600px){
+.box 
+{
+    flex: 0 0 50% !important;
+    max-width: 50% !important;
+}
+
+}
+
+
+
+
+
+@media (min-width: 992px)
+{
+.box 
+{
+    flex: 0 0 33.333333% !important;
+    max-width: 33.333333% !important;
+}
+}
+
+
+@media (min-width: 414px){
+.box 
+{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+}
+
+@media (min-width: 370px){
+.box 
+{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+}
+
+@media (min-width: 320px){
+.box 
+{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+}
+
+
+
+
+
+
+
+</style>
+
+
+
+
+
+</head>
+<body>
+   
+<section class="services">
+
+    <div class="container">
+ 
+        <div class="services-title">
+            <div class="title">
+                  <!---- <span>S</span> ----->
+                   <h2><span> Our </span> Services</h2>
+            </div>
+        </div>
+
+        <div class="services-box">
+           
+           <div class="box">
+                  <div class="ser-box">
+                     <div class="icon">
+                         <img src="setting.png">
+                     </div>
+                     <h4>Easy to Setup</h4>
+                     <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+                  </div>
+           </div>
+
+           <div class="box">
+                <div class="ser-box">
+                   <div class="icon">
+                       <img src="speed.png">
+                   </div>
+                   <h4>Fast Performance</h4>
+                   <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+                </div>
+           </div>
+
+          <div class="box">
+            <div class="ser-box">
+               <div class="icon">
+                   <img src="protect.png">
+               </div>
+               <h4>Privacy Protected</h4>
+               <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+            </div>
+          </div>
+
+          <div class="box">
+            <div class="ser-box">
+               <div class="icon">
+                   <img src="backup.png">
+               </div>
+               <h4>Monthly Backup</h4>
+               <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+            </div>
+          </div>
+
+          <div class="box">
+          <div class="ser-box">
+             <div class="icon">
+                 <img src="/freessl.png">
+             </div>
+             <h4>Free SSL Certificate</h4>
+             <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+          </div>
+          </div>
+
+          <div class="box">
+           <div class="ser-box">
+              <div class="icon">
+                 <img src="database.png">
+              </div>
+             <h4>Unlimited Database</h4>
+             <p>Lorem Ipsum is simply dummy and typesetting industry.</p>
+           </div>
+          </div>
+
+
+        </div>
+
+    </div>
+</section>    
+
+
+
+
+</body>
+</html>
