Staff Page | Responsive - Loading Screen - Carousels

Staff Page | Responsive - Loading Screen - Carousels 1.1

  • Black Friday Sale! Use code BLACKFRIDAY for 20% off everything!
QiX2WKD.jpg

» Introduction

Are you looking for a staff page for your Minecraft server and don't know which one to choose? Look no further.
Thanks to the simple and clean code, you will be able to modify it according to your needs.

If you have any issues or questions, please contact me in private message. Please be patient if I do not reply immediately. I will reply as soon as I can.
Please also do not report issues in the review section.


» Features

  • This Staff Page comes with a custom animated loading screen.
  • This Staff Page comes with the option of using or not using carousels to show staff members.
  • This Staff Page comes with a pop-up to notify visitors that the website uses cookies.
  • This Staff Page has the advantage of having a simple and clean code so that you will be able, even with little knowledge of HTML, CSS and JavaScript, to modify its contents.
  • This Staff Page is fully responsive so it is perfectly visible on all devices, from computer to phone.


» Activate / Deactivate Carousels

Using this staff page you can choose to use carousels to show the staff members or not use them.
As you can see the Owners section has no carousel, instead all the others have a dedicated carousel.

To activate the carousel also in the Owners section follow these steps:

  • Open the "index.html" file and go to the Admins section.
  • Copy all the code you see here below (First code block) and replace it with the one in the Owners section that you also find here below (Second code block).
  • Finally, change the role name from Admin to Owner.
In order to deactivate the carousels from all the sections or from a particular section follow these steps:
  • Open the "index.html" file and go to the Owners section.
  • Copy all the code you see here below (Second code block) and replace it with the one in the other sections or in the one you want to deactivate the carousel.
  • Finally, change the role name from Owner to the desired one.
HTML:
<div class="staff-slider">
    <div class="staff-cards">
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="staff-slider-card">
                <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
                <h2>Screech46</h2>
                <p>Admin</p>
            </div>
        </div>
    </div>
    <div id="staff-arrow-prev"><i class="fa fa-angle-left"></i></div>
    <div id="staff-arrow-next"><i class="fa fa-angle-right"></i></div>
</div>


HTML:
<div class="staff-card">
    <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
    <h2>Screech46</h2>
    <p>Owner</p>
</div>
<div class="staff-card">
    <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
    <h2>Screech46</h2>
    <p>Owner</p>
</div>
<div class="staff-card">
    <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
    <h2>Screech46</h2>
    <p>Owner</p>
</div>
<div class="staff-card">
    <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
    <h2>Screech46</h2>
    <p>Owner</p>
</div>
<div class="staff-card">
    <img src="https://crafatar.com/renders/body/6e18dd271fb942aea9992efe2ee9305f" draggable="false">
    <h2>Screech46</h2>
    <p>Owner</p>
</div>


» Change the Staff Member Skin


To change the skin of the staff members go to crafatar.com and enter in the appropriate field the UUID of the user you want to add.
To get the UUID of a specific user you can use namemc.com where you only have to enter the in-game nickname and the system will give you his UUID.
Finally insert the link you copied from crafatar.com instead of the one already present in the "index.html" file.


» Disclaimer

In this template there is the old Hypixel logo, I want to point out that I did not include the updated Hypixel logo intentionally.
I'm not part of the Hypixel team, the logo is for illustration purposes only.
Author
Screech
Price
€5.99
Downloads
1
First release
Last update
Rating
0.00 star(s) 0 ratings

More products from Screech

Latest updates

  1. Version 1.1

    Changes: Modified design making it more modern and pleasing to the eye (Uploaded the new...