Recreate it appears on the screen below. When you click on one of the pictures link on the right side shall info about selected films emerge in the middle. The property position is possibly. Only allowed in movie information site. Use transition to create fade effect between the films."
Here is the code I have now:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
h1{color:#fff;text-align:center}
#container {
max-width: 960px;
background-color: rgb(66, 69, 74);
margin:auto;
text-align:left;
}
.subheader {
font-size:30px;
font-family:"Times New Roman", Times, serif;
text-align:left;
color: #00FFFF;
margin:0 0 10px 10px;
}
.content {
color: #000000;
width:100%;
background-color: rgb(66, 69, 74);
margin:auto;
display:table;
border-spacing:10px;
text-align:left;
border-bottom-width: 30px;
border-bottom-style: solid;
border-bottom-color: #00ffff;
}
.main {
background-color: rgb(230, 231, 232);
display:table-cell;
vertical-align:top;
padding: 50px 10px 15px 10px;
text-align:left;
}
ul.thumbnails{
margin:0;
padding: 50px 10px 15px 10px;
background-color: rgb(230, 231, 232);
list-style:none;
display:table-cell;
vertical-align:top;
}
.side-img{
float:left;
margin: 0 25px 0 10px;
}
.side-img img{display:block}
.middle{overflow:hidden}
@media screen and (max-width:799px){
.main,ul.thumbnails{display:block;width:auto;clear:both}
.main{display:inline-block;margin:0 0 10px;}
.content{border-spacing:0;margin:10px;width:auto;}
ul.thumbnails {text-align:center;}
ul.thumbnails li{display:inline-block;vertical-align:top;width:32%}
ul.thumbnails img{width:100%;height:auto;}
}
@media screen and (max-width:560px){
.side-img{float:none;}
.side-img img{
max-width:380px;
width:100%;
height:auto;
margin:10px auto;}
</style>
</head>
<body>
<div id="container">
<header id="mainHeader">
</header>
<section id="mainContent">
<h2 class="subheader">BluShop</h2>
<div class="content">
<article class="main">
<h4 class="side-img">Star Trek <img src="startrek.jpg" width="350" height="450" alt="starTrek" ></h4>
<div class="middle">
<p> When the crew of the Enterprise is called back home, they find an unstoppable force of terror from within their
own organization has detonated the fleet and everything it stands for, leaving our world in a state of crisis.
With a personal score to settle, Captain Kirk leads a manhunt to a war-zone world to capture a one man weapon of mass destruction.
As our heroes are propelled into an epic chess game of life and death, love will be challenged, friendships will be torn apart,
and sacrifices must be made for the only family Kirk has left: his crew</p>
</div>
</article>
<ul class="thumbnails">
<li><img src="pacificrim.jpg" width="111" height="150" alt="img1" > </li>
<li><img src="startrek.jpg" width="111" height="150" alt="img2" > </li>
<li><img src=" worldwarz.jpg" width="111" height="150" alt="img3" > </li>
</ul></div>
</section>
</div>
</body>
</html>
Do you mean you want to click the thumbnail on the right and then have that change the image and text in the left panel?
If so you will need JS for that to do it properly but you could do something using :target.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
h1 {
color:#fff;
text-align:center
}
#container {
max-width: 960px;
background-color: rgb(66, 69, 74);
margin:auto;
text-align:left;
}
.subheader {
font-size:30px;
font-family:"Times New Roman", Times, serif;
text-align:left;
color: #00FFFF;
margin:0 0 10px 10px;
}
.content {
color: #000000;
width:100%;
background-color: rgb(66, 69, 74);
margin:auto;
display:table;
border-spacing:10px;
text-align:left;
border-bottom-width: 30px;
border-bottom-style: solid;
border-bottom-color: #00ffff;
}
.main {
background-color: rgb(230, 231, 232);
display:table-cell;
vertical-align:top;
padding: 50px 10px 15px 10px;
text-align:left;
}
ul.thumbnails {
margin:0;
padding: 50px 10px 15px 10px;
background-color: rgb(230, 231, 232);
list-style:none;
display:table-cell;
vertical-align:top;
}
.side-img {
float:left;
margin: 0 25px 0 10px;
}
.side-img img {
display:block
}
.middle {
overflow:hidden
}
.main{width:100%;}
.panel {
position:absolute;
left:-999em;
top:-999em;
opacity:0;
-webkit-transition:opacity 1s ease;
-moz-transition:opacity 1s ease;
transition:opacity 1s ease;
}
.panel:target {
opacity:1;
position:static;
}
@media screen and (max-width:799px) {
.main, ul.thumbnails {
display:block;
width:auto;
clear:both
}
.main {
display:inline-block;
margin:0 0 10px;
}
.content {
border-spacing:0;
margin:10px;
width:auto;
}
ul.thumbnails {
text-align:center;
}
ul.thumbnails li {
display:inline-block;
vertical-align:top;
width:32%
}
ul.thumbnails img {
width:100%;
height:auto;
}
}
@media screen and (max-width:560px) {
.side-img {
float:none;
}
.side-img img {
max-width:380px;
width:100%;
height:auto;
margin:10px auto;
}
}
</style>
</head>
<body>
<div id="container">
<header id="mainHeader"> </header>
<section id="mainContent">
<h2 class="subheader">BluShop</h2>
<div class="content">
<article class="main">
<div id="pic1" class="panel">
<h4 class="side-img">Star Trek <img src="startrek.jpg" width="350" height="450" alt="starTrek" ></h4>
<div class="middle">
<p> When the crew of the Enterprise is called back home, they find an unstoppable force of terror from within their
own organization has detonated the fleet and everything it stands for, leaving our world in a state of crisis.
With a personal score to settle, Captain Kirk leads a manhunt to a war-zone world to capture a one man weapon of mass destruction.
As our heroes are propelled into an epic chess game of life and death, love will be challenged, friendships will be torn apart,
and sacrifices must be made for the only family Kirk has left: his crew</p>
</div>
</div>
<div id="pic2" class="panel">
<h4 class="side-img">A Long Trek <img src="startrek.jpg" width="350" height="450" alt="starTrek" ></h4>
<div class="middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae vestibulum diam. Fusce hendrerit, nulla viverra lobortis efficitur, mauris tellus pharetra lectus, eget tincidunt nisi orci id arcu. Aliquam suscipit libero eros, eget porta erat malesuada vitae. Cras posuere metus non nulla tristique, sed efficitur erat hendrerit. Maecenas cursus, ligula nec suscipit tempus, magna magna pellentesque quam, eget tincidunt enim lorem nec orci.</p>
</div>
</div>
<div id="pic3" class="panel">
<h4 class="side-img">Another Trek <img src="startrek.jpg" width="350" height="450" alt="starTrek" ></h4>
<div class="middle">
<p>Pellentesque nec nisi blandit, sollicitudin dolor id, dapibus odio. Vestibulum id nisi nec dui volutpat venenatis. Nulla vestibulum odio eros, ac sollicitudin risus ullamcorper ac. Sed tincidunt sapien quis pulvinar gravida. Duis vehicula enim non mi imperdiet condimentum. Nulla ac ante vitae eros varius lacinia eget in metus. Aliquam purus nisl, convallis eu tortor id, luctus malesuada erat.</p>
</div>
</div>
</article>
<ul class="thumbnails">
<li><a href="#pic1"><img src="pacificrim.jpg" width="111" height="150" alt="img1" ></a> </li>
<li><a href="#pic2"><img src="startrek.jpg" width="111" height="150" alt="img2" ></a> </li>
<li><a href="#pic3"><img src=" worldwarz.jpg" width="111" height="150" alt="img3" ></a> </li>
</ul>
</div>
</section>
</div>
</body>
</html>
As Ryan said you should really be trying this by yourself first and then asking for help when you get stuck
