TotalFreedomMC/Website
1
0
Fork 0
mirror of https://github.com/TotalFreedomMC/Website.git synced 2024-12-22 16:25:12 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,108 +1,148 @@
* { 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;
background-size: cover; background-size: cover;
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);
border: none; border: none;
outline: none; outline: none;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
width: 65%; width: 65%;
font-size: 1.3em; font-size: 1.3em;
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
font-family: 'Baloo Tamma', cursive; font-family: 'Baloo Tamma', cursive;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;
-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 {
background: rgba(50,50,50,0.5); button:hover,
button:focus {
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 {
background: rgba(50,50,50,0.6); .custom-btn:hover,
.custom-btn:focus {
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);
color:#ccc; color: #ccc;
padding: 8px; padding: 8px;
cursor: pointer; cursor: pointer;
border-radius: 10%; border-radius: 10%;
font-size: 1.1em; font-size: 1.1em;
margin: 5px; margin: 5px;
font-family: 'Baloo Tamma', cursive; font-family: 'Baloo Tamma', cursive;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;
-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;
right: 50px; right: 50px;
font-size: 3em; font-size: 3em;
color: rgba(178,34,34,0.6); color: rgba(178, 34, 34, 0.6);
padding: 10px; padding: 10px;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;
-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%;
}
} }

78
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>
@ -23,7 +24,7 @@
<body> <body>
<nav class="transparent z-depth-0" id="menu"> <nav class="transparent z-depth-0" id="menu">
<div class="nav-wrapper z-depth-0"> <div class="nav-wrapper z-depth-0">
<a class="brand-logo" href="#header">TotalFreedom <span class="hide-on-med-and-down">Master Builders</span></a> <a class="button-collapse" data-activates="mobile" href="#"><i class="fa fa-bars"></i></a> <a class="brand-logo" href="#header">TotalFreedom <span class="hide-on-med-and-down">Master Builders</span></a> <a class="button-collapse" data-activates="mobile" href="#"><i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down cl-effect-14" id="cl-effect-14"> <ul class="right hide-on-med-and-down cl-effect-14" id="cl-effect-14">
<li> <li>
<a href="../index.html">Back to Home</a> <a href="../index.html">Back to Home</a>
@ -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>
@ -275,12 +279,12 @@
<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> </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>
@ -324,16 +328,16 @@
<a class="top" href="#"><i class="fa fa-chevron-up icon"></i></a> <a class="top" href="#"><i class="fa fa-chevron-up icon"></i></a>
</div> </div>
<footer class="page-footer transparent"> <footer class="page-footer transparent">
<div class="container"> <div class="container">
<div class="footer-copyright"> <div class="footer-copyright">
<div class="container"> <div class="container">
<hr> TotalFreedom &copy; 2012 - <span id="curYear"></span>. <hr> TotalFreedom &copy; 2012 - <span id="curYear"></span>.
<a class="grey-text text-lighten-4 right" href="https://twitter.com/maloukos1">Made by aggelosQQ</a> <a class="grey-text text-lighten-4 right" href="https://twitter.com/maloukos1">Made by aggelosQQ</a>
</div>
</div> </div>
</div> </div>
</footer> </div>
</footer>
</body> </body>
</html> </html>