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

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

htmlcsswordpressdivi

The form submission is failing due to a specific AJAX condition not being met

On my form submission page, I am trying to call a function at the time of form submission, including an AJAX request. The form submission should occur or not based on a condition in the AJAX response message. The AJAX message can have two values: 1 and 0, ...

phpjqueryhtmlajax

Maximizing Compatibility of CSS3 Responsive Image Sprites for Firefox

Take a look at the Demo. Make sure to test it on both Chrome and Firefox to experience the difference. I've created a div element with the following CSS classes to make a responsive sprite of images: .what-wwb-logo, .what-national-geographic-logo, . ...

htmlcssfirefoxcss-sprites

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

htmlcsstailwind-css

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so. When everything fits on a single line, the layout appears fine. However, upon ...

htmlcss

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

The hyperlink is not functioning properly because of the CSS code

I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html However, I encountered an issue. When I click on <a href="1.html">Application 1</a> It doesn't redirect to 1.html as expected. The p ...

htmlcss

Executing Basic Calculations Instantly with Live Data in Qualtrics

I am encountering an issue with displaying the values on a slider in Qualtrics. I need to show the value where the respondent has placed the handle, as well as the complementary value from the other end of the scale. For example, if the user has chosen 55, ...

javascripthtmlcssruntimequaltrics

Retrieve information from a span element located within a div container

Being new to web scraping, I am encountering what may seem like a trivial issue. Below is the HTML code in question: <div class="price-container clearfix"> <span class="sale-flag-percent">-40%</span> <span class="price-box ri"> ...

pythonhtmlcssbeautifulsoup

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

htmlcssflexbox

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

javascripthtmlcss

What is the best way to use jQuery to attach functions to every input element?

Imagine you have a set of HTML markup and CSS like this: #CSS .inputhelp_text { background: #000; color: #fff; } .nodisplay { display: none; } <input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname"& ...

jqueryhtmlcssfunctioneach

Preserve present condition following a jQuery click event

I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...

javascriptjqueryhtml

Is it possible to refresh HTML content using jQuery?

Currently, I am attempting to iterate through response data and integrate the values into the HTML of my webpage. It's crucial for me to clear any existing values in the HTML so that only the new ones are displayed, keeping it up-to-date. The structu ...

javascriptjquerydjangohtml

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

javascriptjqueryajaxhtml

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

javascriptjqueryhtmlangularjsservice

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

Different custom background images for every individual page in Nuxt

Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss. @import 'variables'; @import 'page_transition'; @import url('https://f ...

cssvue.jssassnuxt.js