Add a carousel

Xanatos00 · Jun 5, 2017 · a46235e · a46235e
1 parent 451c034
commit a46235e
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 10 deletions.
diff --git a/_site/assets/css/style.css b/_site/assets/css/style.css
@@ -25,7 +25,8 @@ footer a:active {
 }
 
 .jumbotron {
-        background-image: url("/media/banner.png");
+        margin: auto;
+        background-image: url("/media/woodbury.png");
         background-size: cover;
 	border-radius: 0 !important;
 	color: #FFF300;
@@ -43,6 +44,13 @@ footer a:active {
         min-height: 30rem;
 }
 
+.jumbotron.no-background {
+        background-image: none;
+        background-color: unset;
+        position: absolute;
+        top: 0; left: 15%; bottom: 0; right: 15%;
+}
+
 .jumbotron h1, .jumbotron p {
         font-weight: bold;
 }
@@ -56,3 +64,18 @@ footer a:active {
 	margin: auto;
 	max-width: 100%;
 }
+
+.carousel {
+        margin-left: -15px;
+        width: 100vw;
+}
+
+.carousel .item {
+        height: 100vh;
+        max-width: 100vw;
+        background-color: #777;
+        overflow: hidden;
+}
+.carousel .item > img {
+        max-width: initial;
+}
diff --git a/_site/index.html b/_site/index.html
@@ -49,9 +49,43 @@
                 <div class="container-fluid">
 
 
-<div class="jumbotron">
-        <h1>We are Eurythmia.</h1>
-        <p>We are a non-profit organization that aims to give you the best Minetest experience.</p>
+<div id="myCarousel" class="carousel slide" data-ride="carousel" id="banner">
+        <!-- Indicators -->
+        <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myCarousel" data-slide-to="1"></li>
+                <li data-target="#myCarousel" data-slide-to="2"></li>
+        </ol>
+
+        <!-- Wrapper for slides -->
+        <div class="carousel-inner">
+                <div class="item active">
+                        <img src="media/woodbury.png" alt="WoodBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/stonebury.png" alt="StoneBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/spawn_district.png" alt="Spawn District">
+                </div>
+        </div>
+
+        <!-- Left and right controls -->
+        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+        </a>
+        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+        </a>
+</div>
+
+<div class="jumbotron no-background">
+                                <h1>We are Eurythmia.</h1>
+                                <p>We are a non-profit organization that aims to give you the best Minetest experience.</p>
 </div>
 
 		</div>

diff --git a/_site/index_fr.html b/_site/index_fr.html
@@ -49,7 +49,41 @@
                 <div class="container-fluid">
 
 
-<div class="jumbotron">
+<div id="myCarousel" class="carousel slide" data-ride="carousel" id="banner">
+        <!-- Indicators -->
+        <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myCarousel" data-slide-to="1"></li>
+                <li data-target="#myCarousel" data-slide-to="2"></li>
+        </ol>
+
+        <!-- Wrapper for slides -->
+        <div class="carousel-inner">
+                <div class="item active">
+                        <img src="media/woodbury.png" alt="WoodBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/stonebury.png" alt="StoneBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/spawn_district.png" alt="Spawn District">
+                </div>
+        </div>
+
+        <!-- Left and right controls -->
+        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+        </a>
+        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+        </a>
+</div>
+
+<div class="jumbotron no-background">
         <h1>Nous sommes Eurythmia.</h1>
 	<p>Nous sommes une organisation à but non lucratif qui veut vous donner la meilleure expérience de Minetest.</p>
 </div>

diff --git a/_site/media/spawn_district.png b/_site/media/spawn_district.png
diff --git a/_site/media/stonebury.png b/_site/media/stonebury.png
diff --git a/_site/media/banner.png → _site/media/woodbury.png b/_site/media/banner.png → _site/media/woodbury.png
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -25,7 +25,8 @@ footer a:active {
 }
 
 .jumbotron {
-        background-image: url("/media/banner.png");
+        margin: auto;
+        background-image: url("/media/woodbury.png");
         background-size: cover;
 	border-radius: 0 !important;
 	color: #FFF300;
@@ -43,6 +44,13 @@ footer a:active {
         min-height: 30rem;
 }
 
+.jumbotron.no-background {
+        background-image: none;
+        background-color: unset;
+        position: absolute;
+        top: 0; left: 15%; bottom: 0; right: 15%;
+}
+
 .jumbotron h1, .jumbotron p {
         font-weight: bold;
 }
@@ -56,3 +64,18 @@ footer a:active {
 	margin: auto;
 	max-width: 100%;
 }
+
+.carousel {
+        margin-left: -15px;
+        width: 100vw;
+}
+
+.carousel .item {
+        height: 100vh;
+        max-width: 100vw;
+        background-color: #777;
+        overflow: hidden;
+}
+.carousel .item > img {
+        max-width: initial;
+}
diff --git a/index.html b/index.html
@@ -5,9 +5,43 @@
 
 {% include header.html %}
 
-<div class="jumbotron">
-        <h1>We are Eurythmia.</h1>
-        <p>We are a non-profit organization that aims to give you the best Minetest experience.</p>
+<div id="myCarousel" class="carousel slide" data-ride="carousel" id="banner">
+        <!-- Indicators -->
+        <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myCarousel" data-slide-to="1"></li>
+                <li data-target="#myCarousel" data-slide-to="2"></li>
+        </ol>
+
+        <!-- Wrapper for slides -->
+        <div class="carousel-inner">
+                <div class="item active">
+                        <img src="media/woodbury.png" alt="WoodBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/stonebury.png" alt="StoneBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/spawn_district.png" alt="Spawn District">
+                </div>
+        </div>
+
+        <!-- Left and right controls -->
+        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+        </a>
+        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+        </a>
+</div>
+
+<div class="jumbotron no-background">
+                                <h1>We are Eurythmia.</h1>
+                                <p>We are a non-profit organization that aims to give you the best Minetest experience.</p>
 </div>
 
 {% include footer.html %}
diff --git a/index_fr.html b/index_fr.html
@@ -5,7 +5,41 @@
 
 {% include header_fr.html %}
 
-<div class="jumbotron">
+<div id="myCarousel" class="carousel slide" data-ride="carousel" id="banner">
+        <!-- Indicators -->
+        <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myCarousel" data-slide-to="1"></li>
+                <li data-target="#myCarousel" data-slide-to="2"></li>
+        </ol>
+
+        <!-- Wrapper for slides -->
+        <div class="carousel-inner">
+                <div class="item active">
+                        <img src="media/woodbury.png" alt="WoodBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/stonebury.png" alt="StoneBury">
+                </div>
+
+                <div class="item">
+                        <img src="media/spawn_district.png" alt="Spawn District">
+                </div>
+        </div>
+
+        <!-- Left and right controls -->
+        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+        </a>
+        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+        </a>
+</div>
+
+<div class="jumbotron no-background">
         <h1>Nous sommes Eurythmia.</h1>
 	<p>Nous sommes une organisation à but non lucratif qui veut vous donner la meilleure expérience de Minetest.</p>
 </div>

diff --git a/media/spawn_district.png b/media/spawn_district.png
diff --git a/media/stonebury.png b/media/stonebury.png
diff --git a/media/banner.png → media/woodbury.png b/media/banner.png → media/woodbury.png