It will take some time before the images are approved.
In the meanwhile, the 3 images in the top row are coded as foreground images. Is that intentional, or could they be background-images? Do you expect the images to be resized, or do you expect their boxes to show more or less of them as the width of the page changes? If resized, do you expect them to maintain their native aspect ratio or can they stretch out or shape? And while the images are being resized, do you expect the height of the top row to be fixed?
It sounds like the top row has 3 image containers of equal height, the middle image container has a fixed width, the left and right containers have flexible widths that follow the width of the browser window. Presumably the row has a fixed height.
What you seem to be asking to do isn’t hard. But what comes next?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="general.css" rel="stylesheet" type="text/css">
<script src="code.js" type="text/javascript"></script>
<title>TEMP NAME</title>
<style type="text/css">
body {
background-color:#ace; /* TEST COLOR */
padding:0;
margin:0;
}
img {
display:block;
}
.wrapper {
outline:1px dotted red; /* TEST OUTLINE */
border:1px solid transparent;
width:90%; /* Set the width of the page here. */
min-width:680px; /* equals width of .window (the widest non-fluid element of the page) */
background:#def url(blue.png); /* TEST COLOR APPLIED */
background-size:cover;
margin:0 auto;
}
.top_bar {
outline:1px solid green; /* TEST OUTLINE */
background-color:pink; /* TEST COLOR */
padding:0 97px; /* padding = 1/2 width of middle box */
margin:0;
overflow:hidden;
}
.left_box {
outline:1px solid cyan; /* TEST OUTLINE */
width:50%;
/* height:nnpx; /* */
float:left;
text-align:center; /* ??? */
margin-left:-97px; /* margin = 1/2 width of middle box */
}
.right_box {
outline:1px solid cyan; /* TEST OUTLINE */
width:50%;
/* height:nnpx; /* */
float:right;
text-align:center; /* ??? */
margin-right:-97px; /* margin = 1/2 width of middle box */
}
.middle_box {
outline:1px solid cyan; /* TEST OUTLINE */
width:192px; /* box and bar margins and padding must be 1/2 this width */
text-align:center;
overflow:hidden;
margin:0 auto;
}
.header_main {
outline:1px solid magenta; /* TEST OUTLINE */
height:150px;
text-align:center;
}
.whole {
background-image:url('white.png'); /* ??? */
background-size:100% 100%;
opacity:0.9; /* ??? */
}
.window {
outline:1px solid blue; /* TEST OUTLINE */
width:680px;
height:400px;
background-image:url('white.png'); /* ??? */
background-size:100% 100%;
margin:30px auto 40px;
}
.windows {
border-style:outset;
width:130px;
height:400px;
float:left;
/* position:relative; /* ??? */
}
.content {
outline:1px solid lime; /* TEST OUTLINE */
max-width:850px;
clear:both;
margin:0 auto;
}
.footer {
height:40px;
background-color:#333;
}
.footer_bar {
color:#fff;
text-align:center;
padding:0px;
margin:0px;
}
/* THE FOLLOWING STYLES HAVE NO CORRESPONDING HTML */
.left_panel {
float:left;
/* position:relative; /* ??? */
width:44px;
height:600px;
}
.right_panel {
float:right;
/* position:relative; /* ??? */
width:44px;
height:600px;
}
.border {
border-style:solid;
border-width:3px; /* ??? */
border-width:25px 25px 25px 25px; /* ??? */
border-color:rgb(0,0,0);
-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
border-image:url("b1.png") 30 30 30 30 Stretch stretch;
}
iframe.test {
border:0;
width:100%;
max-width:900px;
height:900px;
/* position:relative; /* ??? */
overflow:hidden;
margin:0 auto;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="left_box">
<img src="left_bar.png" alt="left_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p>
</div>
<div class="right_box">
<img src="right_bar.png" alt="right_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
</div>
<div class="middle_box">
<img src="middle_bar.png" alt="middle_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum....</p>
</div>
</div>
<div class="wrapper">
<div class="header_main">
<img src="header.png" alt="header.png">
</div>
<div class="whole">
<div class="window">
<div class="windows">
<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
<source src="test.mov" type="video/mov">
</video>
</div>
<div class="windows">
<video id="vid2" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
<source src="test.mov" type="video/mov">
</video>
</div>
<div class="windows">
<video id="vid3" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
<source src="test.mov" type="video/mov">
</video>
</div>
<div class="windows">
<video id="vid4" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
<source src="test.mov" type="video/mov">
</video>
</div>
<div class="windows">
<video id="vid5" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
<source src="test.mov" type="video/mov">
</video>
</div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
</div>
</div>
<div class="footer">
<div class="footer_bar">
<img src="footer.png" alt="footer.png">
</div>
</div>
</body>
</html>