Ways to divide background color in half using CSS

Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code?

This is what I've tried so far in CSS:

.logindiv {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 50%, #FFFF 50%);
}  

And here's the HTML:

<div class="container logindiv">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please Sign In</h3>
                </div>
                <div class="panel-body">
                    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-signin" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true)

                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" name="Username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                </label>
                            </div>
                            <!-- Change this to a button or input when using this as a form <a href="#" class="btn btn-lg btn-success btn-block">Login</a> -->

                            <button class="btn btn-lg btn-primary btn-block" name="logsubmit" id="logsubmit" type="submit">Login</button>

                        </fieldset>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

Answer №1

Here's a different approach: (I modified the second color to grey instead of white to ensure visibility on the white background)

.logindiv {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
}
<div class="logindiv"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page: Here is a screenshot of the page: https://i.sstatic.net/jqPYJ.png This is what I am aiming f ...

What is the method of aligning content to the left side in a slick slider?

My slider is set up to display three elements, but I'm having trouble aligning one or two elements to the left instead of centering them. jQuery(function () { jQuery('.slider-blog').slick({ arrows: false, dots: true, ...

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

An introduction to utilizing .keypress() in jquery

I'm exploring the use of .keypress() to allow users to press enter and trigger a button click on my modal (which closes the modal). When I initially code it as: $(document).keypress(function () { console.log('keypress'); }); it works, but ...

Customizing the appearance of jQuery accordion components

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script> <script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script> < ...

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

Is it necessary to utilize container or container-fluid within the grid system layout?

While similar questions may already exist on Stackoverflow, I believe the exact answer has yet to be found. Many suggest: "You should nest .col within .row, and ensure that .row is inside of .container." However, this concept still eludes me. I underst ...

Various degree of stacking priority ordering

I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet: https://jsfiddle.net/bnh3487n/ div { width: 100%; } #wrapper { width: 500px; height: 500px; ...

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

Ways to eliminate project title from the URL

After removing the hash tag from the URL with $locationProvider.html5Mode(true), I attempted to address the refresh issue by adding the following code to my .htaccess file: Options +FollowSymlinks RewriteEngine On RewriteBase /test/ RewriteCond %{REQUEST_ ...

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

How can I achieve a layout like this? Essentially, I have 2 containers in flexbox: The first one with text "33" The second one is a grid container: The first element in the grid is "EUR" The second element in the grid is ".49" Based on this descript ...