I need to create a design similar to this using HTML/CSS with the Skeleton framework: view design preview
I've experimented with various methods to overlap the background and image, utilizing absolute positioning for the image. However, this approach is not ideal as the design becomes distorted when adjusting the browser width. I aim for a responsive design. Is there a better way to achieve this effect? If not, how can I vertically center the image within the gray background? Thank you!
For reference, here are the HTML/CSS files along with the Skeleton framework and the image (provided for testing purposes): Dropbox folder
Below is the snippet of pure code. Starting with the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="news twelve columns">
<div class="imgcont seven columns">
<img src="newsimg.jpg">
</div>
<div class="newsimage ten columns">
<div class="newstext six columns">
<div class="row">
<h2>Latest News</h2>
<h3>New video coming out soon!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="row">
<div class="more"><a href="#">MORE</a></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Moving on to the CSS rules:
.news{
margin-top: 3.125em;
}
.newsimage{
position: relative;
float: right;
background-color: #594f4e;
height: 100%;
}
.imgcont{
position: absolute;
top: 6em;
left: 0;
z-index: 200;
}
.newstext{
float:right;
}
.newstext h2{
display: inline-block;
font-size: 2.6em;
text-transform: uppercase;
float: right;
padding: 0.5em 0.75em 0 0;
letter-spacing: 0.02em;
}
.newstext h3{
display: inline-block;
font-size: 2.35em;
float: left;
padding: 0 0.5em 0 0;
line-height: 1.2em;
}
.newstext p{
display: inline-block;
font-size: 1.55em;
float: left;
padding: 0 1em 0 0;
line-height: 1.3em;
margin-bottom: 0.5em;
}
.more{
display: inline-block;
background-color: #716960;
margin: 0 1em 1em auto;
float: right;
}
.more a{
display: block;
color: white;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 1.35em;
text-transform: uppercase;
letter-spacing: 0.03em;
float: right;
}
img{max-width:100%;}
h1, h2, h3, p{
color: white;
}