Feature/compatible software

docs/source/_static/css/comp-soft.css

@@ -0,0 +1,76 @@
+.comp-soft-wrapper {
+
+  width: 700px;
+  margin: 0 auto;
+
+  --s: 150px;  /* size  */
+  --m: 8px;    /* margin */
+  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
+}
+
+@media (max-width: 767px) {
+  .comp-soft-wrapper {
+
+    width: 100vw;
+    margin: 0 auto;
+  }
+}
+
+.comp-soft-section {
+  width: 100vw;
+  background-color: var(--colorPrimaryDark);
+  padding: 50px 0;
+}
+
+.comp-soft-title {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 20px;
+
+  letter-spacing: 1.5px;
+  font-size: 27px;
+  font-weight: bold;
+
+  color: white;
+}
+
+.comp-soft-container {
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 767px) {
+  .comp-soft-container {
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+  }
+}
+
+.comp-soft-container .comp-soft {
+  width: var(--s);
+  min-width: var(--s);
+  margin: var(--m) var(--m) 0;
+  height: var(--s); 
+  font-size:initial;
+  border-radius: 50%;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+@media (max-width: 767px) {
+  .comp-soft-container .comp-soft {
+    margin: var(--m);
+  }
+}
+
+.comp-soft-image-holder {
+  display: flex;
+  align-items: center;
+  height: var(--s);
+  justify-content: center;
+}
+
+.comp-soft-image-holder img {
+  max-width: 80%;
+}

docs/source/_static/css/sponsors.css

@@ -0,0 +1,38 @@
+.sponsors-wrapper {
+  margin: 50px 0;
+  width: 100%;
+}
+
+.sponsors-title {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 20px;
+
+  letter-spacing: 1.5px;
+  font-size: 27px;
+  font-weight: bold;
+}
+
+.sponsors {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 767px) {
+  .sponsors {
+    flex-direction: column;
+  }
+}
+
+.sponsors-logo {
+  width: 220px;
+  height: 200px;
+
+  padding: 0 10px;
+
+  display: flex;
+  align-items: center;
+}

docs/source/_templates/home.html

@@ -18,6 +18,8 @@
 
     <link rel="stylesheet" href="_static/css/util.css" />
     <link rel="stylesheet" href="_static/css/main.css" />
+    <link rel="stylesheet" href="_static/css/sponsors.css" />
+    <link rel="stylesheet" href="_static/css/comp-soft.css" />
     <link rel="stylesheet" href="_static/css/navbar.css" />
 
     <link rel="stylesheet" href="_static/vendor/vars.css" />
@@ -557,14 +559,70 @@ <h3 class="h-card__title">Mathematics</h3>
 
 
 
-
-
     <div id="backtotop"><a href="#" id="backtotop-color"></a></div>
+    <section class="comp-soft-section">
+        <h3 class="comp-soft-title">
+            Compatibility
+        </h3>
+        <div class="comp-soft-wrapper">
+            <div class="comp-soft-container">
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/blender.jpg" alt="">
+                    </div>
+                </div>
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/unity.jpg" alt="">
+                    </div>
+                </div>
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/autodesk.jpg" alt="">
+                    </div>
+                </div>
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/adobedimension.jpg" width="100" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="comp-soft-container">
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/houdini.jpg" alt="">
+                    </div>
+                </div>
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/modo.jpg" alt="">
+                    </div>
+                </div>
+                <div class="comp-soft">
+                    <div class="comp-soft-image-holder">
+                        <img src="_static/images/comp-soft/sketchup.jpg" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 
-
-
-
-
+    <section class="sponsors-wrapper">
+        <h3 class="sponsors-title">
+            Our Sponsors
+        </h3>
+        <div class="container sponsors">
+            <div class="sponsors-logo">
+                <img src="_static/images/sponsors/luddy.jpg" alt="Luddy">
+            </div>
+            <div class="sponsors-logo">
+                <img src="_static/images/sponsors/gsoc.jpg" alt="GSoC">
+            </div>
+            <div class="sponsors-logo">
+                <img src="_static/images/sponsors/iu.jpg" alt="IU">
+            </div>
+        </div>
+    </section>
 
     <footer id="footer" class="footer">
         <div class="container">