Added bottom buttons

static/style.css

@@ -251,3 +251,47 @@ svg text:hover{
 }
 
 a:hover { color: var(--highlight); text-decoration: underline; }
+
+.bottom-buttons{
+  margin-top: 50px; 
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+/*.bottom-buttons:hover{
+  margin-top: 45px; 
+  margin-bottom: 45px;
+  transition: all 0.1s linear;
+}*/
+
+.village-style-button{
+  box-shadow: 5px 5px 15px gray;
+  border-radius: 2rem;
+  padding: 0 !important;
+  width: 110px;
+  height: 140px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.village-style-button:hover{
+  box-shadow: 5px 5px 15px black;
+}
+/*.village-style-button:hover{
+  box-shadow: 5px 5px 15px --highlight;
+  border-radius: 2rem;
+  padding: 0 !important;
+  width: 120px;
+  height: 150px;
+  transition: all 0.1s linear;
+}*/
+.village-style-button h3{
+  text-align: center !important;
+  font-size: 10px;
+  font-weight: bold;
+  color: #000;
+}
+
+.village-style-button img{
+  max-width: 70%;
+  max-height: 70%;
+  padding-top: 20px;
+}
\ No newline at end of file

wiki/layout.html

@@ -55,12 +55,38 @@
     
       <div class="col">
         {% block page_content %}{% endblock %}
+        <div class="row align-items-center bottom-buttons">
+
+          <a class="btn village-style-button" href="{{ url_for('pages', page='human-practices') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Human Practices</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='team') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/team.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Team</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='experiments') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/lab.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Experiments</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='description') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/dna.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Description</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='engineering') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Engineering</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='safety') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/safety.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Safety</h3>
+          </a>
+          <a class="btn village-style-button" href="{{ url_for('pages', page='results') }}" role="button"><img src="https://static.igem.wiki/teams/5247/design/icons/results.png" class="d-block mx-auto mb-2" alt="">
+            <h3>Results</h3>
+          </a>
+        
+          </div>
       </div>
       <div class="col-1 d-none d-lg-block" >
         <!-- empty so far -->
       </div>
     
     </div>
+    
     <div class="row mt-5">
       <div class="col-2 d-none d-lg-block"></div>
       <div class="col">

wiki/pages/example.html

@@ -148,8 +148,7 @@
         </p>
       </section>
     
-    <div class="col">
-      </div>
+    
   </div>
 </div>
 <!--End page content -->

wiki/pages/sources.html

+<a href="https://www.flaticon.com/free-icons/speak" title="speak icons">Speak icons created by Freepik - Flaticon</a>
+<div> Icons made by <a href="https://www.flaticon.com/authors/iconixar" title="iconixar"> iconixar </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons"> Smashicons </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons"> Smashicons </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons"> Smashicons </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="" title="Iconjam"> Iconjam </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.flaticon.com/authors/elzicon" title="Elzicon"> Elzicon </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
\ No newline at end of file