"Hero-Prototype"
Bootstrap 2.3.2 Snippet by ddweerasiri

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend class="legend">Instagram Post Submission Page</legend> <!-- Text input--> <!--<div class="control-group"> <label class="control-label" for="textinput">Caption</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="Comet the ISON" class="input-xlarge" required=""> </div> </div>--> <!-- Textarea --> <div class="control-group"> <label class="control-label" for="textarea">Description</label> <div class="controls"> <textarea id="textarea" name="textarea">O say can you see by#DeepImpact's bright light? #Cometcontact made 10 yrs ago this #July4. Info </textarea> </div> </div> <!-- Textarea --> <div class="control-group"> <label class="control-label" for="textarea">Keywords</label> <div class="controls"> <textarea id="textarea" name="textarea">space, NASA, JPL, comets, anniversary, fireworks, fourthofjuly, 4thofjuly, independenceday</textarea> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">URL</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="http://astro.unsw.edu.au/breaktrough.html" class="input-xlarge" required=""> </div> </div> <!-- File Button --> <div class="control-group"> <label class="control-label" for="filebutton">Image location</label> <div class="controls"> <input id="filebutton" name="filebutton" class="input-file" type="file"> </div> </div> <div class="cover-card col-sm-4" style="background: url(https://62e528761d0685343e1c-f3d1b99a743ffa4142d9d7f1978d9686.ssl.cf2.rackcdn.com/files/88311/area14mp/image-20150714-21721-xyyx50.jpg) no-repeat center top;background-size:cover;"> </div> <!-- Button (Double) --> <div class="control-group"> <label class="control-label" for="button1id"></label> <div class="controls"> <button id="button1id" name="button1id" class="btn btn-success">Submit</button> </div> </div> </fieldset> </form>
body{ background: #e9eaed; } .legend { background: #3b5998; color: #FFFFFF; margin-left: 0px; padding: 10px; } .cover-card { border: 2px solid white; background: silver; padding: 20px; width:450px; margin: 10px; height:450px; display: block; margin-left: 180px; margin-right: auto; } .cover-card:hover > p { background-color: rgba(6,6,6,0.3); color: white; text-shadow: 3px 3px 10px #000; } .btn { background: #3b5998; color: #FFFFFF; }

Related: See More


Questions / Comments: