Other Special Login Pages – Blog Xlinesoft

As you know, we recently launched a side project called Pictur. This is a website, built with the help of phprunner, which allows users to build beautiful travel stories. Instead of letting you take pictures, you can make travel stories and share with the world. Look at the account and maybe create one or two stories.

This website was built with the help of phprunner and highly adjusted. We will post a series of articles that talk about the most interesting parts of this project. Let’s start by showing how pages such as login, register, and remind a password that is practiced. First, we found a good login template on Carrd, slightly adjusting it and imported CSS to Phprunner.

This is the end result:

Layout of the Login page

Here is how your login page should be seen in the page designer if you want to re -create the same thing in your project.

To add arrows to the “Enter” button select this button on the page designer and on the right side panel select fa-arrow-right Icon from the Awesome Set font.

Header code footage

Enter the code snippet above the login field and use the following code there:


echo "<h2>Page Header</h2>";
echo "<h3>Logon to your account</h3>";

Special css

The following code becomes a style editor -> special CSS.


.function-login {
    line-height: 1.0;
    min-height: 100vh;
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
}

.function-login .panel-heading {
    display: none;
}

.function-login .bs-pagepanel {
    background: none;
}

.function-login:before {
    background-attachment: scroll;
    content: '';
    display: block;
    height: 100vh;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    width: 100vw;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to top, rgba(235, 235, 235, 0.1), rgba(235, 235, 235, 0.2)), url(images/bg_login.jpg);
}

.function-login .r-panel-form {
    --alignment: left;
    --flex-alignment: flex-start;
    --indent-left: 1;
    --indent-right: 0;
    /*display: flex;*/
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(20, 20, 23, 0.788);
    -webkit-backdrop-filter: blur(0.6rem);
    backdrop-filter: blur(0.6rem);
    box-shadow: 0rem 0.875rem 2.125rem 0rem rgb(0 0 0 / 33%);
    border-radius: 1.25rem;
}

.function-login input[type="text"],
.function-login input[type="password"] {
    height: 4.875rem;
    line-height: 4.875rem;
    padding: 0 1.18125rem;
    color: rgba(255, 255, 255, 0.761);
    background-color: rgba(20, 20, 23, 0.361);
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    border-radius: 0.5rem;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.function-login input[type="text"]:focus,
.function-login input[type="text"]:active,
.function-login input[type="password"]:focus,
.function-login input[type="password"]:active {
    box-shadow: 0 0 0 1px #8571d1, inset 0 0 0 1px #8571d1;
}

.function-login .checkbox label {
    color: rgba(255, 255, 255, 0.761);
    padding-left: 0px;
}

.function-login .checkbox label:before {
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.761);
    background-color: rgba(20, 20, 23, 0.361);
    background-size: 1.434375rem;
    height: 2.53125rem;
    width: 2.53125rem;
    margin-right: 1.265625rem;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    cursor: pointer;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 0 0 1px #4c4a55, inset 0 0 0 1px #4c4a55;
}

.function-login label.checked:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=" width="648" height="552" preserveAspectRatio='none' viewBox='0 0 648 552'%3E%3Cpath d='M225.3,517.7L2.1,293.1l68.1-67.7L226,382.3L578.1,35.6l67.4,68.4L225.3,517.7z' fill="rgba(255,255,255,0.761)" /%3E%3C/svg%3E");
}

.function-login label:hover:before {
    box-shadow: 0 0 0 1px #8571D1, inset 0 0 0 1px #8571D1;
}

.function-login input[type="checkbox"] {
    display: none;
}

.function-login [data-itemtype="login_remind"] a,
.function-login [data-itemtype="loginform_register_link"] a {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 / 7%);
}

.function-login [data-itemtype="login_remind"] a:hover,
.function-login [data-itemtype="loginform_register_link"] a:hover,
.function-login [data-itemtype="login_remind"] a.active,
.function-login [data-itemtype="loginform_register_link"] a.active {
    color: white !important;
}

.function-login .r-panel-page {
    min-width: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0px;
}

.function-login form {
    width: 50rem;
    margin: 0 auto;
}

.function-login h2 {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 3.25em;
    line-height: 1.25;
    font-weight: 600;
    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 / 7%);
}

.function-login h3 {
    color: rgba(255, 255, 255, 0.902);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.025rem;
    width: calc(100% + 0.025rem);
    font-size: 1.3em;
    line-height: 1.75;
    font-weight: 400;
    text-shadow: 0.088rem 0.088rem 0.125rem rgb(0 0 0 / 19%);
}

.function-login tr:first-child .clearfix[edit-form-cell] {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function-login tr:nth-child(2) .clearfix[edit-form-cell] {
    text-align: center;
}

.function-login .clearfix[edit-form-cell] .r-edit-field {
    margin-bottom: 10px;
    width: 100% !important;
    padding: 0px !important;
}

.function-login [data-itemtype="login_button"] {
    width: 100%;
    margin-bottom: 10px;
}

.function-login .btn.btn-primary {
    text-align: center;
    width: 100%;
    height: 4.875rem;
    line-height: 4.875rem;
    padding: 0 1.9375rem;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 0.5rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
    background-color: #7662C4;
    color: #FFFFFF;
    background-image: linear-gradient(142deg, rgba(221, 136, 235, 0.451) 0%, rgba(118, 98, 196, 0.008) 58%);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: cover;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    position: relative;
    display: flex;
    align-items: center;
}

.function-login .btn.btn-primary .fa {
    order: 0;
    margin-left: auto;
}

.function-login .btn.btn-primary:hover {
    background-color: #8770E0;
}

.function-login .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.function-login .panel-primary {
    border-color: none;
}

.function-login [data-itemid="login_google"] {
    margin-top: 20px;
}

body.user_forms.function-register .help-block {
    margin-top: 10px;
}

@media (min-width: 320px) and (max-width: 768px) {
    .function-login form {
        max-width: calc(100% - 2.5rem + 0.4725px);
        width: calc(100% - 2.5rem + 0.4725px);
    }
}

.function-login [data-itemtype="login_message"] {
    background: none;
    border: none;
    box-shadow: none;
}

.function-login tr:nth-child(2) * {
    color: white;
}

Enjoy!

Game Center

Game News

Review Film
Rumus Matematika
Anime Batch
Berita Terkini
Berita Terkini
Berita Terkini
Berita Terkini
review anime

Other Special Login Pages – Blog Xlinesoft

Layout of the Login page

Header code footage

Special css

Gaming Center

Kiriman serupa

What’s Coming in the 2025 Release

User Guide For CS-Cart USPS Shipping Extension

Laravel Ondc Connector – Webkul Blog