CSS grid style change

              <div class="container container3">

        <div class="inner" id="login">
        <form action="">
            <label><span class="glyphicon glyphicon-user"></span></label>
            <input type="text" placeholder='Username' class="input"/><br>
            <label><span class="glyphicon glyphicon-envelope"></span></label>
            <input type="text" placeholder='Email' class="input"/><br>
            <label><span class="glyphicon glyphicon-lock"></span></label>
            <input type="password" placeholder="Password" class="input" /><br>
            
            
            <label><span class="glyphicon glyphicon-check"></span></label>
            <input type="password" placeholder="Confirm Password" class="input"/><br>
            <button type="submit" class="button">Sign in</button>
        </form>
        
    </div>    
</div>
.container3{background: #cccccc; width: 100%;border: solid 1px white;}

Open in new window


I have the code above how can I put put
get it to be
name
email
password                   confirm password
(and email and name to be the full like not just center)?
And make the boarder a bit smaller.
LVL 1
Jazzy 1012Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
Here is an option - I took the liberty of using input-groups to combine your glyphicons with the inputs.
  <div class="row">
    <form action="" class="col-xs-6 col-xs-offset-3">
      <label class="sr-only" for=""username">Username</label>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
          <input type="text" placeholder="Username" id="username" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="email">Email</label>
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
          <input type="text" placeholder="Email" id="email" class="form-control"/>
        </div>
      </div>
      <div class="row form-group">
        <div class="col-xs-6">
          <label class="sr-only" for="password">Password</label>
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
            <input type="text" placeholder="Password" id="password" class="form-control"/>
          </div>
        </div>
        <div class="col-xs-6">
          <label class="sr-only" for="email">Confirm Password</label>
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-check"></span></div>
            <input type="text" placeholder="Confirm Password" id="confirm" class="form-control"/>
          </div>
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="button">Sign in</button>
      </div>
    </form>
  </div>

Open in new window

Working sample here
0
 
Jazzy 1012Author Commented:
Yes but I want it to show up transparent like this:
Css code:
.container3{background: #cccccc; width: 100%;border: solid 1px white;}
.col-md-4 h1{ color : #9f00a7; font-family: calibri, arial; font-weight: bold; font-size: 30px; position: relative; left: 30px;} 
.header{ width : 100%; padding-top: 20px;height:100%}
.header a{color: rgb(100,100,100); padding: 20px; position: relative; top : 30px;font-family: calibri, arial;font-weight: 900;  }
#col-md-4{ height: 50px;}
.control-label{float: left;}
.container .inner{background: transparent;width: 480px; margin: 100px auto; border : 1px solid none; padding: 10px; }
.inner h1{color : rgb(200,200,200); font-family: calibri, arial; font-weight: bold; text-align: center; font-size: 40px}
.inner h3{color: rgb(200,200,200); font-size: 18px; font-family: calibri; text-align: center; margin-top: -5px}
.inner form label span{color: white;}
.inner form lagend{color: white;}
.inner .input{width : 90%; border: none; border-bottom: 1px solid white; color: white; background: transparent; padding: 10px;}
.inner .input:focus{box-shadow: none; border: none;}
.container hr{border-color: rgb(100,100,100);}
.inner .button{border-radius:10px 10px 10px 10px;color: white; background: #cccccc; padding: 2px 30px ;  border: 2px solid white;  font-family: calibri; margin:10px auto; font-weight: bold;}
.inner .button:hover{background: #cccccc; color:red ;border: 2px solid red;}

Open in new window

html code:
 
            <div class="col-md-12">
                    <div class="heading-title-wrapper" style="color">
                        <h2 class="title" <?php echo $css_title_color ?>><?php echo "Sign-up Here!" ?></h2>
                        <span class="line-title" style="background-color:#fff"></span>
                    </div>
                </div>
     
              <div class="container container3">

        <div class="inner" id="login">
        <form action="">

            <input type="text" placeholder='Username' class="input" style="width:600px" /><br>

            <input type="text" placeholder='Email' class="input" style="width:600px" /><br>
<div class= "col-md-4 col-md-offset-4">
            <input type="password" placeholder="Password" class="input" />
</div>
<div class="col-md-4">
            <input type="password" placeholder="Confirm Password" class="input" /><br>
            </div>
            <button type="submit" class="button">Sign in</button>
        </form>
        
    </div>

Open in new window


Sorry I didnt know how to put it on a snippet.
0
All Courses

From novice to tech pro — start learning today.