Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Markup and Style Support [Browser Game]

Discussion in 'HTML & Website Design' started by Jeremy Benson, Aug 20, 2016.

0
  1. #1
    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.
    SEMrush
    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):
     

    Attached Files:

    Jeremy Benson, Aug 20, 2016 IP
    SEMrush
  2. karjen

    karjen Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #2
    Try this 
    body{
   display:none;
}
    Code (markup):
    Just joking :)
     
    karjen, Aug 20, 2016 IP
  3. Jeremy Benson

    Jeremy Benson Active Member

    Messages:
    356
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    73
    #3
    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.
     
    Jeremy Benson, Aug 20, 2016 IP
  4. Puntocom81

    Puntocom81 Banned

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #4
    Last edited: Aug 20, 2016
    Puntocom81, Aug 20, 2016 IP