how can you add the color header to a panel css?

Two new elements have been added to the HTML code. box and wrap. Two new classes for these elements have been added to the CSS.

The third new element title is for the title on the page

I hope I’ve been helpful

body {
    background-color: #ffffff;
    font-family: "Asap", sans-serif;
}

.login {
    overflow: hidden;
    background-color: blue;
    padding: 90px 30px 30px 30px;
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 55px);
    left: 50%;
    width: 400px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}

.login::before,
.login::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-top-left-radius: 40%;
    border-top-right-radius: 45%;
    border-bottom-left-radius: 35%;
    border-bottom-right-radius: 40%;
    z-index: -1;
}

.login::before {
    left: 40%;
    bottom: -130%;
    background: linear-gradient(2deg, rgba(69, 105, 144, 0.2) 0%, rgba(69, 105, 144, 0.2) 90%, rgba(69, 105, 144, 0) 96%);
}

.login::after {
    left: 35%;
    bottom: -125%;
    background: linear-gradient(2deg, rgba(2, 128, 144, 0.2) 0%, rgba(2, 128, 144, 0.2) 90%, rgba(69, 105, 144, 0) 96%);
}

.login>input {
    font-family: "Asap", sans-serif;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    background: white;
    width: 100%;
    border: 0;
    padding: 10px 10px;
    margin: 15px -10px;
}

.login>button {
    font-family: "Asap", sans-serif;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    width: 80px;
    border: 0;
    padding: 10px 0;
    margin-top: 10px;
    margin-left: -5px;
    border-radius: 5px;
    background-color: #f45b69;

}

.login>button:hover {
    background-color: #f24353;
}

a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
}

.wrap {
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: -300px;
    right: -300px;
    background: blue;
    border-radius: 50% 50% 0 0;
    height: 300px;
}

.box {
    background: url('https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg') no-repeat center top / 100% auto;
    background-size: 100%;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 95px;
    overflow: hidden;
    z-index: -2;
}

.title {
    text-align: center;
    margin-top: 25px;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}
<form class="login">
    <div class="box">
        <div class="title">Lorem ipsum dolor</div>
        <div class="wrap">
        </div>
    </div>

    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <button>Login</button>
</form>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top