F2U | ULTRAKILL (CSS VER.)

Endercoil

Profile

<!--ULTRAKILL LAYOUT - BY ENDERCOIL -->
<!-- VERSION: CSS IN USE, NOT SAFEHO-USE COMPATIBLE. -->
<!-- Custom Colors: Everything is in Black and White other than highlighted text. This uses #FFA500 -->
<!-- background image can be changed, but note that the layers on top are partially transparent. its just a bit hard to see with this background.-->
<div class="p-4" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/59248069_DBlJUci046jGDvI.png); background-position: center; bacground-attachment: fixed; background-size: cover;">
    <!--top bar-->
    <div class="card p-2 mb-4" style="border-width: 3px; border-color: #fff; background-color: rgba(0,0,0,0.5);">
        <div style="text-align: justify;">
            <div class="pull-left">
                <a class="p-0 mt-2 btn btn-outline-dark melody-embed" style="position:relative;height:1.5rem;width:1.5rem;z-index:2;color:#FFA500;">
                <!-- song is set to Take Care from the ULTRAKILL OST, which is what plays on this screen in game. If you want to change it, replace D31XRskiwys with the id of a youtube video.-->
                <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100" src="https://www.youtube-nocookie.com/embed/D31XRskiwys?controls=0" frameborder="0"></iframe>
                 <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
                </a>
            </div>
            <div class="pull-right pt-1 pr-2">
                <!--credit, do not remove-->
                <a href="https://toyhou.se/19525085.ultrakill" title="Code by Endercoil" style="color: #FFA500"><i class="fa-duotone fa-gear"></i></a>
            </div>
        </div>
    </div>
    <!--main content-->
    <div class="card p-4" style="border-width: 3px; border-color: #fff; background-color: rgba(0,0,0,0.9);">
        <div class="row no-gutters">
            <div class="col-md-4">
                <!--MAIN IMAGE-->
                <div class="card mb-5" style="border-width: 3px; border-color: #fff; background-color: transparent;  min-height:500px; background-image: url(LINK_HERE); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
                <!-- Button, feel free to change this link title to anything. it's a back button in game, which doesn't have much use here. If you keep it you might want to use either html or css to remove the bottom gallery for redundance but thats up to you! -->
                <a href="LINK_HERE" style="color: #fff">
                    <div class="card text-center p-3 mb-1" style="border-width: 3px; border-color: #fff; background-color: transparent;">
                        <h1 class="m-2 text-uppercase" style="letter-spacing: 3px; font-family: 'DotGothic16', sans-serif; font-weight: bold; font-size: 40px;">Gallery</h1>
                    </div>
                </a>
            </div>
            <div class="col-md-8 pl-4">
                <!--NAME-->
                <h1 class="mb-5 text-uppercase" style="letter-spacing: 3px; font-weight: bold; font-family: 'DotGothic16', sans-serif; color: #fff; font-size: 40px;">NAME</h1>
                <div class="overflow-auto" style="max-height:555px;">
                    <!--TYPE-->
                    <h2 class="mb-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px;">TYPE: [TYPE]</h2>
                    <!--SUBHEADER (DATA)-->
                    <h2 class="mb-0 mt-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px;">DATA:</h2>
                    <!-- Data Paragraphs -->
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif;  font-size: 30px; color: #fff">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. 
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. 
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. 
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.  
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. 
                    </p>
                    <!--SUBHEADER (STRATEGY)-->
                    <h2 class="mt-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px; margin-bottom:">STRATEGY:</h2>
                    <!-- Strategy Bullet Points -->
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
                    </p>
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
</div>
        
/*Endercoil Ultrakill Layout - CSS*/
/*This CSS is very basic. If you'd like use it somewhere else, I don't need credit.*/
@import url('https://fonts.googleapis.com/css?family=DotGothic16&display=swap');
/* width */
/*Remove .content-main if you'd like the scrollbar on the side of the screen to change as well.*/
.content-main ::-webkit-scrollbar {width: 20px;}

/* Track */
::-webkit-scrollbar-track {background: #313131; border-radius: 5px;}
/* Handle */
::-webkit-scrollbar-thumb {background: #767676; border-radius: 5px;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #767676;}
<!--ULTRAKILL LAYOUT - BY ENDERCOIL -->
<!-- VERSION: CSS IN USE, SAFEHO-USE COMPATIBLE. -->
<!-- Custom Colors: Everything is in Black and White other than highlighted text. This uses #FFA500 -->
<!-- background image can be changed, but note that the layers on top are partially transparent. its just a bit hard to see with this background.-->
<div class="p-4" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/59248069_DBlJUci046jGDvI.png); background-position: center; bacground-attachment: fixed; background-size: cover;">
    <!--top bar-->
    <div class="card p-2 mb-4" style="border-width: 3px; border-color: #fff; background-color: rgba(0,0,0,0.5);">
        <div style="text-align: justify;">
            <div class="pull-left">
                <a class="p-0 mt-2 btn btn-outline-dark melody-embed" style="position:relative;height:1.5rem;width:1.5rem;z-index:2;color:#FFA500;">
                <!-- song is set to Take Care from the ULTRAKILL OST, which is what plays on this screen in game. If you want to change it, replace D31XRskiwys with the id of a youtube video.-->
                <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100" src="https://www.youtube-nocookie.com/embed/D31XRskiwys?controls=0" frameborder="0"></iframe>
                 <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
                </a>
            </div>
            <div class="pull-right pt-1 pr-2">
                <!--credit, do not remove-->
                <a href="https://toyhou.se/19525085.ultrakill" title="Code by Endercoil" style="color: #FFA500"><i class="fa-duotone fa-gear"></i></a>
            </div>
        </div>
    </div>
    <!--main content-->
    <div class="card p-4" style="border-width: 3px; border-color: #fff; background-color: rgba(0,0,0,0.9);">
        <div class="row no-gutters">
            <div class="col-md-4">
                <!--MAIN IMAGE-->
                <div class="card mb-5" style="border-width: 3px; border-color: #fff; background-color: transparent;  min-height:500px; background-image: url({{u!Image Link!}}); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
                <!-- Button, feel free to change this link title to anything. it's a back button in game, which doesn't have much use here. If you keep it you might want to use either html or css to remove the bottom gallery for redundance but thats up to you! -->
                <a href="{{u!Button Link!}}" style="color: #fff">
                    <div class="card text-center p-3 mb-1" style="border-width: 3px; border-color: #fff; background-color: transparent;">
                        <h1 class="m-2 text-uppercase" style="letter-spacing: 3px; font-family: 'DotGothic16', sans-serif; font-weight: bold; font-size: 40px;">{{!Button Text!}}</h1>
                    </div>
                </a>
            </div>
            <div class="col-md-8 pl-4">
                <!--NAME-->
                <h1 class="mb-5 text-uppercase" style="letter-spacing: 3px; font-weight: bold; font-family: 'DotGothic16', sans-serif; color: #fff; font-size: 40px;">{{!Name!}}</h1>
                <div class="overflow-auto" style="max-height:555px;">
                    <!--TYPE-->
                    <h2 class="mb-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px;">TYPE: {{!Type!}}</h2>
                    <!--SUBHEADER (DATA)-->
                    <h2 class="mb-0 mt-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px;">DATA:</h2>
                    <!-- Data Paragraphs -->
                    {{%Data Paragraph%
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif;  font-size: 30px; color: #fff">
                        {{%Paragraph%}} 
                    </p>
                    %end%}}
                    <!--SUBHEADER (STRATEGY)-->
                    <h2 class="mt-5 text-uppercase" style="font-family: 'DotGothic16', sans-serif; color: #FFA500; font-size: 30px; margin-bottom:">STRATEGY:</h2>
                    <!-- Strategy Bullet Points -->
                    {{%Strategy Point% 
                    <p class="mt-4" style="font-family: 'DotGothic16', sans-serif; font-size: 30px; color: #fff">
                        - {{%Info%}}
                    </p>
                    %end%}}

                </div>
            </div>
        </div>
    </div>
</div>

Images

1423 Users Online 3:32 am © cyancrows 2017
About FAQ Rules TOS