<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<div class="col-md-10">
<h1>James Montgomery Flagg</h1>
<br>
<div id="jmPic" class="col-md-4">
<img src="http://artofthegreatwar.info/wp-content/uploads/2013/10/Flagg1.jpg" alt="tab1" class="img img-responsive">
</div>
<!--<div class="col-md-6">-->
<h2 id="hdTwo">About J. M. Flagg</h2>
<p id="parTwo">James Montgomery Flagg was an American artist most known for his painting "I Want You" Poster used for WWI and WWII to recruit soldiers.
J. M. Flagg was born June 18, 1877, and passed may 27, 1960. His life as an artist started early at the ripe old age of 14, where he was making illustrations
for Life Magazine. From 1894-98, we was a member of the Art Students League of New York. from 1898-1900, we studied in London and Paris, then ultimately
came back to the US</p>
<p class="text-right">
<a href="http://bootsnipp.com/iframe/W7yMb" target="_blank">Best viewed full screen</a><br>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FW7yMb" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
<!--</div>-->
</div>
<!--<div class="col-md-4">-->
<!-- <br>-->
<!-- <p>James Montgomery Flagg was an</p>-->
<!-- <br>-->
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<!-- begin panel group -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- panel 1 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span class="side-tab" data-target="#tab1" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse"
data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">Uncle Sam Recruitment Poster</h4>
</div>
</span>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<!-- Tab content goes here -->
Thomas Nast was the first political cartoonist to draw a recognizable picture of Uncle Sam,
but James Montgomery Flagg was the man who created the I Want You poster in World War I (Uncle Sam).
This was originally published on the cover of the July 6, 1916 article of Leslie’s Weekly. This poster was so popular and
effective that it was used in World War II as well (Most Famous).
</div>
</div>
</div>
</div>
<!-- / panel 1 -->
<!-- panel 2 -->
<div class="panel panel-default" role="tablist">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span class="side-tab" data-target="#tab2" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title collapsed">Life Is Strange</h4>
</div>
</span>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<!-- Tab content goes here -->
</div>
</div>
</div>
<!-- / panel 2 -->
<!-- panel 3 -->
<div class="panel panel-default" role="tablist">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span class="side-tab" data-target="#tab3" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingThree" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title">TAB 3 </h4>
</div>
</span>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<!-- tab content goes here -->
tab 3 content
</div>
</div>
</div>
</div> <!-- / panel-group -->
</div> <!-- /col-md-4 -->
<div class="col-md-8">
<!-- begin macbook pro mockup -->
<div class="md-macbook-pro md-glare">
<div class="md-lid">
<div class="md-camera"></div>
<div class="md-screen">
<!-- content goes here -->
<div class="tab-featured-image">
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<img id="sam" src="http://1.bp.blogspot.com/-ZcsRrnwoy98/ThENfxlaeTI/AAAAAAAAZsk/56nh5KVqr_Y/s1600/Uncle%2BSam.jpg"
alt="tab1" class="img img-responsive">
</div>
<div class="tab-pane " id="tab2">
<img id="wakeUP" src="http://cdn.loc.gov/service/pnp/cph/3g00000/3g03000/3g03800/3g03802v.jpg" class="img-responsive" alt="Wake">>
</div>
<div class="tab-pane fade" id="tab3">
<img src="https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?dpr=2&fit=crop&fm=jpg&h=650&q=75&w=950" alt="tab1" class="img img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="md-base"></div>
</div> <!-- end macbook pro mockup -->
</div> <!-- / .col-md-8 -->
body {
margin-top:60px;
font-family: 'Montserrat',sans-serif;
}
/* this is just for the demo */
#jmPic {
border: solid;
border-color: black;
}
#parTwo, #hdTwo {
padding-left: 350px;
}
#sam {
width: 50%;
height: 50%;
}
#wakeUpxx {
width: 25%;
height: 25%;
}
.panel-heading:hover {
cursor:pointer;
}
.panel-heading {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.side-tab:hover {
cursor: pointer;
}
.panel.panel-default {
border: none;
box-shadow: none !important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel-heading {
border: none;
background-color: grey;
}
.panel-body {
background-color: #f5f5f5;
}
.panel-title {
font-weight: 400;
color: $white;
}
/*----------------------------------
Macbook pro mockup from:
http://jaredhardy.com/minimal-devices/
----------------------------------*/
.md-macbook-pro {
display: block;
width: 55.3125em;
height: 31.875em;
font-size: 13px;
margin: 0 auto;
@media (max-width:1199px){
font-size: 11px;
}
@media (max-width:1024px){
font-size: 10px;
}
@media (max-width:767px){
font-size: 7px;
}
@media (max-width:320px){
font-size: 5px;
}
}
.md-macbook-pro .md-lid {
width: 45em;
height: 30.625em;
overflow: hidden;
margin: 0 auto;
position: relative;
border-radius: 1.875em;
border: solid 0.1875em #cdced1;
background: #131313;
}
.md-macbook-pro .md-camera {
width: 0.375em;
height: 0.375em;
margin: 0 auto;
position: relative;
top: 1.0625em;
background: #000;
border-radius: 100%;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
.md-macbook-pro .md-camera:after {
content: "";
display: block;
width: 0.125em;
height: 0.125em;
position: absolute;
left: 0.125em;
top: 0.0625em;
background: #353542;
border-radius: 100%;
}
.md-macbook-pro .md-screen {
width: 42.25em;
height: 26.375em;
margin: 0 auto;
position: relative;
top: 2.0625em;
// background: #1d1d1d;
background: #fff;
overflow: hidden;
}
.md-macbook-pro .md-screen img {
width: 75%;
}
.md-macbook-pro .md-base {
width: 100%;
height: 0.9375em;
position: relative;
top: -0.75em;
background: #c6c7ca;
}
.md-macbook-pro .md-base:after {
content: "";
display: block;
width: 100%;
height: 0.5em;
margin: 0 auto;
position: relative;
bottom: -0.1875em;
background: #b9babe;
border-radius: 0 0 1.25em 1.25em;
}
.md-macbook-pro .md-base:before {
content: "";
display: block;
width: 5.6875em;
height: 0.625em;
margin: 0 auto;
position: relative;
background: #a6a8ad;
border-radius: 0 0 0.625em 0.625em;
}
.md-macbook-pro.md-glare .md-lid:after {
content: "";
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-radius: 0 1.25em 0 0;
background: -webkit-linear-gradient(37deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
background: -moz-linear-gradient(37deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
background: -o-linear-gradient(37deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
background: linear-gradient(53deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
}
