Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Grid with Gallery" />
    <meta charset=utf-8 />
    <title> BLOG</title>
  </head>
  <body>
    <header>
      <h1>Meliss@'s Projects</h1>
      <h2>GRADUATING SENIOR BLOG</h2>
      <nav>
        
        <ul>
          <li><a href="http://jsbin.com/vinur">HOME</a></li>
          <li><a href="http://jsbin.com/juweg/">Projects </a>
           
          </li>
            
          <li><a href="http://jsbin.com/deruk/">Blog</a></li>
          
           <li><a href="http://jsbin.com/tiqoh/">Tutorial</a></li>
        </ul>
        
      </nav>
      </header>
    <div id="grid" class="group">
      <div class="row group smoke">
        <div class="threefourths column">
          <article>
            <a href="#about me" class="group-link">
              
​
<div class="threefourths column">
          <article>
            <a href="#BLOG" class="group-link">
              <figure id="BLOG TEXT">
              
              <h3>May 10, 2014</h3>
             <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/t31.0-8/10256160_10152080443032898_7209095134601221550_o.jpg" />
                <figcaption><p>TODAY I GRADUATED!!!    Next stop: Fort Jackson, SC!
                  </br>
              </br>
              In July, I leave for AG BOLC in Fort Jackson, SC, which is an Army training school for  upcoming Human Resource Officers. Luckily I found another female Lieutenant who attended AG BOLC last year and her blog about her initial experience there! I hope to do something similar with this blog starting in July. 
​
            </br>
  </br>
              
Afterwards, I'll be stationed at Ft. Bragg, NC with the 82nd Sustainment Brigade. 
</p></figcaption>
          </br>
        </br>
        <label for="graduation">When do YOU graduate? May 2014 or December 2014?</label>
        <input type="text" name="answer">
            </figure>
            </a>
          </article>
      </div> <!--end BLOG-->
              <div class="threefourths column">
          <article>
            <a href="#BLOG" class="group-link">
              <figure id="COMMENT BOX">
              
              <h3>COMMENTS</h3>
              <figcaption><p><form>
 <input type="text" name="comments">
 </form>
          
                </br>
                
                <button onclick="myFunction()">SUBMIT</button>
​
<script>
function myFunction() {
    alert("Thank you so much for commenting! ~Melissa");
}
</script>
            </figure>
            </a>
          </article>
  </body>
</html>
 
​
.group:after {
  content: "";
  display: table;
  clear: both;
}
​
#grid {
  width: 50%;
  max-width: 800px;
  background: #888888; 
  margin: 0 auto;
  padding:10px 0;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #555;
}
.row {
  padding: 11px;
  padding-right: 11;
}
.column {
  float:center;
  padding-right: 10px;
}
.fullwidth {
  width: 100%;
}
.threefourths {
  width: 75%;
}
.twothirds {
  width: 66.66%;
}
.onehalf {
  width: 50%;
}
.onethird {
  width: 33.33%;
}
.onefourth {
  width: 25%;
}
​
.onesixth {
  width: 16.66%;
}
.oneeighth {
  width: 12.5%;
}
/* Base Styles */
​
body {
  font: 20px/1.3 Agency FB;
  background: #FF99CC;
  position:relative;
  padding: 40px 0;
}
h1 {
  color: black;
  font-size:400%;
  
   
 
}
h2 {
  color: white;
  font-size: 250%;
  text-align: center;
 
}
​
h3 {
  font-size:150%
}
​
​
/* Navigation */
nav {
  background: black;
  position:fixed;
  top:0;
  right:0;
  left:0;
}
nav ul {
  margin: 0;
}
nav li {
  display: inline-block;
  padding: 15px 15px;
  color:#ddd;
}
nav li:hover, nav li:visited, a:visited {
  background: #bdbdbd;
  color: white;
}
img.logo {
  position: absolute;
  top:0;
  right:0;
}
​
figure img {  
  width: 100%;
  margin: 0 auto;
  display:block;
}
figure {
  background: black;
  padding:10px;
  margin: 0;
  height: 100%;
  width: 750px;
  color:white;
}
  
  
div.gallery img {
  width: 100%;
  max-width: 100%;
}
div.mat { padding: 10%; background: #333;}
aside li {
  list-style:square inside;
}
a.group-link {
  text-decoration:none;
}
.dark {
  background: white;
  padding: 5px 0 0 15px;
}
.smoke { background: #FF669; }
div.thumbs-container { width: 70%; margin: 0 auto; text-align:center;}
​
 
$(document).ready(function(){
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mredwards42pro
0viewers