TotalFreedomMC/Website
1
0
Fork 0
mirror of https://github.com/TotalFreedomMC/Website.git synced 2025-08-05 12:03:01 +00:00
Code Issues Projects Releases Wiki Activity

Mobile Friendly master builder page

Browse source 
Closes #51
This commit is contained in:
aggelosQQ 2016-10-02 16:19:25 +03:00
parent 85fd3261a1
commit 53fb734950
2 changed files with 154 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

48
masterbuilders/assets/css/builders.css
View file

@ -1,4 +1,7 @@
* { margin:0; padding: 0;} * {
margin: 0;
padding: 0;
}
body { body {
background: url('../images/bg.png') fixed center no-repeat; background: url('../images/bg.png') fixed center no-repeat;
@ -6,14 +9,23 @@ body {
color: #fff; color: #fff;
margin-bottom: 40px; margin-bottom: 40px;
} }
p, h1, h2, h3, h4, h5, h6 {
p,
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center; text-align: center;
font-family: 'Baloo Tamma', cursive; font-family: 'Baloo Tamma', cursive;
} }
.card-action { .card-action {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
} }
button { button {
color: #ccc; color: #ccc;
background: rgba(30, 30, 30, 0.5); background: rgba(30, 30, 30, 0.5);
@ -33,37 +45,49 @@ button {
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
button:hover, button:focus {
button:hover,
button:focus {
background: rgba(50, 50, 50, 0.5); background: rgba(50, 50, 50, 0.5);
} }
.card { .card {
background: rgba(50, 50, 50, 0.3); background: rgba(50, 50, 50, 0.3);
font-family: 'Baloo Tamma', cursive; font-family: 'Baloo Tamma', cursive;
} }
.page-title { .page-title {
text-align: center; text-align: center;
} }
#note { #note {
font-size: 1.4em; font-size: 1.4em;
font-size: 900; font-size: 900;
font-family: 'Baloo Tamma', cursive; font-family: 'Baloo Tamma', cursive;
margin-top: 5px; margin-top: 5px;
} }
.header { .header {
padding: 100px; padding: 100px;
background: rgba(200, 200, 200, 0.2); background: rgba(200, 200, 200, 0.2);
text-align: center; text-align: center;
width: 100%;
} }
hr { hr {
border: 2px solid rgba(230, 230, 230, 0.1); border: 2px solid rgba(230, 230, 230, 0.1);
} }
.custom-btn { .custom-btn {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
text-align: center; text-align: center;
} }
.custom-btn:hover, .custom-btn:focus {
.custom-btn:hover,
.custom-btn:focus {
background: rgba(50, 50, 50, 0.6); background: rgba(50, 50, 50, 0.6);
} }
.masterbuilders-list li { .masterbuilders-list li {
display: inline-block; display: inline-block;
background: rgba(100, 100, 100, 0.4); background: rgba(100, 100, 100, 0.4);
@ -80,16 +104,19 @@ hr {
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.masterbuilders-list li:hover { .masterbuilders-list li:hover {
background: rgba(120, 120, 120, 0.5); background: rgba(120, 120, 120, 0.5);
color: #fff; color: #fff;
} }
.masterbuilders-list li img { .masterbuilders-list li img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 5px; margin-right: 5px;
float: left; float: left;
} }
.top { .top {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
@ -103,6 +130,19 @@ hr {
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.top:hover { .top:hover {
color: rgba(178, 34, 34, 1); color: rgba(178, 34, 34, 1);
} }
@media only screen and (max-width: 768px) {
.header {
padding: 5px;
}
.masterbuilders-list li {
display: block;
}
button {
width: 95%;
}
}

56
masterbuilders/index.html
View file

@ -8,7 +8,8 @@
<title>Master Builders | TotalFreedom Minecraft Server</title> <title>Master Builders | TotalFreedom Minecraft Server</title>
<meta content="aggelosQQ, markbyron, DarthSalamon, Madgeek1450, TotalFreedom" name="author"> <meta content="aggelosQQ, markbyron, DarthSalamon, Madgeek1450, TotalFreedom" name="author">
<meta content="TF,minecraft,totalfreedom,free op,server,worldedit,freebuild" name="keywords"> <meta content="TF,minecraft,totalfreedom,free op,server,worldedit,freebuild" name="keywords">
<meta content="TotalFreedom is the first Free OP Minecraft server, which is up and running since 2012! play.totalfreedom.me" name="description"> <meta content="TotalFreedom is the first Free OP Minecraft server, which is up and running since 2012! play.totalfreedom.me"
name="description">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://use.fontawesome.com/cb2592f0cc.js"></script> <script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
@ -80,12 +81,13 @@
</ul><br> </ul><br>
<hr> <hr>
<br> <br>
<p id="note">These images may, or may not, have been built on Total Freedom but are made by/with at least one masterbuilder from Total Freedom.</p> <p id="note">These images may, or may not, have been built on Total Freedom but are made by/with at least one masterbuilder
from Total Freedom.</p>
</div><br> </div><br>
<hr> <hr>
<br> <br>
<div class="row"> <div class="row">
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build1.jpg" target="_blank"><img class="responsive-img" src="assets/images/build1.jpg"></a> <a href="assets/images/build1.jpg" target="_blank"><img class="responsive-img" src="assets/images/build1.jpg"></a>
@ -98,7 +100,7 @@
<a href="http://www.planetminecraft.com/project/tropical-island---timelapse/"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://www.planetminecraft.com/project/tropical-island---timelapse/"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build2.jpg" target="_blank"><img class="responsive-img" src="assets/images/build2.jpg"></a> <a href="assets/images/build2.jpg" target="_blank"><img class="responsive-img" src="assets/images/build2.jpg"></a>
@ -111,7 +113,7 @@
<a href="http://www.planetminecraft.com/project/the-valley-of-oysaria/"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://www.planetminecraft.com/project/the-valley-of-oysaria/"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build3.jpg" target="_blank"><img class="responsive-img" src="assets/images/build3.jpg"></a> <a href="assets/images/build3.jpg" target="_blank"><img class="responsive-img" src="assets/images/build3.jpg"></a>
@ -124,7 +126,7 @@
<a href="http://www.planetminecraft.com/project/tropical-island---timelapse/"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://www.planetminecraft.com/project/tropical-island---timelapse/"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build4.jpg" target="_blank"><img class="responsive-img" src="assets/images/build4.jpg"></a> <a href="assets/images/build4.jpg" target="_blank"><img class="responsive-img" src="assets/images/build4.jpg"></a>
@ -139,14 +141,15 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<span class="new badge red" data-badge-caption="SPECIAL"></span> <span class="new badge red" data-badge-caption="SPECIAL"></span>
<a href="assets/images/build5.jpg" target="_blank"><img class="responsive-img" src="assets/images/build5.jpg"></a> <a href="assets/images/build5.jpg" target="_blank"><img class="responsive-img" src="assets/images/build5.jpg"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by miwojedk - this project won the #1 place on PlanetMinecraft Contest (Press "Show More" to see more information)</p> <p>Made by miwojedk - this project won the #1 place on PlanetMinecraft Contest (Press "Show More" to
see more information)</p>
</div> </div>
</div> </div>
<div class="card-action"> <div class="card-action">
@ -154,14 +157,15 @@
"button">Show more</button></a> "button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<span class="new badge red" data-badge-caption="SPECIAL"></span> <span class="new badge red" data-badge-caption="SPECIAL"></span>
<a href="assets/images/build6.jpg" target="_blank"><img class="responsive-img" src="assets/images/build6.jpg"></a> <a href="assets/images/build6.jpg" target="_blank"><img class="responsive-img" src="assets/images/build6.jpg"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by miwojedk - this project won the #1 place on PlanetMinecraft Contest (Press "Show More" to see more information)</p> <p>Made by miwojedk - this project won the #1 place on PlanetMinecraft Contest (Press "Show More" to
see more information)</p>
</div> </div>
</div> </div>
<div class="card-action"> <div class="card-action">
@ -169,7 +173,7 @@
"button">Show more</button></a> "button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build7.png" target="_blank"><img class="responsive-img" src="assets/images/build7.png"></a> <a href="assets/images/build7.png" target="_blank"><img class="responsive-img" src="assets/images/build7.png"></a>
@ -182,7 +186,7 @@
<a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build8.png" target="_blank"><img class="responsive-img" src="assets/images/build8.png"></a> <a href="assets/images/build8.png" target="_blank"><img class="responsive-img" src="assets/images/build8.png"></a>
@ -195,7 +199,7 @@
<a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build9.png" target="_blank"><img class="responsive-img" src="assets/images/build9.png"></a> <a href="assets/images/build9.png" target="_blank"><img class="responsive-img" src="assets/images/build9.png"></a>
@ -208,7 +212,7 @@
<a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16464"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build10.png" target="_blank"><img class="responsive-img" src="assets/images/build10.png"></a> <a href="assets/images/build10.png" target="_blank"><img class="responsive-img" src="assets/images/build10.png"></a>
@ -223,7 +227,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build11.png" target="_blank"><img class="responsive-img" src="assets/images/build11.png"></a> <a href="assets/images/build11.png" target="_blank"><img class="responsive-img" src="assets/images/build11.png"></a>
@ -236,7 +240,7 @@
<a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build12.png" target="_blank"><img class="responsive-img" src="assets/images/build12.png"></a> <a href="assets/images/build12.png" target="_blank"><img class="responsive-img" src="assets/images/build12.png"></a>
@ -249,10 +253,10 @@
<a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build13.png" target="_blank"><img class="responsive-img" src="assets/images/build16.png"></a> <a href="assets/images/build13.png" target="_blank"><img class="responsive-img" src="assets/images/build13.png"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by UYScutix</p> <p>Made by UYScutix</p>
@ -262,10 +266,10 @@
<a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/16480"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build14.png" target="_blank"><img class="responsive-img" src="assets/images/build17.png"></a> <a href="assets/images/build14.png" target="_blank"><img class="responsive-img" src="assets/images/build14.png"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by xfilez (Redstoner)</p> <p>Made by xfilez (Redstoner)</p>
@ -277,10 +281,10 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build15.png" target="_blank"><img class="responsive-img" src="assets/images/build18.png"></a> <a href="assets/images/build15.png" target="_blank"><img class="responsive-img" src="assets/images/build15.png"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by xfilez (Redstoner)</p> <p>Made by xfilez (Redstoner)</p>
@ -290,10 +294,10 @@
<a href="http://totalfreedom.boards.net/user/5473"><button class="waves-effect showmore" type="button">Show more</button></a> <a href="http://totalfreedom.boards.net/user/5473"><button class="waves-effect showmore" type="button">Show more</button></a>
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build16.png" target="_blank"><img class="responsive-img" src="assets/images/build19.png"></a> <a href="assets/images/build16.png" target="_blank"><img class="responsive-img" src="assets/images/build16.png"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by FelixTheTrap</p> <p>Made by FelixTheTrap</p>
@ -304,10 +308,10 @@
</div> </div>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<div class="card"> <div class="card">
<div class="card-image waves-effect waves-block"> <div class="card-image waves-effect waves-block">
<a href="assets/images/build17.jpg" target="_blank"><img class="responsive-img" src="assets/images/build20.jpg"></a> <a href="assets/images/build17.jpg" target="_blank"><img class="responsive-img" src="assets/images/build17.jpg"></a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p>Made by ShadowArmandyl</p> <p>Made by ShadowArmandyl</p>