I got a really good idea for a browser game, but really crappy style skills. I'm just wondering if someone can help me with the style. Any pro pro-bono, generous feeling, awesome coders out there, would be a savior right now. I've attached an image file of what the screen looks like. Here's here's the current code. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Freeform Game</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Font Awesome --> <script src="https://use.fontawesome.com/a4263cdc34.js"></script> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <!-- style --> <link rel="stylesheet" href="css/style.css" /> <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Draggable Scroll JS --> <script src="lib/draggablescroll/draggablescroll.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Character</small></div> <div class="panel-body"> <span><small><b>Name:</b></small></span> <span><small><b>Gold:</b></small></span> <span><small><b>CP:</b></small></span> <span><small><b>Job:</b></small></span> <hr> <span>Health:</span> <progress id="health-bar" max="100" value="50"> <strong>Progress: 60% done.</strong> </progress> <span>Mana:</span> <progress id="mana-bar" max="100" value="100"> <strong>Progress: 60% done.</strong> </progress> </div> </div> <div id="location-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Location</small></div> <div class="panel-body"> <span>Current: Sentient River</span> <span style="margin-bottom:8px;">Weather: Fair</span> <form class="form" role="form" style="margin-bottom:8px;"> <input class="form-control" type="text" name="locationSearch" /> </form> <div id="location-output" class="dragscroll"> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> <p>Location 1</p> </div> </div> </div> <div id="skills-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Skills</small></div> <div class="panel-body"> <span>Last Result</span> <p><span style="color:blue;">barely passed swimming check.</span></p> <span>Skill List</span> </div> </div> <!-- Left Column End --> </div> <div class="col-md-6"> <!-- Center Column Start --> <div class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>World: Sentient River</small></div> <div id="location-description" style="padding:12px;padding-left:12px;"> <p>The Sentient River, was named after the ascended beings that were said to have created the flowing currents. Lush green vegitation grows about the mossy stones along the banks. Glessian Trees, and Sorian Cedars, are the most prominent trees in the area. <a href="#">Read More</a></p> </div> <div id="output-window"> <!-- Game Output Start --> <div class="skill-output world-output"> <p><img src="images/eye.png" style="margin-bottom:2px;"/><span style="color:blue;">Dalia</span> barely passes a swimming skill check.</span></p> </div> <div class="text-output world output"> <p><span style="color:blue;">Dalia</span> Gripped by fear of the water, Dalia's beginning to feel like jumping in wasn't such a good idea afterall. She can feel the undertow pulling her downward. A mouth full of water, sends seering pain through her lungs. Her stomach is in knots. "Please God's, don't let me drown here." She says to herself, as she struggles for the surface.</span></p> </div> <!-- Game Output End --> </div> <div class="panel-body"> <textarea id="text-input" rows="8" class="form-control" maxlength="480"></textarea> <input type="submit" class="btn btn-default" value="Submit" style="float:right;" /> </div> </div> <!-- Center Column End --> </div> <div class="col-md-3"> <!-- Right Column Start --> <div id="characters-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Characters</small></div> <div class="panel-body"> <form class="form" role="form"> <input class="form-control" type="text" name="locationSearch" /> </form> <div id="location-output"></div> </div> </div> <div id="equipped-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Equipped</small></div> <div class="panel-body"> <span>Head:</span> <span>Body:</span> <span>Hands:</span> <span>Feet:</span> <span>Left Ring:</span> <span>Right Ring:</span><br> <span>Held Left:</span> <span>Held Right:</span> <div id="location-output"></div> </div> </div> <div id="inventory-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Inventory</small></div> <div class="panel-body"> <span>Max Carry: 120 Lbs</span> </div> </div> <div id="spells-window" class="panel panel-default"> <div class="panel-heading panel-heading-style"><small>Spells</small></div> <div class="panel-body"> </div> </div> <!-- Right Column End --> </div> </div> </div> </body> HTML: CSS body{ background-color:lightgrey; } .panel-body span{ display:block; } .panel-heading-style{ height: 20px;padding:0; padding-left:16px; } /*World Window*/ #world-window{ height:100%; } .world-output{ margin-bottom:4px; } .output-window{ padding:14px; } .text-output{ border:2px solid lightgrey; } .text-input{ margin-bottom:8px; } .skill-output{ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* future proofing */ -khtml-border-radius: 4px; /* for old Konqueror browsers */ } .text-output{ padding:12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* future proofing */ -khtml-border-radius: 4px; /* for old Konqueror browsers */ } /* Location Window */ #location-output{ max-height:160px; overflow:scroll; overflow-x:hidden; overflow-y:hidden; } .skill-output{ border:2px solid lightgrey; height:40px; line-height:40px } /* Progress Resets*/ progress, /* All HTML5 progress enabled browsers */ progress[role] /* polyfill */ { /* gets rid of default border in Firefox and Opera. */ border: none; /* Needs to be in here for Safari polyfill so background images work as expected. */ background-size: auto; } /* Polyfill */ progress[role]:after { background-image: none; /* removes default background from polyfill */ } /* Ensure fallback text doesn't appear in polyfill */ progress[role] strong { display: none; } /* Health Bar */ #health-bar { color:red; width:100%; } #health-bar::-webkit-progress-bar { color: #ffeeee; } #health-bar::-webkit-progress-value { background: red; } #health-bar::-moz-progress-bar { background:red; } /* Polyfill */ #health-bar[aria-valuenow]:before { background: black; } /* Mana Bar */ #mana-bar { width:100%; } #mana-bar::-webkit-progress-bar { } #mana-bar::-webkit-progress-value { } #mana-bar::-moz-progress-bar { } Code (CSS):
Lol, yeah, sometimes I feel like that's a good solution. I've updated the page, it's look better, but can't share an image for some reason.
Ugh, bootcrap. It promotes bad coding practices such as mixing presentation with content (that's the reason why CSS was created). I recommend you to get rid of it and start from zero. It's not as difficult as it seems and you'll get a faster, more usable and easier to maintain site. Please, read this: http://cutcodedown.com/article/HTML_CSS_and_JS_frameworks and this: http://cutcodedown.com/article/progressive_enhancement