external fixes1

src/app/External-Page/external-page-content/external-page-content.component.html

@@ -43,12 +43,18 @@
                 <div class="externalServices-w">
                   <div class="row">
                     <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
-                      <a href="{{service.link}}">
-                        <div class="item text-center">
-                          <img src="{{authSer.pathImg + service.photo}}" />
-                          <p>{{service.name}}</p>
-                        </div>
-                      </a>
+                      <div class="animated" style="position:relative">
+                        <a href="{{service.link}}">
+                            <div class="item text-center">
+                              <img src="{{authSer.pathImg + service.photo}}" />
+                              <p>{{service.name}}</p>
+                            </div>
+                        </a>
+                        <span class="one"></span>
+                        <span class="two"></span>
+                        <span class="three"></span>
+                        <span class="four"></span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -58,7 +64,7 @@
                 <div class="lectureService-w">
                   <div class="row">
                     
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 hidden-xs">
                       <div class="advertisimentServices-w text-center">
                         <h1>خدمات إعلانيه</h1>
                         <div class="body">

src/styles.css

@@ -1024,6 +1024,58 @@ height: 7px !important;
   transform: scale(1.1);
 }
 
+.one {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 3px;
+  background-color: #000;
+  transition: all 0.5s;
+  border-radius: 20px;
+}
+
+.two {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background-color: #000;
+  transition: all 0.5s;
+  border-radius: 20px;
+}
+
+.three {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 3px;
+  height: 0;
+  background-color: #000;
+  transition: all 0.5s;
+}
+
+.four {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 3px;
+  background-color: #000;
+  transition: all 0.5s;
+}
+
+.externalPageContentt-w .externalServices-w .animated:hover .one,
+.externalPageContentt-w .externalServices-w .animated:hover .three {
+  height: 100%;
+}
+
+.externalPageContentt-w .externalServices-w .animated:hover .two,
+.externalPageContentt-w .externalServices-w .animated:hover .four {
+  width: 100%;
+}
+