Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sylinic .
Sylinic .
2,761 Points

HTML Responsive form, I'm at my wits end, turning to the Treehouse community for help!

Hey there Treehouse family. I just resubscribed to Treehouse after getting a great opportunity to work at an E-commerce Digital Agency, to help me stay sharp and supplement my learning. My boss has me wanting to build HTML forms from scratch, just giving me a screenshot to go off of.

Here is a pic of what I need to make.

https://www.dropbox.com/s/kjng86942jd74pv/sign%20in%20form%202.png?dl=0

I hope Dropbox links work here, and here is my code so far.

I'm having trouble getting the "Sign in here now" text and background to stay in the same container as the form. I wrapped them both in a wrapper div but it didnt acheive the result I wanted.

Also next to the "Forgot password" link, there is that widget that looks like a on off switch, I have no idea what or how to implement that. Other than that I think I have it pretty much pixel-perfect. My boss is very stern on being pixel-perfect.

Any help I would appreciate, I always love the Treehouse community.

EDIT: Here is a CodePen link too http://codepen.io/anon/pen/ggxgVW

====================================================================

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="robots" content="index, follow" />
        <meta name="GOOGLEBOT" content="INDEX, FOLLOW" />

        <title>Home Adam</title>
        <meta name="description" content="Home Adam"/>
        <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet" />
        <link type="text/css" href="font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|News+Cycle|Yellowtail" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet"> 

        <style>

            @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #000;
  width:100%;
}

.container {

  width: 100%;
  max-width:400px;
  margin: 0 auto;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

fieldset {
  border: medium none !important;
  margin: 0 0px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

header{width:100%; background-color:#537bbe;}

#signin { font-size:25px;
            font-family:arial;
            text-align:center;
            width:100%;
            color:white;
            background-color:#537bbe;
            }


form {width:100%;}

#password , #newpassword { font-size:1.4em; 
                           color:grey;
                           font-weight:bold;
                           margin-bottom:7px;
                           font:arial;
                           }

input { border-radius: 8px;}

#contact-submit { font-size:25px;}

        </style>
    </head>

    <body>
        <div class="container"> 

        <div id="wrapper">

            <div id="signin">Sign In Now Here</div>


             <form id="contact" action="" method="post">

                <fieldset>
                  <input  placeholder="John Doe" type="text" tabindex="1" required autofocus>
                </fieldset>
                <fieldset>
                  <input  placeholder="******" type="email" tabindex="2" required>
                </fieldset>

                <div id="existingpassword">Forgot your password?</div>

                <fieldset>
                    <div id="password">Existing Password</div>
                  <input  type="tel" tabindex="3" required>
                </fieldset>
                <fieldset>
                    <div id="newpassword">New Password</div>
                  <input  type="url" tabindex="4" required>
                </fieldset>
                <fieldset>
                  <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">SUBMIT</button>
                </fieldset>
              </form>

            </div><!--signin-->  

        </div><!--container-end-->
    </body>

</html>

2 Answers

Sylinic .
Sylinic .
2,761 Points
Sylinic .
Sylinic .
2,761 Points

This is odd, I don't know why the HTML markup is coming out looking so weird on my post, I'm going to check the Markdown Cheatsheet and try to fix it.

UPDATE : I figured out you have to surround code with three backticks "`" to make it all pretty to show off.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It would be better with this much code to make a codepen that we can then fork and work on. I'm just not smart enough to know what's going on looking at this much code.

Sylinic .
Sylinic .
2,761 Points

Code Pen, I think Im familiar with that website. They separate the CSS, HTML, and Javascript into different sections right?

Can you tell me how to embed Codepen here?

Sylinic .
Sylinic .
2,761 Points

Hey there Kevin, here is a codepen link.

http://codepen.io/anon/pen/ggxgVW

The problem was there is so much CSS styling it make it bulky to read :O