Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different methods such as changing the button tag to an anchor tag and adjusting margins and padding, I haven't been able to achieve the desired alignment.

.landing_page_block {
  display: block;
  width: 40%;
  margin-top: 220px;
  text-align: center;
}

.landing_page_h1 {
  font-size: 65px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8); 
}

.landing_page_phrase {
  margin: 20px 0 30px 0;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8); 
}

.lp_box1 h5 {
  letter-spacing: 1.1px;
  font-weight: 300;
  margin-bottom: 20px;
}

.lp-box2 {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lp_box2 input {
  width: 60%;
  height: 70px;
  border: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  font-weight: 300;
  padding-left: 15px;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
  -moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
  box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}

.get_started_btn {
  height: 70px;
  margin-left: -3px;
  width: 39%;
  font-size: 30px;
  border: none;
  border-left: 2px solid grey;
  font-weight: 300;
  color: white;
  background-color: red;
  text-decoration: none;
}
<div class="landing_page">
  <div class="landing_page_block">
    <div class="lp_box1">
      <h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
      <h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
      <h6>Ready to watch? Enter your email to create or restart your membership.</h6>
    </div>
    <div class="lp_box2">
      <input type="email" name="email" placeholder="Email address"/>
      <button class="get_started_btn">Get Started </button>
    </div>
  </div>
</div>

The outcome of my coding attempt can be viewed here: https://i.stack.imgur.com/wR4ch.png

htmlcssflexbox

Answer №1

Is this how you envisioned your layout to appear?

.landing_page_block {
  margin-top: 220px;
  text-align: center;
}

.landing_page_h1 {
  font-size: 65px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}

.landing_page_phrase {
  font-weight: 300;
  letter-spacing: 1.2px;
  text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}

.lp_box1 h5 {
  letter-spacing: 1.1px;
  font-weight: 300;
  margin-bottom: 20px;
}

.lp_box2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.lp_box2>.input-div{
  height: 70px;
  width: 62%;
}

.lp_box2>.input-div>input {
  height: 70px;
  width: 100%;
  border: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  font-weight: 300;
  padding-left: 15px;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
  -moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
  box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}

.get_started_btn {
  height: 70px;
  width: 30%;
  font-size: 30px;
  border: none;
  border-left: 2px solid grey;
  font-weight: 300;
  color: white;
  background-color: red;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="landing_page">
  <div class="landing_page_block">
    <div class="lp_box1">
      <h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
      <h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
      <h6>Ready to watch? Enter your email to create or restart your membership.</h6>
    </div>
    <div class="lp_box2">
      <div class="input-div">
        <input type="email" name="email" placeholder="Email address" />
      </div>
      <div class="get_started_btn">Get Started </div>
    </div>
  </div>
</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

Adding a padding-left to a horizontal list within Flexbox enhances the design and structure

How can the left-padding added by Flexbox on a horizontal list be fixed even with justify-content: space-between? <div class="list-container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> ...

htmlcssflexbox

Ways to retrieve an HTML form

I have designed an HTML form that submits data to addstuds.php for inserting records into a MySQL database. <form name="formcheck" method="post" action="addstuds.php"> <td width="30" height="35"><font size="3">*ID Number:</td> < ...

phpmysqlhtml

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...

c#htmlblazor

Leveraging the power of HTML 5 to dynamically insert content into a jQuery table

I am experiencing an issue with my jquery stock ticker. It displays the latest stocks including Company Name, stock price, and percentage changed. The stock price can be in GBP, USD, or YEN, but the current ticker does not indicate the currency. I attemp ...

javascriptjqueryhtml

What is the best way to utilize AJAX for displaying data within a div element?

I am struggling with integrating two files - index.php and process.php. In my index.php file, there is a form that submits to process.php: <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress"> <table> ...

javascriptjqueryhtmlajaxform-submit

Using jQuery to create an array variable and Passing the array to a different PHP page

Although I have managed to create a function that works perfectly for me, I am facing an issue with the jQuery part at the bottom. Currently, I am only able to trigger an alert message and not store the data as a real variable. The function is functionin ...

javascriptphpjqueryhtmljson

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

javascriptjqueryhtmlcsscolors

What is the best way to smoothly scroll to another page using a specific id?

My website consists of multiple pages and I am looking for a code that will allow for smooth scrolling navigation to another page when loading on a specific id or section. For example, in the navbar I have multiple pages with links. When clicking on a lin ...

javascripthtmlcss

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

htmlangulartypescript

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

htmlcssangulartypescript

Issue encountered when attempting to select a button with selenium

I'm attempting to use Selenium to click on a button, but encountering an error in the process. The specific error message is shown below: https://i.stack.imgur.com/NQjnh.png This snippet of code represents the accessed HTML page: https://i.stack.i ...

pythonhtmlselenium

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

javascripthtmlangulardom

Ways to decrease the space between lines of text within a single mat-option element

::ng-deep .mat-select-panel mat-option.mat-option { height: unset; } ::ng-deep .mat-option-text.mat-option-text { white-space: normal; } Currently, I have implemented this code to ensure that text in options wraps to the next line when it's too ...

htmlcssangular

Elements on the page are quivering as a result of the CSS animation

When a user clicks anywhere on a div, I have added a ripple effect to give it some interaction. However, there is an issue where the element shakes and becomes blurry when the page is in full screen mode until the ripple effect disappears. Below is the Ja ...

javascriptjqueryhtmlcss

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Guide on how to style and arrange multiple checkboxes in both horizontal and vertical rows using CSS

Is it possible to align a collection of checkboxes both vertically and horizontally, even when the labels vary in size? I found an example that demonstrates vertical alignment. Click here to view. How can I neatly arrange these checkboxes so that they ar ...

htmlcsscheckboxvertical-alignment

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

javascripthtml

The challenge of margin collapse

I am currently working on resolving a margin collapse issue. I am puzzled by the overlapping paragraphs and I really need to understand why this problem is happening. I suspect it may be a collapsing margin issue. Please take a look below: https://i.sta ...

htmlcss