Added the foundations for the blog, changed index and refactoring some code

1 files changed, 67 insertions, 7 deletions

diff --git a/views/index.ejs b/views/index.ejs
index 1864b81..d7a9afe 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -16,15 +16,75 @@
         <a class="btn btn-green btn-lg" href="/about" role="button">Learn more</a>
     </div>
 
-    <!--Community, Video and Software-->
-
     <div class="container">
+        <!--Carousel Wrapper-->
+        <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
+            <!--Indicators-->
+            <ol class="carousel-indicators">
+                <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
+                <li data-target="#carousel-example-2" data-slide-to="1"></li>
+                <li data-target="#carousel-example-2" data-slide-to="2"></li>
+            </ol>
+            <!--/.Indicators-->
+            <!--Slides-->
+            <div class="carousel-inner" role="listbox">
+                <div class="carousel-item active">
+                    <div class="view">
+                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg"
+                             alt="First slide">
+                        <div class="mask rgba-black-light"></div>
+                    </div>
+                    <div class="carousel-caption">
+                        <h3 class="h3-responsive">Light mask</h3>
+                        <p>First text</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <!--Mask color-->
+                    <div class="view">
+                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg"
+                             alt="Second slide">
+                        <div class="mask rgba-black-strong"></div>
+                    </div>
+                    <div class="carousel-caption">
+                        <h3 class="h3-responsive">Strong mask</h3>
+                        <p>Secondary text</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <!--Mask color-->
+                    <div class="view">
+                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg"
+                             alt="Third slide">
+                        <div class="mask rgba-black-slight"></div>
+                    </div>
+                    <div class="carousel-caption">
+                        <h3 class="h3-responsive">Slight mask</h3>
+                        <p>Third text</p>
+                    </div>
+                </div>
+            </div>
+            <!--/.Slides-->
+            <!--Controls-->
+            <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
+            <!--/.Controls-->
+        </div>
+        <!--/.Carousel Wrapper-->
+        <br>
+        <!--Community, Video and Software-->
         <div class="row">
             <div class="col-sm">
                 <center>
                     <div class="view overlay">
                         <a href="https://discord.gg/EFhRDqG">
-                            <img src="/img/users-solid.svg" class="svg-white" height=220px>
+                            <img src="/img/users-solid.svg" height=220px>
                             <div class="mask flex-center rgba-green-strong">
                                 <p class="white-text">Community</p>
                             </div>
@@ -38,7 +98,7 @@
                 <center>
                     <div class="view overlay">
                         <a href="https://www.youtube.com/channel/UC9CIwdleH3m_PV35QqULWzA">
-                            <img src="/img/video-solid.svg" class="svg-white" height=220px>
+                            <img src="/img/video-solid.svg" height=220px>
                             <div class="mask flex-center rgba-green-strong">
                                 <p class="white-text">Video</p>
                             </div>
@@ -52,7 +112,7 @@
                 <center>
                     <div class="view overlay">
                         <a href="https://github.com/aleeproductions">
-                            <img src="/img/file-code-solid.svg" class="svg-white" height=220px>
+                            <img src="/img/file-code-solid.svg" height=220px>
                             <div class="mask flex-center rgba-green-strong">
                                 <p class="white-text">Software</p>
                             </div>
@@ -65,8 +125,8 @@
         </div>
     </div>
     <script>
-        console.log("Welcome to Alee Productions :)")
-        alert("Please note that this website is under active development and bugs may occur.\nIf there's any report it to the GitHub repo.")
+        console.log("Welcome to Alee Productions :)");
+        alert("Please note that this website is under active development and bugs may occur.\nIf there's any report it to the GitHub repo.");
     </script>
 
     <% include ./includes/footer %>