Merge pull request #8 from madhuramendis/main

Update animation

Author: madhuramendis

css/openchoreo.css

@@ -31,6 +31,10 @@ h2 {
     margin-bottom: 10px;
 }
 
+.cIntro h2 {
+    margin-bottom: 30px;
+}
+
 h3 {
     font-size: 24px;
     line-height: 30px;
@@ -75,7 +79,7 @@ background-color: #fff;
 
 .cButtonIcon {
 
-        background-image: url(../img/github.webp);
+        background-image: url(/img/github.webp);
         background-size: 30px;
         background-position: 10px center;
         background-repeat: no-repeat;
@@ -121,7 +125,7 @@ background-color: #fff;
 
 
 .cButton.cOutlineCTA {
-    background-image: url(../img/bgicons-new-01.webp);
+    background-image: url(/img/bgicons-new-01.webp);
     background-size: 40px;
     background-position: 10px center;
     background-repeat: no-repeat;
@@ -139,5 +143,12 @@ background-color: #fff;
 .cButton.cOutlineCTA:hover {
     background-color: #36A1FF;
 }
+.cVideo {
+    border-radius: 10px;
+    margin-top: 15px;
+}
+.cVideoContainer {
+    padding-right: 30px;
+}
 
 

img/Animation-for-Website-for-OpenChoreo.webm

@@ -7,7 +7,7 @@
 
     <div class="container">
  <div class="row">
-    <div class="col-sm-12 col-md-6 col-lg-6">
+    <div class="col-sm-12 col-md-7 col-lg-7">
         <span class="cLOGO">OpenChoreo</span>
         <h1>The Open-Source 
             Internal Developer Platform  
@@ -97,9 +97,12 @@ <h2>What Makes OpenChoreo Different?</h2>
         </div>
 
         <div class="row">
-            <div class="col-sm-12 col-md-8 col-lg-8">
-                <!-- <img class="cIcon" src="https://placehold.co/782x782"/> -->
+            <div class="col-sm-12 col-md-8 col-lg-8 cVideoContainer">
+               <video class="cVideo" style=" width: 100%;" class="aos-init aos-animate" data-aos="zoom-in" autoplay="" loop="" muted="">
+                    <source src="./img/Animation-for-Website-for-OpenChoreo.webm" type="video/webm">
+                  </video>
             </div>
+           
             <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cSidePanel">
                   <h3>Platform Abstractions</h3>