Question 80206 in Html Question posted in
Some basic documentation can be found here.

How to place text a little higher and make blue square smaller with circled edges and place sign up button on the right side beautifully – Html

I am new to coding and I was practicing landing page. Right now I am stuck here. As I explained in the title I have problems with CSS and maybe made a mistake in html

.last-page {
  background-color: #3882f6;
  font-size: 18px;
  color: aliceblue;
  padding: 10px;
  display: flex;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 50px;
}

.button {
  background-color: #3882f6;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
}

.text {
  margin-right: 75px;
  margin-left: 75px;
  margin-top: 25px;
}
<div class="last-page">
  <div class="text">
    <p> <strong>Time to action! It's time!</strong> <br> Sign up for our product by clicking that button right over there</p>
  </div>
  <button class="last-page button">Sign Up</button>
</div>
Tags:

3

Answers


  1. 0

    If you want to put the text higher, you can reduce the value of margin-top. And use position:absolute;right:10px; to put the button right of the container.

    Try this:

    <style>
    .last-page {
  background-color: #3882f6;
  font-size: 18px;
  color: aliceblue;
  padding: 10px;
  display: flex;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 50px;
}

.button {
  background-color: #3882f6;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  position: absolute;
  right: 20px;
}

.text {
  margin-right: 75px;
  margin-left: 75px;
  margin-top: 0px;
}
</style>

<div class="last-page">
    <div class="text">
      <p> <strong>Time to action! It's time!</strong> <br> Sign up for our product by clicking that button right over there</p>
    </div>
    <button class="last-page button">Sign Up</button>
  </div>

    Click the following link to preview:
    preview image

    Login or Signup to reply.
  2. 0

    1. To make the text a little higher, add a negative top margin to the ".text" class:

      .text {
      margin: -20px 75px 0 75px;
      }

    2. To make the blue square with circled edges add "border-radius" to the ".last-page".

    3. To place "Sign Up" on the right side, use "justify-content" also on the ".last-page"

    By the way, ".last-page" is a poor name. It’s best to choose a name that clearly reflects the component or page and its functionality, so that it can be easily recognized even after several years without the need to remember what the app is. Good luck with your learning!

    Login or Signup to reply.
  3. 0

    I would suggest a grid here since it allows you to control a lot and yet still keep it responsive.

    • "magic" part here is the button display: grid; place-items: center; which "super centers" the span inside of that. Change the button size and see what happens; no need for any fancy re-center margin adjustment or fragile positioning.
    • Added some borders and adjusted the button color background just to illustrate.
    • Based the body on what most browsers have as a default (16px) and set some defaults.
    • Replaced the p with a div since you seemed to what a "header" and "text"
    • three columns, one for the left spacing, one for the text and one for the button. IF you justified the grid to the end (right) you could remove that first column perhaps…that is a style choice.
    • Size the left to whatever "margin" you want 10rem now which is 160px (see why I set the default in the body?)
    • Set a grid gap which is "between" each of the columns to 1rem; can be whatever you want.
    • for the .action-text I set the margins to the p default so it can be whatever you style it to.
    • Set the button border radius to match the size so it is round; adjust as desired to be more oblong etc.
    • Button is at the right with the current but you could either put another column with a fixed width or just 1fr etc. to the right or put a right margin as needed to place it better;

    Be sure to show this in "full page" here and re-size the browser so you can see how it reacts to that.

    body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border;
}

.last-page {
  display: grid;
  grid-template-columns: 10rem auto 1fr;
  gap: 1rem;
  background-color: #3882f6;
  font-size: 1.25rem;
}

.text {
  grid-column: 2;
}

.button {
  grid-column: 3;
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  background-color: #9bc0fa;
  color: #ffffff;
  border: 0.25em solid #FFFFFF44;
  border-radius: 4em;
  width: 4em;
  height: 4em;
}

.action-text {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  color: aliceblue;
}

.action-header {
  font-weight: 600;
}
    <div class="last-page">
  <div class="text">
    <div class="action-text">
      <strong class="action-header">Time to action! It's time!</strong>
      <div class="action-message">Sign up for our product by clicking that button right over there</div>
    </div>
  </div>
  <button class="button"><span>Sign Up</span></button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search