Currently, I am at this stage: https://codepen.io/YellaChevy/pen/odYxrg
Sorry for my amateur markup skills as I am new to this. My main goal is to apply one box-shadow property to both "dogBlock" and "infoBlock". I believe it has something to do with the structure of my HTML but I'm not sure how to modify it to achieve a similar look to this:
I've observed on the pages.xyz website that they use multiple divs while having an overall box-shadow effect. Does that sound clear?
Thank you in advance!
<section>
<div class="container">
<div class="dogBlock">
<a href="#"><img src="Assets/image_1.jpg"></a>
</div>
<div class="dogBlock">
<a href="#"><img src="Assets/image_2.jpg"></a>
</div>
<div class="dogBlock">
<a href="#"><img src="Assets/image_3.jpg"></a>
</div>
</div>
<div class="container">
<div class="infoBlock">
<h2>Sharpe</h2>
<p>Lorem ipsum dolor sit amet, sir dolor em.</p>
<a href="#">Meet Sharpe</a>
</div>
<div class="infoBlock">
<h2>Bonnie, Mya + Roo</h2>
<p>Lorem ipsum dolor sit amet, sir dolor em.</p>
<a href="#">Meet the sisters</a>
</div>
<div class="infoBlock">
<h2>Willow</h2>
<p>Lorem ipsum dolor sit amet, sir dolor em.</p>
<a href="#">Meet Willow</a>
</div>
</div>
.container {
max-width: 1200px;
overflow: hidden;
margin: 0 auto;}
.boxShadow {
box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.2);}
.dogBlock {
width:33.333%;
float: left;
margin-top: 80px;}
.infoBlock {
color:#000;
width:33.333%;
float:left;
background-color:rgba(236,236,236,1.00);
padding: 20px;
margin-bottom: 280px;}