jeudi 14 juin 2018

How to style my email form?

I'm 15 days into learning to code. I did the HTML modules on Freecodecamp, and I've started a mini project on CodePen. I've found I've already forgotten a ton, but I want to crack on with the project as that's what's helping me learn stuff.

My mini-project is a sign up form. Currently only email, but later I want to add first/last name plus other data points. However I want to know how to style the box of the email so it can be a bit bigger, plus I want to be able to make the text next to my checkbox smaller. But I've gotten stuck on both parts. I used a basic template for the form and adjusted it from there, but I'm really stuck on the styling.

My code is below. Am I along the right lines?

HTML

<!--- These are my sign up form elements --->  
<div class="myForm"><b>Below is a form</b></div></br>

<label for="email">
  <input type="text" placeholder="Enter Email" name="email" required>
  </br></br>
</label>

<label>
  <button type="submit" class="signupbtn">Sign me up!</button>
  </br>
  </br>
</label> 

<label> 
 <input type="checkbox"> I agree to the terms and conditions <a      href="wwww.thisisawebsite.com">here</a></input>
</label> 

CSS

body {
  font-family: Verdana,Arial,sans-serif;
  font-size: 18px;
}

p {
  font-size: 14px;
}

.myForm{
  font-family: Verdana,Arial,sans-serif;
  width: 200px;

}

button {
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  padding: 8px; 
}

label[for=email] {
  font-size: 20px; 
}




Aucun commentaire:

Enregistrer un commentaire