Css front end issue

HTML & CSS
1

I know HTML but i don’t known , what would the css of this image design…Anyone help me?

720×392 18.6 KB

Example is taken from : 'https://www.textlocal.in (css copyright)

2

What have you tried so far?

There’s only 2 elements inside a blue box with rounded corners and padding.

If you go to the page you linked to and open your dev tools you will see all the rules that create those elements. Just write your own rules based on the ones you see.

If you are still stuck then put up a codepen of what you have so far and we will help you tweak it into position. :slight_smile:

1 Like
3

Has anyone ever recommended that you invest some time in yourself and take a course in basic HTML and CSS. If not, I highly recommend it.

4

Thanks for reply, I created a code which is:
But the subscribe button text show bottom why but when I run the code on https://htmledit.squarefree.com it show good. Why is happening and where is error…

<style>

.news {
  position: relative;
  z-index: 1;
  background: #1F6797;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 25px;
  border-radius:5%;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.news input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  border-radius:3%;
  background: #fff;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.news button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  border-radius:4%;
  background: #7BCD2A;
  width: 50%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.news button:hover,.form button:active,.form button:focus {
  background: #FDF461; color:black;
}
</style><div class="news">
  
    <form>
    
      <input type="email" placeholder="E-mail Address (John@domain.com)" required autocomplete="off"/>
      
      <button>Subscribe</button>
      <p class="message">Subscribe our Newsletter it's free!</p>
    </form>
  </div>
</div>

Duplicate:

Original:

720×392 18.6 KB

5

Again, as you have been told many times, you need to start writing valid html.

The code you posted (invalid as it is) does not show the same results you posted with the “Subscribe” text at the bottom, nor do I see anything in the code that would make that happen.
So I suspect the code you are actually using is different somehow.
Try supplying a full working page, but run the code through the validator first and remove all of the error. Don’t expect broken code to work properly.

1 Like
6

Hi shivkumar

you have more </div> than opening tags.

and try to use <input type="submit" name="subscribe" value="subscribe"> than change .new button{ to .news input[type="submit"]{

also there is no need for closing tags on input tags as it does not wrap.

7

Thank you! Problem has fix!
THANKS once again!!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.